mas template

Membuat Efek Image Zoom dengan Jquery

jquery zoom image
Seperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu 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) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :
  1. Login dulu ke blogger anda
  2. Kemudian klik Rancangan 
  3. Setelah itu klik Edit HTML
  4. Lalu anda cari kode berikut ]]></b:skin>
  5. Setelah ketemu 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;
    }
  6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.
  7. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>
    <script type="text/javascript">
    jQuery(document.body).imageZoom();
    </script>
  8. Yang terakhir Save Template anda. Selesai dah....
Catatan :
Sekedar catatan, sebaiknya anda simpan kode HTML imagezoom pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada teman yang nyoba ternyata nggak bisa jalan scriptnya. Download scriptnya di sini. Untuk mengetahui bagaimana cara menyimpan file di penyimpanan online (google code) silahkan baca di sini.

Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

37 comments:

  1. ora mudeng mas... kenapa jadi disini mas???

    ReplyDelete
    Replies
  2. @Mas Fakhrial:
    Itu untuk template berbeda-beda lho mas, hati2 jika menempatkan kode HTML bisa rusak semua templatenya. Kalo tetep nggak bisa jangan dipaksa nanti malah bikin berat loading blog

    ReplyDelete
  3. Its Not Work!! T.T, gan tolongin ane sapaya bisa jalan :D. saya beneran pengen bikin gambar dipostingan ku bisa di zoom. tyvm

    ReplyDelete
  4. @MyAnimeGirls:
    PErhatikan kode script yg harus diletakkan diatas /head itu sudah saya rubah.
    Kalo tetep nggak bisa coba perhatikan catatan yang ada di bawahnya.
    Makasih udah mampir

    ReplyDelete
  5. weewww...udah jalan gan!! ^^ makasih bgt. oya...klo lagi ada waktu buat tutor bikin slide kayak di web ini ya (http://www.bloggertemp.com/)..tpi versi vertikalny :D, tyvm gan!

    ReplyDelete
  6. Mas, cuma ngefek sama gambar yg diupload lewat blogspot langsung, yg saya upload lewat luar seperti photobucket gak ngefek? Mohon pencerahannya.. Terima Kasih..

    ReplyDelete
  7. mas gimana caraxa..bikin tulisan yg muncul ketika mengklik gambar...seperti gambar jQuery di pojok kiri itu mas?

    ReplyDelete
  8. @Yuda Seller:
    Efek zoom dengan menggunakan jQuery ini hanya berlaku pada gambar yang disimpan di blogger dan google site

    @Anonymous :
    Itu script iklan dari ISM (Image Space Media)
    anda harus daftar dulu disana untuk memunculkan iklan yang diletakkan di setiap gambar yang ada di postingan

    ReplyDelete
  9. mas..agar zoomnya lebih di perbesar seperti ukuran aslinya bagaimana..trims

    ReplyDelete
  10. Wahh.. thanks gan... tapi ga work eumm.. :( mungkin karena templatenya ga support.. tapi makasih wat infonya..

    ReplyDelete
  11. sob, saya baru pake templatenya, coba liat ya apa sudah benar cara memasangnya

    ReplyDelete
  12. @Rudy Hartono:
    Sudah bener mas, udah lihai ni keknya ya....

    Mestinya komentarnya diartikel template itu, biar org lain juga bisa liat ... heheheheh

    ReplyDelete
  13. tapi mas, nama judul blog saya (Blog Rudy Hartono) kok jadi menurun / terpenggal ya, gak mendatar, caranya supaya gak turun gimana mas? cari kodenya yang mana?

    ReplyDelete
  14. @:
    Itu karena banner yg saya pasang di header ukurannya panjang mas. Jika Anda ingin bannernya diperpendek cari kode berikut di Edit HTML :
    #header{float:left;width:220px;border:0 solid #dcd9d9;text-align:left;color:#333;margin:0}
    #header2{float:right;width:728px;margin-right:10px;text-align:left;color:#555}

    Rubah width:220px menjadi 440px kemudian rubah juga lebar header 2 dari 728px menjadi 468px

    ReplyDelete
  15. trims ilmunya .. indah nya berbagi salam ya sobat bloger

    ReplyDelete
  16. Mas, kalau dimasukkin ke html web gimana?
    Kn nggak ad kode ]]> di html coding saya
    Jd harus diletakkan dimana mas?

    ReplyDelete
  17. wah mantap mas bro tutorialnya, thanks

    ReplyDelete
  18. makasih gam, mas kholis makin manstab

    ReplyDelete
  19. sayang kode scripnya sudah tidak bisa di download ulang n sudah tidak ada mas..

    ReplyDelete
  20. Kren Boz, kunjungi juga t4 ane ya, dan bergabung dengan ane, sapapun itu yang mau bergabung atau mengunjui kami, dan kami pun akan melakukan timbal balik, dan jangan lupa like :)
    Salam kenal, baik untuk admin ataupun pelanggan setia blog ini "pengunjung"

    ReplyDelete
  21. gan trimakasih buat tutorialnya scriptnya berkerja debgan baik,
    thanks ya gan visit back

    ReplyDelete
  22. thanks for your tutorials above, it's working. thanks a lot, please visit abck

    ReplyDelete
  23. Wew script nya bisa di-download juga ternyata! Makasih ya mas.. :)

    ReplyDelete
  24. kalo dipasang di web gimana gan???
    kunjungi web saya ya...www.atributpaskibra.com
    tks

    ReplyDelete
  25. maksh gan infonya kujug balik ya

    http://new-movie22.web.id

    ReplyDelete
  26. What a god article ! i already learned in your article, Thanks very much.
    Please visit :

    Baju Bola
    BBM For Android

    ReplyDelete
  27. wahh mks ilmunya membuat efek image tsb.. bagus banget gan.. sukses selalu Si Tukang Tidur Sukses Bisnis Online

    ReplyDelete
  28. trima kasih byk tutornya mas..sukses selalu

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger