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.
D E M O
D E M O
Jangan lupa untuk melakukan pengamanan template setelah Login ke Blogger. Bila belum tahu caranya kamu bisa lihat di sini !.
Keterangan/Catatan :
D E M O
D E M O
Jangan lupa untuk melakukan pengamanan template setelah Login ke Blogger. Bila belum tahu caranya kamu bisa lihat di sini !.
Langkah pembuatan JQuery Image Zoomer :
- Login ke Blogger.
- Lakukan pengamanan template.
- Simpan jQuery dan Javascript di bagian header di bawah tag <head>. Susunannya seperti berikut :
- 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!
<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>
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.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
