Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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.

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 :

  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.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «

5 komentar:

  1. membinggungkan...................

    BalasHapus
  2. cara menghilangkan tulisan ghubug reyotnya gimana ya om?

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

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

    BalasHapus

 
GR | Edited by | gubhug reyot