Excalibur
Info

Selamat Datang

Selamat Datang Di Blog Roy Lichtenstein- Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Social Icons

xtreme5-roylichtenstein.blogspot.com

JQuery Image Zoomer: Panduan BloGGeR JQuery

Image Zoomer biasa disebut juga sebagai zoom effects, magic zoom, image zoom, magic magnify dan masih banyak istilah yang lain. JQuery.1.3.2.js sanggup melakukan ini dengan sangat sempurna. Inilah salah satu keandalan JQuery.1.3.2.js. Ya..., apapun bisa dilakukan dengannya. Sebuah effect zoom yang sangat fantastic dan mampu memberikan efek zoom secara maksimal dapat dilakukan hanya dengan menambahkan sedikit javascript. Copy Javascript dan Link jQuery.1.3.2.min.js kemudian simpan di bawah tag <head> atau tepatnya di bawah tag <title> .....</title> yang posisinya di bagian teratas template (Edit HTML). Atau kamu bisa juga menyimpannya di bawah KODE ]]></b:skin>. Setelah dilakukan penyimpanan secara sempurna, gunakan xHTML di bagian body atau di ruang posting. Kamu bisa melihat demonya untuk melihat seberapa kehebatan jQuery Image Zoomer ini.


Langkah pembuatan JQuery Image Zoomer :
  1. Login ke Blogger.
  2. Lakukan pengamanan template.
  3. Simpan jQuery dan Javascript di bagian header di bawah tag <head>. Susunannya seperti berikut :
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://gubhugreyot-image-zoomer.googlecode.com/files/GR_jQuery_imagezoomer.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $('img#bgsGR1').addpowerzoom({magnifiersize:[500,500]})
    $('img#bgsGR2').addpowerzoom({magnifiersize:[150,150]})
    $('img.bgsGR3').addpowerzoom({powerrange:[2,7]})
    $('img.bgsGR4').addpowerzoom({powerrange:[6,30]})
    })
    </script>
  5. Agar lebih jelas cara menyimpan javascript maupun kode CSS dan xHTML, silahkan buka terlebih dahulu panduan tentang cara backup template, cara simpan kode, dan cara cepat cari kode html di Special Tutorials pada deret menu vertical sebelah kiri!

KODE CSS Image Zoomer :
Simpan di atas KODE ]]></b:skin>
<style type="text/css">
#bgsGRbox1, #bgsGRbox2, #bgsGRbox3, #bgsGRbox4{
        padding
:12px;
        background
:#666;
        margin
:20px;
        border
:4px solid #aaa;
       
float:left;
        border
-radius:8px;
        box
-shadow:0 0 10px #000;
}
#bgsGRbox2{float:right;}
#bgsGRbox3{float:right;}
#bgsGRbox4{float:left;}
#bgsGR1{width:300px;height:auto;border:0;}
#bgsGR2{width:250px;height:auto;border:0;}
.bgsGR3{width:200px;height:auto;border:0;}
.bgsGR4{width:250px;height:auto;border:0;}
</style>
xHTML - Image Zoomer :
<div id="bgsGRbox1">
<img id="bgsGR1" src="https://sites.google.com/site/gubhugreyotprojects/jquery/image-zoomer/images/gadisku-01.jpg">
</div>
<div id="bgsGRbox2">
<img id="bgsGR2" src="https://sites.google.com/site/gubhugreyotprojects/jquery/image-zoomer/images/gadisku-02.jpg">
</div>
<div id="bgsGRbox3">
<img class="bgsGR3" src="https://sites.google.com/site/gubhugreyotprojects/jquery/image-zoomer/images/gadisku-03.jpg">
</div>
<div id="bgsGRbox4">
<img class="bgsGR4" src="https://sites.google.com/site/gubhugreyotprojects/jquery/image-zoomer/images/gadisku-04.jpg">
</div>

Keterangan/Catatan :
  • Gunakan gambar/image dengan ukuran besar untuk memperoleh effek zoom dengan kualitas prima.
  • Ada 4 model ukuran gambar dan efek zoom yang dapat dirubah di bagian KODE CSS dan javascript ke-2.
  • Gerakkan scroller pada mouse untuk mendapatkan efek zoom yang bervariasi.

Tidak ada komentar:

Posting Komentar

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous