Efek Zoom Pada Foto menggunakan Jquery

EFEK ZOOM (JQUERY)

DEMO

Pada postingan sebelumnya saya sudah membahas tentang 5 Efek foto keren menggunakan JQuery

Dan kali ini masih membahas tentang Efek pada Foto,dengan menggunakan Jquery.

Dimana Kita akan membuat foto Tampil Lebah Besar ketika Kita mengarhkan Mouse pada Gambar tersebut.Cara kerja pada postingan saya sebelumnya Hampir mirip dengan cara kali ini,Bedanya Cuma Efek yang di brikan Pada gambar tersebut. Untuk Lebih Jelasnya… sobat bisa lihat disini untuk memastikan kebenaranya.

Dan bagi sobat yang Tertarik Berikut adalah langkah langkah nya :

masuk ke Bloggger sobat
Pilih menu Template kemudain
Edit HTML dan jangan Lupa centang Expan widget tempalte
Cari kode </head> dengan menggunakan CTRL F dan
Copy Kode di bawah ini tepat di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script src='http://wierdwalker.googlecode.com/files/easyzoom.js' type='text/javascript'/>

<script type='text/javascript'>

jQuery(function($){

$('a.zoom').easyZoom();

});

</script>

Selanjutnya adalah, Cari kode ]]></b:skin> dan copy Kode CSS di bawah ini Tepat di atas ]]></b:skin>

#easy_zoom{width:600px;height:400px; border:5px solid #eee;background:#fff;color:#333;position:fixed;top:35px;left:50%;overflow:hidden;

-moz-box-shadow:0 0 10px #555;

-webkit-box-shadow:0 0 10px #555;

box-shadow:0 0 10px #555;

/* vertical and horizontal alignment used for preloader text */

line-height:400px;

text-align:center;

}

Jika sudah Simpan Tempalate.

Untuk penerapannya pada postingan Anda adalah ..???

pada saat anda sudah selesai mengoupload gambar pada postingan, pilih menu HTML untuk menambahkan effect pada Gambar yang akan di tampilkan,

Dan pada saat membuka menu HTML kode Anchor akan terlihat seperti di bawah ini :

<a href="http://3.bp.blogspot.com/-NpWKQU4ef_c/UPaOWUXkJYI/AAAAAAAAAXg/DA1Yp8GHDv4/s1600/Janji+Kampanye.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="226" src="http://3.bp.blogspot.com/-NpWKQU4ef_c/UPaOWUXkJYI/AAAAAAAAAXg/DA1Yp8GHDv4/s320/Janji+Kampanye.gif" width="320" /></a>

Nah untuk menambahkan Efek Tersebut tambahkan Class="zoom" seperti di bawah ini :

<a class="zoom" href="http://3.bp.blogspot.com/-NpWKQU4ef_c/UPaOWUXkJYI/AAAAAAAAAXg/DA1Yp8GHDv4/s1600/Janji+Kampanye.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="226" src="http://3.bp.blogspot.com/-NpWKQU4ef_c/UPaOWUXkJYI/AAAAAAAAAXg/DA1Yp8GHDv4/s320/Janji+Kampanye.gif" width="320" /></a>

Jika sudah Simpan atau publikasikan Postingan Anda Untuk melihat Hasilnya.(Semoga Bermanfaat)

D-Crow