Senin, 01 Juli 2013

Jquiry Image Zoomer


I
mage 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 atau tepatnya di bawah tag yang posisinya di bagian teratas template (Edit HTML). Atau kamu bisa juga menyimpannya di bawah KODE 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 :
  • Login ke Blogger.
  • Lakukan pengamanan template.
  • Simpan jQuery dan Javascript di bagian header di bawah tag<head> Susunannya seperti berikut :

    • Kode jQuery dan Javascript

    <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 :

KODE CSS Image Zoomer

<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 :

Kode 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.

3 Comment:

  1. lilik syumantiy01/07/13, 09.32

    hahahahaha.... kejebak sama yg di lihat bang.
    makasih ilmunya bang. langsung di pake.

    BalasHapus
  2. Hans rafli01/07/13, 09.33

    wah hebat pak bos, tapi sedikit ada gangguan di atas navbar niku pripon carane ngicalaken pak bos?..
    monggo dipon sukani pencerahan njeh suwon.

    BalasHapus
  3. efa10/09/14, 00.29

    di cancel mawon teman

    BalasHapus