On-Click Image Zoom Using jQuery

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(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;
}

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 :)
Bagikan ke Teman ›
om-dayz lintasme
om-dayz facebook share
om-dayz Tweet Button
om-dayz digg Submitter

13 komentar Untuk On-Click Image Zoom Using jQuery

  1. hmm bisa dicoba nih,makasih share nya
    btw senggol malam disini,
    senggol balik yah :D

    BalasHapus
  2. @Naughtyric

    silahkan omz :D
    ke TeKaPe ane :D

    BalasHapus
  3. @TheDexgan
    hhehhe :-bd
    @Oncom,,, zzzzzzzzzz

    BalasHapus
  4. tutorialnya emang berhasil ..
    tapi lama loadingnya :(

    BalasHapus
  5. @Syndicate OS
    loading lama bukan krn script diatas masbro,, tpi size dari file gambar anda :)

    BalasHapus
  6. wahhh thanks banget om dayz dah di shaerr!! :D

    BalasHapus
  7. punya ane diklik langsung ngilang :D
    ahhaha

    BalasHapus
  8. mantap om-dayz, thanks ya :)

    BalasHapus

Follow Me On Twitter Facebook Fanspage Circle Me On Google Plus Subscribe to RSS Feed