Xivanki Share !!: Cara Membuat Zoom Image Dengan jQuery

Cara Membuat Zoom Image Dengan jQuery - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Zoom Image Dengan jQuery !! Semoga tulisan dengan kategori Tips Blogging dan internet !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Zoom Image Dengan jQuery ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Cara Membuat Zoom Image Dengan jQuery - Efek Zoom Image ini berguna untuk postingan image sobat. Terkadang ketika membuat postingan  menggunakan gambar,  tidak semua gambar yang diposting sesuai dengan apa yang kita inginkan, kadang kebesaran, kadang kekecilan, pengennya sih nampilin size aslinya.

Untuk itu saya share nih sob, ada sebuah script yang cukup bagus untuk memberikan efek zoom image pada postingan blog sobat. Script ini memberikan jQuery yang bisa memberikan efek zoom untuk gambar postingan kita, ketika gambar itu di klik.

Kalau sobat tertarik ingin mencobanya, silahkan ambil script dibawah ini :

Taruk script ini diatas ]]></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/AVvXsEhDQFG4H220O9wPI4wwZJyNNPYCqfb_iJLz1ioGjXVQXuAv5P-9Co9m1aQ754syZHFJmENI_gIFH52rwqOZmAGzvCCz0bOwY8bXcK0kAB050qkcfc1VPx37ZaZx-FfhXXtID7R7um2OaJk/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;
}

Kemudian masukkan lagi script ini di atas </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>

Okey, cukup sekian sob postingan kali ini, semoga Bermanfaat.

Script by : om-dayz.blogspot.com