Home » » Image Zoom Effect With Jquery

Image Zoom Effect With Jquery


Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. 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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;

    }
8. 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>

9. Cara Pemasangannya :
<ul class="jzoom">
<li><a href="#"><img alt="Description" height="150" src="URL GAMBAR ANDA" width="200" /></a></li>
<li><a href="#"><img alt="Descriptions" height="150" src="URL GAMBAR ANDA" width="200" /></a></li>
<li><a href="#"><img alt="Description" height="150" src="URL GAMBAR ANDA" width="200" /></a></li>
</ul>
NB: silahkan anda simpan di gadget ataupun di postingan sesuai kebutuhan  
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .