Selamat datang ke BelajarBlogs...
Home » , » Membuat Efek Image Zoom Dengan Jquery

Membuat Efek Image Zoom Dengan Jquery


Seperti anda ketahui,banyak cara untuk membuat gambar yang terdapat di posting kita agar lebih menarik.Kali ini saya akan berikan satu lagi tips mengenai gambar di postingan, iaitu membuat efek image zoom. Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) dengan lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil dengan lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda boleh cuba klik gambar di blog saya, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Jika anda tertarik, di bawah ini akan saya berikan langkah-langkah untuk membuatnya :


Langkah 1

1. Login dulu ke blogger anda
2. Kemudian klik Design
3. Setelah itu klik Edit HTML
4. Lalu anda cari kode berikut ]]></b:skin>
5. Setelah jumpa masukkan kode CSS dibawah ini sebelum kode 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://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/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 2

1. Selepas itu anda perlu mencari </head>
2. Setelah jumpa masukkan kode dibawah ini dan letakkan diatas kode yang anda cari tadi.

<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>
<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

Yang terakhir Save Template anda. Selesai dah....

15 ulasan:

  1. wahhh!!!!!
    best2,,,
    menjadi lar,,hehehehe,,,tenkiuuu

    BalasPadam
  2. @Wasabi Basiermm saje je nak suruh datang kat blog awk.Pandai betul ye menipu.

    BalasPadam
  3. wah wah,, menjadi lah,, ni lah benda yg saya cari cari,, ehehe, thanks yee :)

    BalasPadam
  4. not working..
    http://hazissac.blogspot.com/

    BalasPadam
  5. berat nye nak loading gambar tu...
    ada cara tak nak bg laju sket loading?

    BalasPadam
  6. assalam...
    bole tny x, cena nak ilang kan zoom yg kedua?
    sbb blog sy jd dua effect bila tkan kat pix tuh..
    tataw cena nak ilang kan,.
    bole tolong x?

    BalasPadam
  7. Oh iya mas,ini kan membahas tentang bagaimana membuat efek zoom emiage dengan jquery,saya mau nanya.
    Bagaimana cara memodifikasi tampilan popular post ketika mouse mengarah ke popular post tersebut? terimakasih.

    Main-main di gubuk ane gan :
    www.triatma.us

    BalasPadam