Cara Membuat Zoom Image Dengan jQuery

20 views

alhadi.org – Cara Membuat Zoom Image Dengan jQuery, Cara Membuat Zoom Image Dengan jQuery

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 ]]>

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(http://4.bp.blogspot.com/-G1qrX_PGmhs/TiQiQ2czjNI/AAAAAAAAALU/YJkmJS5yww8/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
 

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

Script by : om-dayz.blogspot.com
Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Zoom Image Dengan jQuery, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Zoom Image Dengan jQuery berguna untuk anda.