Cara buat gallery dengan efek hover zooming

Tambah lagi koleksi cara buat gallery. Berbeda dengan yang lalu, anda bisa lihat DISINI. Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. Cara membuatnya, selain menggunakan fitur Css dan beberapa Html juga menggunakan jQuery.
Untuk cara penerapannya juga sangat mudah, anda tinggal ikuti langkah -langkah mudah yang ada dibawah, Dan bila anda ingin menambahkan jumlah gambar pada gallery ini, anda tinggal menambahkannya pada bagian Html.

Yang perlu diingat, ini untuk seluruh gadget atau widget yang menggunaklan jQuery. Terkadang pada template blog kita sudah terdapat javascript jQuery yang sama, sehingga ketika kita ingin memasang gadget atau widget yang menggunakan jQuery, akan mengalami troble, atau gadget tersebut tidak bekerja dengan baik, bahkan kadang justru membuat gadget yang sudah terpasangpun ikut tidak bekerja.
Nah..., bila menghadapi masalah seperti diatas, anda tidak perlu bingung. Sebenarnya karena ketika kita memasang gadget baru yang menggunakan jQuery, pada template kita sudah ada jQuery yang sama. Jadi solusinya, hilangkan saja jQuery yang ada pada gadget yang baru tersebut, dan lihat hasilnya.

Sekarang LIHAT DEMO

Bila anda berminat memasang gallery ini, silahkan ikuti langkah - langkah dibawah ini. Tapi ingat, gadget ini juga menggunakan jQuery ya.... :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '1000'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-90px', marginLeft: '-90px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '1px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script> <style type="text/css">body { font: Arial, Helvetica, sans-serif normal 10px; margin: 0; padding: 0; } * {margin: 0; padding: 0;} img {border: none;} ul.thumb { float: left; list-style: none; margin: 20; padding: 20px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; list-style:none; float: left; position: relative; width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; -ms-interpolation-mode: bicubic; } ul.thumb li img.hover { background:url(thumb_bg.png) no-repeat center center; border: none; z-index: 1500; } #main_view { float: left; padding: 9px 0; margin-left: -10px; } </style>

Catatan : Pada kode diatas terdapat kode javascript jQuery.

6. Simpan Template

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada saat menulis artikel, jangan lupa tambahkan kode pada bagian Edit HTML . Cara ini bila gallery akan ditampilkan pada halaman posting. 
 

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<ul class="thumb">

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

<li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

<li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

<li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

</ul>

Catatam :

• Silahkan anda ganti Teks berwarna MERAH dan BIRU pada kode HTML diatas.
• Setiap baris tag <li> adalah untuk satu gambar. Bila anda ingin menambah satu gambar, anda tinggal menambah  satu baris tag <li>.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.