Photo Gallery (grid) with javascript

Posted by : Stiker Jalingkut

Pada Kesempatan Kali,ini Kami Mau Berbagi Photo Gallery (grid) with javascript
Apa Yang Di Namakan Photo Gallery (grid) with javascript Yuk Kita Langsung Pada Topik Nya..
Yang saya tahu - sangat banyak orang menggunakan galeri foto yang berbeda pada website Atu Blogger sendiri. Mereka ingin berbagi foto sendiri, `s teman foto, Liburan dll Ini adalah karena kita mencoba untuk membuat tutorial tentang galeri yang berbeda. Hari ini kami akan terus membuat album foto. Tapi hari ini kita don `takan menggunakan plugin siap, itu akan dilakukan pada javascript murni. Ini akan crossbrowser profesional galeri dibuat dalam HTML + JS + CSS.

Seperti biasa, kita mulai dengan HTML. Ini adalah kode sumber dari sampel kami:
index.html Warna Merah Harus Sobat Di Ganti Css & Javascript. Seperti Biasa Yuk Lihat Dulu Hasilnya

<span style="font-family: Courier New;"> </span><span style="font-family: Courier New;"><span style="color: blue;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<link rel="stylesheet" href="<b><span style="color: #990000;">css/main.css</span></b>" type="text/css" media="all" />
	<script src="<b><span style="color: #990000;">js/main.js</span></b>" type="text/javascript"></script>
</head>
<body>
<div class="example" id="main">
	<div id="panel">
		<div class="unit" title="Description of picture 1">
<img src="data_images/pic1.jpg" alt=""></div>
<div class="unit" title="Description of picture 2">
<img src="data_images/pic2.jpg" alt=""></div>
<div class="unit" title="Description of picture 3">
<img src="data_images/pic3.jpg" alt=""></div>
<div class="unit" title="Description of picture 4">
<img src="data_images/pic4.jpg" alt=""></div>
<div class="unit" title="Description of picture 5">
<img src="data_images/pic5.jpg" alt=""></div>
<div class="unit" title="Description of picture 6">
<img src="data_images/pic6.jpg" alt=""></div>
<div class="unit" title="Description of picture 7">
<img src="data_images/pic7.jpg" alt=""></div>
<div class="unit" title="Description of picture 8">
<img src="data_images/pic8.jpg" alt=""></div>
<div class="unit" title="Description of picture 9">
<img src="data_images/pic9.jpg" alt=""></div>
<div class="unit" title="Description of picture 10">
<img src="data_images/pic10.jpg" alt=""></div>
<div class="unit" title="Description of picture 11">
<img src="data_images/pic11.jpg" alt=""></div>
<div class="unit" title="Description of picture 12">
<img src="data_images/pic12.jpg" alt=""></div>
<div class="unit" title="Description of picture 13">
<img src="data_images/pic13.jpg" alt=""></div>
<div class="unit" title="Description of picture 14">
<img src="data_images/pic14.jpg" alt=""></div>
<div class="unit" title="Description of picture 15">
<img src="data_images/pic15.jpg" alt=""></div>
</div>
</div>
</body>
</html></span>
</span>

Seperti yang Anda lihat - saya hanya menggambar daftar objek kami ke galeri baru kami. Deskripsi untuk benda akan dimasukkan ke dalam atribut 'title'.
Langkah 2. CSS

Langkah 3. JS
Berikut adalah file tunggal JS (file ini sudah dalam paket kami):
js / main.js

<span style="font-family: Courier New;"> <span style="color: blue;">var xm = 0;
var ym = 0;

sP = {
	cx : 0,
	cy : 0,
	N  : 0,
	R  : [],
	I  : [],
	C  : [],
	L  : [],
	Id : 0,

// initialization
	init : function () {
		this.scr = document.getElementById('main');
		this.pan = document.getElementById('panel');
		this.div = this.pan.getElementsByTagName('div');
		this.scr.onselectstart = function () { return false; };
		this.scr.ondrag = function () { return false; };

for (var i = 0, o; o = this.div[i]; i++) {
			if (o.className == 'unit') {
				// legend
				o.l = document.createElement('div');
				o.l.className = 'info';
				o.appendChild(o.l);
				// hover
				o.r = document.createElement('div');
				o.r.className = 'hover';
				o.appendChild(o.r);
				o.r.x = 0;
				o.r.l = o.l;
				o.r.p = 0;
				o.r.s = 2;
				o.r.m = false;
				o.img = o.r.img = o.getElementsByTagName('img')[0];
				o.r.c = Math.random() * 100;
				o.r.o = o;
				sP.R[sP.N] = o.r;
				sP.I[sP.N] = o.img.src;
				sP.L[sP.N] = o.title;
				o.title = '';
				sP.N++;
				// mouse over effect
				o.r.onmouseover = function () {
					if (!this.m && this.img.complete) {
						// walk through images
						if (sP.O != this && !this.n) {
							this.x = this.o.offsetWidth;
							this.l.innerHTML = sP.L[sP.Id];
							this.img.src = sP.I[sP.Id];
							this.resize();
							this.n = true;
							if(++sP.Id >= sP.N) {
								sP.Id = 0;
								for (var i = 0, o; o = sP.R[i]; i++) o.n = false;
							}
						}

if (sP.O) {
							sP.O.s = 2;
							sP.C.push(sP.O);
						}
						this.m = true;
						sP.O = this;
						sP.Or = this;
					}
				};

// resize
				o.r.resize = function () {
					var i = new Image();
					i.src = this.img.src;
					this.img.style.width  = (i.width  < this.offsetWidth) ? Math.round(this.offsetWidth  * 1.25) + 'px' : Math.round(i.width) + 'px';
					this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px';
					this.w = (this.img.offsetWidth  - this.offsetWidth)  * 0.5;
					this.h = (this.img.offsetHeight - this.offsetHeight) * 0.5;
					this.img.style.visibility = 'visible';
				};
			}
		}

// start
		sP.resize();
		sP.run();
	},

resize : function () {
		// resize window
		var o = sP.scr;
		sP.nw = o.offsetWidth;
		sP.nh = o.offsetHeight;
		sP.iw = sP.pan.offsetWidth;
		sP.ih = sP.pan.offsetHeight;
		for (sP.nx = 0, sP.ny = 0; o !== null; o = o.offsetParent) {
			sP.nx += o.offsetLeft;
			sP.ny += o.offsetTop;
		}
		for (var i = 0, o; o = sP.R[i]; i++) { o.resize(); }
	},

// loop
	run : function () {
		// scroll main area
		sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * 0.5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * 0.1;
		sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * 0.5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * 0.1;
		sP.pan.style.left = Math.round(sP.cx) + 'px';
		sP.pan.style.top  = Math.round(sP.cy) + 'px';
		// image moving and legend
		if(sP.O) {
			sP.O.c += 0.02;
			sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px';
			sP.O.img.style.top  = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px';
			sP.O.l.style.left = Math.round(sP.O.x--) + 'px';
		}
		// hover up
		if (sP.Or) {
			sP.Or.p -= sP.Or.s;
			sP.Or.s *= 1.8;
			if (sP.Or.p < -sP.Or.offsetHeight) {
				sP.Or.p = -sP.Or.offsetHeight;
				sP.Or.s = 2;
				sP.Or.m = false;
				sP.Or = false;
			}
			sP.O.style.top = Math.round(sP.O.p) + 'px';
		}
		// hover down
		for (var i = 0, c; c = sP.C[i]; i++) {
			if (c != sP.Or) {
				c.p += c.s;
				c.s *= 1.2;
				if (c.p >= 0) {
					c.p = 0;
					c.s = 2;
					c.m = false;
					sP.C.splice(i, 1);
				}
				c.style.top = Math.round(c.p) + 'px';
			} else {
				c.s = 2;
				c.m = false;
				sP.C.splice(i, 1);
			}
		}
		setTimeout(sP.run, 16);
	}
};

// on mouse position functionality
document.onmousemove = function(e) {
	if (window.event) { e = window.event; }
	xm = e.clientX;
	ym = e.clientY;
	return false;
};

// start gallery onload
function startGallery() {
	sP.init();
	onresize = sP.resize;
}

if (window.attachEvent) { window.attachEvent('onload', startGallery); }
else {window.addEventListener('load', startGallery, false); }</span>
</span>

Klau Sobat Mau Yang Langsung Pasang Tinggal Ganti Images Nya'j
Silakan Copy Code Di Bawah

Sekian Dulu Dari Kami Tentang Photo Gallery (grid) with javascript
Semoga Berguna Buat Sobat Semua Amin

{ 34 comentários... read them below or Comment }

Muehammad Yuezha Andrean5 Desember 2012 pukul 04.07
Kok berat ya gan Blog agan?
BalasHapus
Balasan
AZLA5 Desember 2012 pukul 04.58
Perasaan barusan sudah komentar tadi kok gak ada apa dihapus oleh sipemilik blog ini kali yah...hehe..gak apalah
sepertinya ini memang perlu diulangi lagi komentarnya...

Wah... Tutorialnya mantap dan berguna sekali, sayangnya ilmu saya belum sampai di sana ini genk, tapi terus terang saya suka,ilmunya sangat berguna, dan saya akan belajar, karena Blog ini memang spesial utk tutorial pembelajaran saya nih
terima kasih genk sudah berbagi
BalasHapus
Balasan
Sharing Ilmu Marketing, Pengembangan Diri & Peluang Usaha.5 Desember 2012 pukul 05.03
mantap tuh genk.. tapi ngomong2 blog'nya berat genk.. padahal saya pake speedy.. mungkin kebanyakan widget blog'nya genk.. :)
BalasHapus
Balasan
Staff Administrator5 Desember 2012 pukul 05.08
wah di klik bisa jalan gitu ya sob gambar nya...kya di demo nya :D

keren :D
BalasHapus
Balasan
vlog media news5 Desember 2012 pukul 05.17
Oke nanti akan saya coba genk..
BalasHapus
Balasan
DECYBER5 Desember 2012 pukul 05.20
ijin langsung praktik,, pengen nyoba membuatnya langsung hehehe...
BalasHapus
Balasan
Kang Muroi5 Desember 2012 pukul 05.33
makasih tutorialnya sob...
BalasHapus
Balasan
Yogi Prasetian5 Desember 2012 pukul 08.37
Keren juga gan,.
Mau coba ah..
BalasHapus
Balasan
Stiker Jalingkut5 Desember 2012 pukul 08.44
silakan sobat @@, dah berkunjung sobat
BalasHapus
Balasan
Unknown5 Desember 2012 pukul 08.48
heheheh gambar dibawah lucu-lucu, ada dono komat-kamit tuch :D
BalasHapus
Balasan
Beben Koben5 Desember 2012 pukul 14.45
wah!!! dapat dr mn nih **p
BalasHapus
Balasan
Unknown5 Desember 2012 pukul 16.59
salam blogwalking gan
BalasHapus
Balasan
Unknown5 Desember 2012 pukul 17.51
Thanks sharingnya, mas!
Salam kenal gan dan kalau sempat mampir sekalian mengundang untuk gabung dengan teman-teman lain yang sudah SUBMIT URL BLOG-nya ke Direktori Weblog Indonesia :)
BalasHapus
Balasan
Unknown5 Desember 2012 pukul 20.42
sepakat dengan sopo kui sing ngomong nang nduwur.. :D
kok rasanya berat banget ya..

kinerja kompinya juga langsung nanjak nih kang.. :)
BalasHapus
Balasan
Stiker Jalingkut6 Desember 2012 pukul 01.23
trmks sobat dah rutin berkunjung Ok lngsung ke TKP D: Hehehe :waaa:
BalasHapus
Balasan
Anonim1 Februari 2013 pukul 02.11
Mantep sobb
Template nya bagus banget dan enteng

Gobel's Blog
BalasHapus
Balasan
dedetea6621 Juni 2013 pukul 04.36
waduh keren banget kang Bro,ijin save ach,mau nyoba Gan Terimakasih
BalasHapus
Balasan

Tambahkan komentar

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

TUTORIAL™

--✽-✽--WELCOME TO --✽-✽--

Photo Gallery (grid) with javascript

{ 34 comentários... read them below or Comment }

Gabung Yuk

Labels

Mengenai Saya

Pengunjung

Labels

Pengikut