On-Click Image Zoom Using jQuery

2:44 AM / Unknown / Blogging, JavaScript, Trick, Tutorial,
On-Click Image Zoom Using jQuery
On-Click Image Zoom Using jQuery - Membuat postingan di blogger dengan menggunakan gambar, tentunya tidak semua gambar yang diposting tidak sesuai dengan apa yang kita inginkan, kadang kebesaran, kadang kekecilan, pengennya sih nampilin size aslinya :D

disini aku mau memberikan jQuery yang bisa memberikan efek zoom untuk gambar postingan kita, ketika gambar itu di klik.. lihat demonya dibawah!

LIVE PREVIEW

Klik Salah Satu Gambar Dalam Postingan


Berikut Tata Cara Pemasangan ke Blogspot:

Langkah Pertama

Masukkan kode dibawah diatas kode ]]></b:skin>
div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrMITasJoWTpQByW7m_EOFE9CMyA_cxvGJzet15scAwqH01B5_6v9hNIEQ79IKAALkzz711W9XyxwiN5UlWVGIbubDfpn7-Fueu9UCuhoAWc26lHUhHfMWNFsr-kh1E-FStM3GOIo8t8Q/s1600/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

Langkah kedua

Masukkan Javascript ini di diatas kode </head>
<script src='http://lorddayz.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lorddayz.googlecode.com/files/imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>
 Happy Blogging :)
On-Click Image Zoom Using jQuery Rating: 4.5 Diposkan Oleh: Unknown
Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe