Cara Membuat Efek Zoom Seri 3

Efek zoom seri 3 ini tetap menggunakan kekuatan
1 (satu) gambar dalam pemakaian kodenya. Sebelum
anda memasangnya, lihatlah dahulu contohnya.
Silahkan letakkan dan lepaskan cursor anda tepat
di atas gambar gadis cantik di bawah ini :

• 

Bila anda ingin membuat efek zoom seri 3 ini di blog anda,
ikutilah langkah memasangnya seperti berikut ini :

1.  Rancangan -> Tambah Gadget
     Pilih HTML/JavaScript lalu masukkan kode
     di bawah ini dalam kontennya :

<div class="zoomimg"><ul class="zoom"><li><a title='Keterangan link/gambar' target="_blank" href="URL link di sini"><img class="zoom" src="URL gambar di sini"></a></li> <li><a title='Keterangan link/gambar' target="_blank" href="URL link di sini"><img class="zoom" src="URL gambar di sini"></a></li> </ul></div>

2.  Kemudian masuk ke Edit HTML.

3.  Jangan lupa untuk selalu memback-up
     template anda, untuk berjaga-jaga bilamana
     terjadi kesalahan dalam penempatan kodenya.

4.  Carilah kode </head>

5.  Di atas kode </head> ini, letakkanlah
     kode JavaScript sebagai berikut :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <br /> <script type="text/javascript"> $(document).ready(function(){$(".zoom li").hover(function() {$(this).css({'z-index' : '5'}); $(this).find('img').addClass("hover").stop() .animate({marginTop: '-130px', marginLeft: '-130px', top: '20%', left: '20%', width: '300px', height: '370px', padding: '5px' }, 500);} , function() { $(this).css({'z-index' : '0'});$(this).find('img').removeClass("hover").stop() .animate({marginTop: '0', marginLeft: '0',top: '0', left: '0', width: '150px', height: '190px', padding: '5px'}, 500);}); $(".zoom li a").click(function() {var mainImage = $(this).attr("href"); $("#main_view img").attr({ src: mainImage });return false;});}); </script>

6.  Masih di Edit HTML.
     Cari lagi kode </b:skin>

7.  Di atas kode </b:skin> ini, letakkanlah
     kode CSS berikut ini :

.zoomimg{<br /> margin:5px;<br /> position:absolute;<br /> }<br /> <br /> .zoom {<br /> float:left;<br /> list-style:none;<br /> margin:0;<br /> padding:10px;<br /> }<br /> <br /> .zoom li{<br /> margin:0; <br /> padding:6px;<br /> float:left;<br /> position:relative;<br /> width:120px;<br /> height:160px;<br /> }<br /> <br /> .zoom li img.zoom {<br /> width:120px; <br /> height:160px;<br /> border:2px solid #0000FF;<br /> padding:5px;<br /> background:#FFFFFF;<br /> position:absolute;<br /> -ms-interpolation-mode:bicubic; <br /> }<br /> <br /> .zoom li img.zoom.hover{<br /> background:#FFFF00;<br /> border:1px solid #FF0000; <br /> width:10px; <br /> height:10px; <br /> padding:5px;<br /> }

KETERANGAN :

Ubahlah ukuran width: & height:-nya,
sesuaikan dengan ukuran gambar anda.

Bila anda menemukan kode <br />
dalam kode-kode di atas, hilangkanlah kode tersebut
lalu turunkan ke bawah kode yang setelahnya.

( hal ini berlaku untuk semua kode-kode
tutorial di blog ini agar kodenya dapat berfungsi
atau bekerja sebagaimana mestinya )

Contohnya pada kode di atas, susunan
kodenya akan menjadi seperti ini :

.zoomimg{

margin:5px;

position:absolute;

}

.zoom {

float:left;

list-style:none;

margin:0;

padding:10px;

}

Dan seterusnya .......

Selamat mencoba, good luck!