Sebelum saya menjelaskan lebih lanjut, silahkan baca kutipan berikut dari Dynamic Drive tentang jQuery Image Magnify v1.1:
jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original dimensions when the image is clicked on using this script.
Nha, sekarang mari kita langsung pada pokok permasalahan...
Berikut Cara Memasang jQuery Image Magnify v1.1:
1. Login ke akun Blogger anda
2. Pilh Layout > Edit HTML, lalu centang Expand Widget Template
3. Cari kode </body>, lalu paste kode berikut di atasnya:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/jim-jquery.magnifier.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Brough to you by: Tips Blogger Zacky (tipsbloggerzacky.blogspot.com)
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
* This notice MUST stay intact for legal use
***********************************************/
</script>
4. Klik Save Template.
Selanjuntnya, cara mengunakan jQuery Image Magnify v1.1:
1. Fungsi Standar
Dalam fungsi standar, kita harus menambahkan atribut class="magnify" ke dalam tag img.
Kodenya:
<img src"URL-GAMBAR" class="magnify">
Ganti URL-GAMBAR dengan url gambar anda.
Jika anda ingin menampilkan gambar yang akan di zoom dengan ukuran yang lebih kecil dari yang asilnya, maka tambahkan atribut style="width:50px; height:30px; border:none;" ke dalam tag img.
Keterangan:
- width:50px > menunjukkan lebar gambar dalam pixel, ganti nilai 50 sesuai keinginan.
- height:30px > menunjukkan tinggi gambar dalam pixel, ganti nilai 30 sesuai keinginan.
- border:none > menghilangkan border gambar
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" style="width:50px; height:30px; border:none;"/>
Contoh:
<img src="http://tipsbloggerzacky.googlecode.com/files/50000.jpg" class="magnify" style="width:250px; height:123px; border:none;"/>
Hasilnya:
Note: Jika anda tidak menggunakan atribut style="width:px; height:px; border:none;", maka perbesaran gambar akan didasarkan pada ukuran aslinya.
# Memodifikasi Fungsi Standar #
Untuk memodifikasi fungsi standar kta harus menambahkan beberapa atribut, yaitu:
- data-magnifyby="number" > berfungsi untuk menentukan jumlah perbesaran. Ganti number dengan jumlah perbesaran yang anda inginkan. Misalnya 1,2,3,4,5,... *Untuk perbesaran 3 kali tidak perlu ditulis karena sesuai dengan fungsi standar yang telah menentukan perbesaran sebanyak 3 kali.
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyby="2" style="width:250px; height:123px; border:none;"/>
- data-magnifyto="number" > berfungsi untuk menentukan perbesaran lebar gambar ke dalam ukuran pixel, sedangkan tinggi akan mengacu kepada jumlah perbesaran lebar tersebut. Ganti number dengan ukuran pixel yang anda inginkan (tidak perlu ditambah dengan px). *Untuk menggunakannya, anda harus menghilangkan atribut data-magnifyby="number".
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyto="500" style="width:250px; height:123px; border:none;"/>
- data-magnifyduration="number" > berfungsi untuk menentukan durasi perbesaran dari ukuran asli ke ukuran yang telah diperbesar. Ganti number dengan 500 untuk 0,5 detik, 2000 untuk detik. *Penulisan durasi dalam satuan milisecond. Untuk durasi 500 tidak perlu ditulis karena sesuai dengan fungsi standar yang telah menentukan durasi perbesaran selama 500 milisecond atau 0,5 detik.
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyby="2" data-magnifyduration="1000" style="width:250px; height:123px; border:none;"/>
Contoh:
<img src="http://tipsbloggerzacky.googlecode.com/files/SAVING.JPG" class="magnify" data-magnifyby="2" data-magnifyduration="1000" style="width:248px; height:320px; border:none;"/>
Haslinya:
2. Membuat Link Gambar Yang Akan Diperbesar
Untuk membuat link gambar, kita harus menambahkan atribut id="ID-GAMBAR" dan membuat tag linknya.
Penempatan kodenya:
<img id="ID-GAMBAR" src="URL-GAMBAR" class="magnify" data-magnifyby="4" style="width:200px; height:150px; border:none;"/>
<a href="#" rel="magnify[ID-GAMBAR]">NAMA-LINK</a>
Contoh:
<img id="baby" src="http://tipsbloggerzacky.googlecode.com/files/get%20to%20the%20choppa%21.jpg" class="magnify" data-magnifyby="2" style="width:250px; height:198px; border:none;"/> <br /><a href="#" rel="magnify[baby]">Klik aqyu donk...</a>
Hasilnya:
Klik aqyu donk...
3. Membuat Efek Zoom Gambar Pada Link Dropdown Menu
Kodenya:
<form>
<select id="imageselect">
<option>Final Fantasy VIII Images</option>
<option>Squall</option>
<option>Rinoa</option>
<option>Squall-Rinoa_1</option>
<option>Squall-Rinoa_2</option>
</select>
</form>
<img id="imagebox" src="http://tipsbloggerzacky.googlecode.com/files/Squall.jpg" class="magnify" data-magnifyby="2" style="width:300px;height:225px; border:none;" />
<script type="text/javascript">
var imagebox=document.getElementById("imagebox")
var imageselect=document.getElementById("imageselect")
var imagelist=["http://tipsbloggerzacky.googlecode.com/files/Squall.jpg", "http://tipsbloggerzacky.googlecode.com/files/Rinoa.jpg", "http://tipsbloggerzacky.googlecode.com/files/Squall-Rinoa_1.jpg", "http://tipsbloggerzacky.googlecode.com/files/Squall-Rinoa_2.jpg"]
imageselect.onchange=function(){
if (this.selectedIndex!=0){
imagebox.src=imagelist[this.selectedIndex-1]
jQuery(imagebox).imageMagnify({
magnifyby: 2
})
}
}
</script>
Keterangannya.... Ah,, nggak jadi aahh, cape' jelasin smuanya... Lagian dengan mencari tau sendiri keterangannya bisa lebih cepat nangkapnya, ya nggak?
Oya, ini hasil kode yang tadi:
{ 0 comments... read them below or add one }
Post a Comment