Monday, 16 April 2012

JQuery Zoomer Picture (Script buat perbesar gambar)

Okay Lets Begin! haha. Pertama tama mari kita panjatkan puja dan puji syukur kita kepada Tuhan YME atas kehadiratnya kita dapat berkumpul dan membaca Artikel kecil ini hehe.

Tutorial kali ini juga lebih simple di bandingkan dengan tutorial yang lama tadi itu. perbedaannya adalah dimana tutorial sebelumnya ketika mouse di arahkan ke gambar zoom maka keluar hasil zoomnya di sebelah gambarnya. Sedangkan tutorial kali ini membuat gambar dengan efek zoom dengan kata lain ketika sobat menyorotkan mouse sobat ke gambar (hover), maka mouse berubah menjadi kaca pembesar.

Contohnya Seperti ini


Arahkan Cursor sobat kegambar! Putar Scroll Mouse juga!
Sumber : farixsantips.blogspot.com

Apa yang terjadi? Melihat Efeknya? Sangat indah bukan efeknya? Menurut saya sangat indah dan bisa membantu melihat gambar yang kurang jelas hehe. Berikut cara membuatnya :
  1. Buka Blogger.com dengan Password dan ID
  2. Masuk ke Dashboard → Layout/Design → Edit HTML
  3. Letakan kode berikut diatasnya kode <head> :
  4. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
    <script src='https://sites.google.com/site/farixsantips/scripts/imgzoomer.js' type='text/javascript'>
    </script>
    <script type='text/javascript'>
    jQuery(document).ready(function($){
    $('#zoom').addpowerzoom()
    })
    </script>
  5. Kemudian Save!
  6. Selanjutnya sobat hanya perlu membuat kode gambar dan di tambahkan dengan ID="zoom", Contoh. Letakan kode berikut saat sobat ingin posting :
  7. <img id="zoom" src="https://lh3.googleusercontent.com/-ZnGtYlT_teo/TY3vcGAV7II/AAAAAAAAAfc/9JxDKxmvnYQ/s1600/parissmall.jpg" />
    Kode bercetakan tebal adalah kode URL gambar yang bisa di ganti terserah kemauan sobat.




Artikel Terkait

JQuery Zoomer Picture (Script buat perbesar gambar)
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email