Pages

Zoom image ala jquery facebook

Pasti anda sudah kenal apakah itu Facebook . Facebook adalah social networking yang paling populer saat ini. Dan di dalam situs facebook, juga terdapat sebuah tool tip yang sudah lazim anda lihat. Tool tips itu akan terlihat jika anda membuka daftar teman, siapa yang meng. like status kita dll.




Pada tutorial kali ini saya akan membahas caranya agar ketika gambar di postingan kita di klik, maka akan muncul seperti tool tip di facebook. Saya namakan trik ini dengan Zoom image ala jquery facebook. Karena kita akan menggunakan jquery untuk menyempurnakan trik facebook ini.

Mari kita mulai saja tutorial Zoom image ala jquery facebook:

Intregrasi dengan template:
  • Login ke Blogger
  • Masuk ke bagian Rancangan - Edit HTML
  • Centang kotak kecil expand widget
  • Letakan kode di bawah ini di atas kode ]]></b:skin>

#egafacejquery .b{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDcQb9PsI/AAAAAAAAD10/tlsyech1rKQ/d/b.png)}
#egafacejquery .tl{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDwX017ZI/AAAAAAAAD2Y/9YvW1nyo3rE/d/tl.png)}
#egafacejquery .tr{background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/S4QD_EwzYDI/AAAAAAAAD2c/3y21OtLBoVQ/d/tr.png)}
#egafacejquery .bl{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDcq5SDlI/AAAAAAAAD14/aMQ2Ep-Br8w/d/bl.png)}
#egafacejquery .br{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDc2QNzQI/AAAAAAAAD18/5N4GZspRmRY/d/br.png)}
#egafacejquery{left:0;position:absolute;text-align:left;top:0;width:100%;z-index:100}
#egafacejquery .popup{position:relative}
#egafacejquery table{border-collapse:collapse;margin:auto}
#egafacejquery .body{background:#fff;padding:10px;width:370px}
#egafacejquery img{background:transparent;border:0;margin:0;padding:0}
#egafacejquery .footer{border-top:1px solid #DDD;margin-top:10px;padding-top:5px;text-align:right}
#egafacejquery .tl,#egafacejquery .tr,#egafacejquery .bl,#egafacejquery .br{height:10px;overflow:hidden;padding:0;width:10px}
#egafacejquery .loading,#egafacejquery .image{text-align:center}
  • Letakan kode di bawah ini, di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://egablog.googlecode.com/files/egafacejquery.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(&#39;a[rel*=egafacejquery]&#39;).egafacejquery()
})
</script>
  • Simpan template

Intregrasi dengan gambar di artikel:

  • Agar semua bisa berjalan dengan baik. Intregrasikan jqery, css, javascript di atas dengan gambar di artikel anda.
  • Script yang di gunakan adalah sebagai berikut

<a href="URL Gambar" rel="deejayhanjquery"><img src="URL Gambar" border="0" alt="Keterangan Gambar" /></a>
  • Sebenarnya anda hanya harus menambahkan kode yang berwarna hijau di atas di setiap gambar yang ingin anda beri efek jquery facebook. Dengan cara menambahkannya setelah URL gambar seperti contoh di atas
  • Simpan template dan Lihat hasilnya!!!
  • Sumber : EgaBlog
Labels: