Zoom gambar dengan Fanzy Zoom Plugin

Hai - hai...
Kali ini mimin mau share mengenai zoom gambar dengan Fanzy Zoom Plugin. Kelebihan dari plugin ini adalah bila plugin jquery zoom hanya bisa zoom in gambar, fanzy zoom melakukannya dengan gaya karena menawarkan animasi yang lebih menarik beserta tambahan drop shadow dan tombol close.

Fanzy zoom tidak hanya digunakan untuk zoom in gambar, ia juga bisa digunakan sebagai modal dialog yang bisa diisi dengan teks dan gambar.

Berikut codingnya :

CSS nya :

<style type="text/css">
#kotak {
margin:15px auto;
font:12px/15px Verdana, Geneva, sans-serif;
border:solid 1px #333;
background:#FF9;
width:500px;
padding:5px 10px;
text-align:center;
border:solid 1px #CCC;
}
#kotak p {
text-align:justify;
}
#kotak h3 {
margin:5px 0;
}
#kotak img {
margin:10px 10px;
text-align:justify;
}
#medium_box img {
float:left;
display:block;
margin-right:5px;
margin-bottom:5px;
}
#medium_box p {
margin:0;
}
#large_box {
width:600px; height:300px;
}
#large_box img{
float:left;
}
</style>

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="fancyzoom.min.js"></script>
<script type="text/javascript">
$(function() {

$('div.thumb a').fancyZoom({scaleImg: true, closeOnClick: true});

$('#medium_box_link').fancyZoom({width:400, height:300});
$('#large_box_link').fancyZoom();
$('#flash_box_link').fancyZoom();

}); //--end of doc.ready

</script>

<div class="thumb" id="kotak">
<h3>Double Click to Zoom</h3>
<a href="#fallout"> <img src="images/thumb01.jpg" width="131" height="150" alt="fallout" /> </a>
<a href="#metalgear"> <img src="images/thumb02.jpg" width="131" height="150" alt="metal gear" /> </a>
<a href="#killzone"> <img src="images/thumb03.jpg" width="131" height="150" alt="killzone" /> </a> </div>

<div id="kotak">
<h3>Judul Artikel</h3>
<p>When you first enter the warehouse, equip the <a href="#medium_box" id="medium_box_link">Zombie face paint</a> (or any other with the same rating) and the Splitter camouflage. Enter the large room and take out the two guards patrolling the lower area. Down there you'll find a cardboard box, Thernal Goggles to the South as well as the Desert face paint. </p>
<p>Climb the first two flights of stairs and drop down over the railing onto the boxes below to find an <a href="#large_box" id="large_box_link">Mk22 suppressor.</a> Climb the stairs again and enter the door to find some extra rations, at the very top be careful of the third guard who is patrolling. Make your way past him and enter the door. <p>
</div>

<div id="fallout"> <img src="images/resize_01.jpg" width="524" height="600" alt="fallout" /> </div>
<div id="metalgear"> <img src="images/resize_02.jpg" width="524" height="600" alt="fallout" />
</div> <div id="killzone"> <img src="images/resize_03.jpg" width="524" height="600" alt="fallout" /> </div>

<div id="medium_box">
<h2>Here is a medium box</h2>
<img src="images/pic-02.gif" width="100" height="100" alt="gambar"/>
<p><strong>The width and height of this box are set in the options for this fancy zoom.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>

<div id="large_box">
<h2>Here is a large box</h2>
<img src="images/pic-01.gif" width="100" height="100" alt="gambar2"/>
<p><strong>The width and height for this box are inferred from css. See the style tag in the &lt;head&gt; of this document.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>

Lihat demo disini
Download code lengkapnya disini

Terimakasih