Image zoom effect with jquery

Demonya bisa dilihat disini





    Cara membuatnya :
  1. Login blogger

  2. Rancangan, Edit Html, Cari kode ]]></b:skin>

  3. 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/AVvXsEio1JBBjP0DbGHvsJ3Tw6gh6cJgQln_zft_Gq38dPDx-9E1DltWfHXT29psk0HbPCfjo_TMeY8l23BitOGsyv8bj2HxEJwbq0Mn5FkBkadhdYwH8YhWvwXL__gMBAx_LoptLUHKZI0HpzHH/) 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,,,,,







seperti biasa karena memang pakai jquery pasti ada jquery yang bentrok,,, kesimpulannya jika script jquery nya sudah ada, kawan-kawan tidak perlu menambahkannya lagi,,,





Terima Kasih
Created By Syarief Hidayat



------------------------------------------------------------------------------------------

Blog Archive