Klik Tujuh

  

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>
# Dan Simpan kode berikut diatasnya :

/* ---------------
Zoom efect with jquery
---------------------------------- */
ul.jzoom {
        float: left;
        list-style: none;
        margin: 0;
        padding: 10px;
        width: 360px;

    }

ul.jzoom li {
    margin: 0; padding: 5px;
    float: left;
    position: relative; /* Set the absolute positioning base coordinate */
    width: 110px;
    height: 110px;

    }

ul.jzoom li img {

    width: 100px; height: 100px; /* Set the small jzoomnail size */
    -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
    position: absolute;
    left: 0; top: 0;

    }

ul.jzoom li img.hover {

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DVGeunH0JnGWgCWxSZIaiqemCGwwn47MwitPr9QjsagCC3ISUiIScogS7M49dvdObQgBSL6NIlQWZmFOXHhJkYNfnWRHu4R6hhJeNW0XlaJ0q1ocT6LaontAe7zbIhET8NRxIab-n3Ws/) no-repeat center center;

    }

selanjutnya simpan kode berikut tepat diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> $(document).ready(function(){  $(&quot;ul.jzoom li&quot;).hover(function() {$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()

.animate({

    marginTop: &#39;-110px&#39;,marginLeft: &#39;-110px&#39;,

    top: &#39;50%&#39;, left: &#39;50%&#39;,

    width: &#39;174px&#39;,height: &#39;174px&#39;,

    padding: &#39;20px&#39;}, 200);


    } , function() {

    $(this).css({&#39;z-index&#39; : &#39;0&#39;});

    $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()

    .animate({

    marginTop: &#39;0&#39;,marginLeft: &#39;0&#39;,

    top: &#39;0&#39;,left: &#39;0&#39;,

    width: &#39;100px&#39;, height: &#39;100px&#39;,

    padding: &#39;5px&#39; }, 400);

    }); $(&quot;ul.jzoom li a&quot;).click(function() {


    var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name

    $(&quot;#main_view img&quot;).attr({ src: mainImage });


    });


    });

    </script>

cara pemanggilannya :

<ul class="jzoom">
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Descriptions" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
</ul>

silahkan kawan-kawan simpan di gadget ataupun di postingan sesuai kebutuhan dan pengembangannya,,,,,
DEMO Image zoom effect with jquery
seperti biasa karena memang pakai jquery pasti ada jquery yang bentrok,,, kesimpulannya jika script jquery nya sudah ada, kawan-kawan tidak perlu menambahkannya lagi,,,