Cara Membuat Zoom Image Dengan jQuery

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/AVvXsEjKTV0KJIGyt_AlIRPAupcEamI4pUSZBD8IB7Fgi5QfyHma-2pSNYyZ3myXXEZlHplSWgS6K3fO2AoyBlEvj2iVc348MdFx0Zur5o2HOYm-CNmTHryPnsghDrYiQqumFzszjAoWzUvVGyk/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

Tweet