Hallo friends… Lama tak jumpa… masih bersama saya “Wadeblack” hehehehe…
Ok lah, cukup segini aja sapaannya, sekarang kita masuk ke materi Javascript 
Kali ini saya akan mengkolaborasikan css dengan javascipt dan memberikan source code simple javascipt image gallery tersebut .
Pertama-tama Anda harus memiliki 15 buah gambar yang akan dimasukkan kedalam gallery Anda, sebagai contoh Saya menggunakan gambar yang ada di Facebook Saya.
buat lah 3 buah text file, beri nama ketiga file yaitu a.css, a.js, dan a.html
copy script css dibawah ini dan paste-kan ke dalam file a.css
html {
overflow: hidden;
}body {
background: #000000;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
color: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
}#screen {
position:absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
overflow: hidden;
background: #414141;
}#grid {
position:absolute;
}#grid img {
position: absolute;
cursor: pointer;
left: -10000px;
}#grid .over {
border: #ff0000 solid;
}
kemudian save file tersebut, selanjutnya copy script dibawah ini dan paste-kan ke dalam file a.js
var O = [];
var iL;
var scr;
var grd;
var grs;
var tit;
var cap;
var xm = 0;
var ym = 0;
var nx = 0;
var ny = 0;
var nw = 0;
var nh = 0;
var cx = 0;
var cy = 0;
var cz = .2;
var Tw = 0;
var Th = 0;
var X = 0;
var Y = 0;
var F = false;
var Fo = false;
var NK = 0;
var ZM = .8;
var NX = 5;
var NY = 3;
var NB = 1.2;
var Mz = NX * 2;
var mz = .1;
var path = “”;
var images = [
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
];
document.onmousemove = function(e)
{
if (!F)
{
if (window.event)
{
e = window.event;
}
xm = Math.min(nw, Math.max(0, (e.x || e.clientX) – nx));
ym = Math.min(nh, Math.max(0, (e.y || e.clientY) – ny));
}
}
function resize()
{
nx = scr.offsetLeft;
ny = scr.offsetTop;
nw = scr.offsetWidth;
nh = scr.offsetHeight;
Tw = nw * cz;
Th = nh * cz;
for (var i in O)
{
O[i].resize();
}
}
onresize = resize;
function scroll(e)
{
if (!F)
{
var z = 0;
if (e)
{
z = (e.detail > 0) ? 1 : – 1;
}
else
{
z = (event.wheelDelta < 0) ? 1 : – 1;
}
if (z > 0)
{
if (ZM < Mz)
{
ZM *= 1.2;
}
}
else
{
if (ZM > mz)
{
ZM *= .8;
}
}
}
else
{
F = false;
}
}
if (window.addEventListener)
{
window.addEventListener(‘DOMMouseScroll’, scroll, false);
}
else
{
document.onmousewheel = scroll;
}
function Img(n, x, y)
{
this.x = x;
this.y = y;
this.n = n;
this.loaded = false;
this.img = document.createElement(“img”);
this.img.obj = this;
this.img.src = document.getElementById(‘loading’).src;
grd.appendChild(this.img);
this.ims = this.img.style;
this.pre = new Image();
this.pre.obj = this;
this.pre.onload = function()
{
this.obj.loaded = true;
this.obj.img.src = this.src;
}
this.pre.src = path + images[n % iL][0];
this.img.ondrag = function() { return false; }
this.img.onselectstart = function() { return false; }
this.img.ondblclick = this.img.onmousedown;
this.img.onmousedown = function()
{
if (this.obj.loaded)
{
if (F)
{
ZM = NK;
F = false;
}
else
{
F = this;
NK = ZM;
ZM = NX + .1;
xm = (((nw / NB) * .5) / NX) + F.obj.x * nw / NX;
ym = (((nh / NB) * .5) / NY) + F.obj.y * nh / NY;
}
}
return false;
}
this.img.onmouseover = function()
{
if(Fo)
{
Fo.obj.border(false);
}
if (this.obj.loaded)
{
var i = images[this.obj.n % iL];
tit.innerHTML = i[1];
cap.innerHTML = i[2];
Fo = this;
Fo.obj.border(true);
}
else
{
tit.innerHTML = “”;
cap.innerHTML = “”;
}
}
this.resize = function()
{
this.ims.left = Math.round(NB * this.x * Tw / NX) + ‘px’;
this.ims.top = Math.round(NB * this.y * Th / NY) + ‘px’;
this.ims.width = Math.round(Tw / NX) + ‘px’;
this.ims.height = Math.round(Th / NY) + ‘px’;
if(this == Fo.obj)
{
this.border(true);
}
}
this.border = function(over)
{
var b = 0;
var m = 0;
if (over)
{
b = Math.round(((NB * Th / NY) – (Th / NY)) * .5);
m = 2 – b;
this.img.className = “over”;
}
else
{
this.img.className = “”;
}
this.ims.borderWidth = b + ‘px’;
this.ims.marginLeft = m + ‘px’;
this.ims.marginTop = m + ‘px’;
}
}
function run()
{
var vz = (ZM – cz) * .05;
if (Math.abs(vz) > .001)
{
resize();
}
else
{
vz = 0;
}
cz += vz;
cx += (xm – cx) * .1;
cy += (ym – cy) * .1;
grs.left = Math.round((nw * .5) – (NB * cx * Tw / nw)) + ‘px’;
grs.top = Math.round((nh * .5) – (NB * cy * Th / nh)) + ‘px’;
setTimeout(run, 16);
}
onload = function()
{
grd = document.getElementById(“grid”);
grs = grd.style;
scr = document.getElementById(“screen”);
tit = document.getElementById(“title”);
cap = document.getElementById(“caption”);
iL = images.length;
var k = 0;
for (var y = 0; y < NY; y++)
{
for (var x = 0; x < NX; x++)
{
O.push(new Img(k++, x, y));
}
}
resize();
cx = xm = nw / 2;
cy = ym = nh / 2;
run();
setTimeout( function () {
document.getElementById(‘notice’).style.visibility = ‘hidden’;
}, 30000);
}
save, dan perhatikan script ini
["alamat_gambar.jpg","nomor_gambar","judul_gambar"],
ubah menjadi alamat, nomor, dan judul gambar yang Anda tentukan.
contoh :
["http://photos-e.ak.fbcdn.net/hphotos-ak-snc3/hs377.snc3/24155_106818309344300_100000483947570_172771_6578433_n.jpg","01","3d Outline"],
dan yang terakhir copy script dibawah ini dan paste-kan ke a.html
<html>
<head>
<title>Javascript Gallery</title>
<link rel=”stylesheet” type=”text/css” href=”a.css”>
<script src=”a.js” type=”text/javascript”>
</script>
</head>
<body><div align=”center”>
<div id=”screen”>
<div id=”grid”></div>
</div>
<div id=”title”></div>
<div id=”caption”></div>
<img id=”loading” alt=”" src=”loading.jpg” style=”visibility: hidden”>
</div>
</body>
</html>
kemudian save, masukkan ketiganya ke dalam 1 Folder.
Preview :
Selesai ^_^
abang ganteng !!!
hebat banget..
adek udah coba lhoo..
makasi ya sayang
mangstaB omz !!!
pake “B” … ihihihihi ..
ahhh, kalian bedua bisa aja
ane jd malu
[...] : Nightwalker Team Source : Simple Js Image Gallery April 18th, 2010 in [...]
[...] : Nightwalker Team Source : Simple Js Image Gallery Posted in [...]
Yg betul gmna nii.??
Udh gw cba brkli2 ttep ga bza. . .krim k email gw ea.?!
thx..
—rheeztt—