TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Membuat Efek Zoom Gambar Dengan jQuery Image Magnify v1.1

Original by IFX Adrian | 11 Desember 2009 14 Comments

Selamat malam semuanya! Kali ini saya akan menjelaskan tips yang ada hubungannya dengan image effects. Dengan mengunakan jQuery Image Magnify v1.1 yang di update tanggal 14 November 2009 dan dipublikasikan oleh Dynamic Drive ini, kita bisa membuat perbesaran gambar sebanyak yang kita inginkan. Berbeda dengan Facebox yang hanya bisa menampilkan gambar tanpa perbesaran. Sebagai contoh, coba anda klik gambar Taliban George Bush. Gimana hasilnya? Jauh lebih besar dari ukuran yang tampak sebelumnya kan? Hmm,, tips ini akan sangat berguna bagi anda yang memiliki blog dengan tema galeri foto karena bisa memberi kesan elegan dan membuatnya tampak lebih profesional. Mau tau caranya?

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:
jQuery Image Magnify_1


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:
jQuery Image Magnify_2


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:
jQuery Image Magnify_3

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:






Nha, itulah artikel SINGKAT tentang jQuery Image Magnify v1.1. Bagi anda yang memiliki keraguan, silahkan request disini untuk diadakannya sesi tanya jawab tentang jQuery Image Magnify v1.1.

Ok, untuk sementara silahkan di coba dulu. Saya mau tidur dulu nih, hehehe...

Jangan lupa kasih komentar ya...

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

14 komentar:

heru 13 Desember 2009 pukul 21.00  

wow keren sobat, thanks ya sudah mau berbagi ilmu, salam sukses

Zacky Adrishayuni 13 Desember 2009 pukul 23.29  

yohaa om...
ne ane lagi nyiapin tips yang baru, masih tentang image effect..
tunggu ya om...

Doctor B 7 Januari 2010 pukul 22.33  

om... pemasangan kode ..img src="URL-GAMBAR" class="magnify" style="width:50px; height:30px; border:none;....

dimana? di tiap postingan yang ada imagenya ya?
ane tadi paste'in di postingna na.. ane edit post, liat htmlnya lalu tambahin kode itu.
tapi hasilnya malah ngelink ke url gambar... efek zoom awalnya bisa jalan, tapi akhirnya ngelink ke url gambar...mohon penjelasanya

Zacky Adrishayuni 7 Januari 2010 pukul 23.45  

Kode gambar misalnya:

<img src="http://tipsbloggerzacky.googlecode.com/files/get%20to%20the%20choppa%21.jpg" class="magnify" data-magnifyby="2" style="width:250px; height:198px; border:none;"/>

pasangnya ya di tempat gambar mau ditampilin. Kalo mau bikin link, kita harus nambahin id pada kode gambar tu, sehingga jadi:

<img id="ID-GAMBAR" src="http://tipsbloggerzacky.googlecode.com/files/get%20to%20the%20choppa%21.jpg" class="magnify" data-magnifyby="4" style="width:200px; height:150px; border:none;"/>

dan kode linknya bikin seperti ini:

<a href="#" rel="magnify[ID-GAMBAR]">NAMA-LINK</a>

Naruh link nya gak musti di bawah gambar, yang penting satu halaman. Ingat, ID GAMBAR gak sama dgn URL GAMBAR.. ID-GAMBAR berfungsi untuk nama yang akan dipanggil untuk di zoom. Mungkin karena ini lupa jadi ngelink ke URL GAMBAR...

Kode2 yang ditaruh di atas kode <body> tu musti ada karena semua fungsi berjalan sesuai dgn script yang ditanam tu. Ini yang paling penting.

karlz 28 Februari 2010 pukul 21.55  

sob klo nampilin hanya d image posting gmn sob.. blz d blog q y sob.. thx..

karlz 1 Maret 2010 pukul 17.45  

sob q sisipkan di posting kok ga ngefek y.. mohon petunjuk sob.. blz d blog q lg y.. ;D

coba klik gambar d posting.. class="magnify" q sisipkan d sama seperti efek drop shadow.. tp kok ga ngefek

IFX Adrian 1 Maret 2010 pukul 19.25  

Pastikan kode berikut kamu letakkan di atas kode <body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/>
<script type="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/jim-jquery.magnifier.js"/>

Pas mau posting, tambahin atribut class="magnify" ke dalam kode gambar, misal:

<img class="magnify" src="url-gambar" border="0"/>

Kalo kedua langkah tersebut udah dilakukan, maka sangat kecil kemungkinan untuk gagal.

Anonim 6 Maret 2010 pukul 09.49  

code (magnify.cur) mau letak dimana yer...t.kasih

dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
mgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

IFX Adrian 6 Maret 2010 pukul 20.28  

@Anonim: Hmm, kayaknya kamu ambil script sendiri dari Dynamic Drive ya?

Pertama, kamu download dulu magnify.cur lalu upload ke hostingan kamu sendiri.
Jika sudah, buka file jquery.magnifier.js, cari kode cursorcss: 'url(magnify.cur)
ganti kode tersebut dengan cursorcss: 'url(http://www.hostinganlo.com/magnify.cur)

Lain kali kalo mau nanya, jangan malu ninggalin nama dan email / url...

Semoga berhasil...

vicky 3 Juni 2011 pukul 08.28  

bagus artikelnya , mantaaa.pp

Unknown 16 Juli 2011 pukul 14.04  

Nih, ada tambahan untuk efek gambar ==> http://www.deezed.tk/2011/06/transisi-keren-dan-unik-pada-gambar-di.html

CarayaFrenzy 25 Juli 2011 pukul 17.21  

keren gan, prepare utk dicoba :p

Anonim 19 April 2012 pukul 21.06  

mantab sob artikelnya

Sigodang Pos 10 Juni 2012 pukul 02.09  

Terimakasih buat tutorialnya Gan, walaupun agak pusing juga. soalnya kurang paham html.

Posting Komentar