CARA MEMBUAT EFEK ZOOM PADA GAMBAR: jquery image magnify v1.1
Monday, January 24, 2011
0
comments
Adsense Content. recommended 336 X 300
Cara membuat efek zoom pada gambar dengan jQuery Image Magnify v1.1 mungkin merupakan suatu alternatif yang perlu anda coba. Cara ini sesungguhnya simple gan, namun sekali lagi kalau ingin scripnya berfungsi dengan baik maka anda harus melakukan penyimpanan script di google code atau free file hosting lainnya. Gak papa khan gan cape dikit....tapi hasilnya bisa bikin om puas...!!! Mengenai cara penyimpanannya bisa anda baca di sini.Efek zoomer ini dikembangkan oleh dynamicdrive.com dengan menggunkan jquery sehingga pembesan gambar akan terpisah dengan gambar asal. Anda bisa mengatur sendiri pembesar gambar sesuai keinginan anda. Sebelum kita melanjutkan silahkan lihat dulu demonya
Ok mari kita lanjutkan...Sebaiknya sediakan kopi dan pisang goreng dulu biar santai gan....Sudah...??? wwuuuudddss langsung kita ikuti jejaknya.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Maukkan cript dibawah ini setelah kode ]]></b:skin> dan Simpan Template
<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://blackkapuas.googlecode.com/files/jqmagnifier.js"></script>
<script type="text/javascript" src="http://blackkapuas.googlecode.com/files/magnifycur.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript" src="http://blackkapuas.googlecode.com/files/jqmagnifier.js"></script>
<script type="text/javascript" src="http://blackkapuas.googlecode.com/files/magnifycur.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
Langkah selanjutnya tinggal meletakkan javascript pada gambar yang ingin anda beri efek zoom. Caranya ketika anda ingin memposting artikel masuk ke Edit HTML lalu letakkan kode berikut ke dalamnya.
<img src="ocean.gif" class="magnify" style="width:200px; height:150px" />
Ganti tulisan berwarna biru dengan alamat gambar anda: contohnya <img src="http://1.bp.blogspot.com/_9trGHDygXF0/R2DT7SmFahI/AAAAAAAAADQ/-BxtKUQNemo/s320/3.jpg" class="magnify" ....." />, lalu ganti kode berwarna hijau dengan ukuran yang anda inginkan....yang warna merah biarkan saja, karena itu script penghubung dengan javascript yang telah anda tanam dalam template anda...(emang pohon pake tanam segala...heee :)
Catatan Penting
Jika script ini gak jalan alias ngadat, seperti yang saya bilang di atas, anda harus melakukan penyimpanan script sendiri....dan itu ane yakin akan lancar kembali....
- jquerymagnifier
- magnifycur (untuk Internet Explorer browser)
Setelah mengklik magnifycur pilih notepad dan simpan dengan nama di akhiri dengan kode .js
Download kode yang anda simpan tadi di file hosting anda...kalau belum tahu caranya silahkan baca di sini
Perhatikan kode yang di tanam dalam template anda tadi, seperti di bawah ini.
<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://blackkapuas.googlecode.com/files/jqmagnifier.js"></script>
<script type="text/javascript" src="http://blackkapuas.googlecode.com/files/magnifycur.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript" src="http://blackkapuas.googlecode.com/files/jqmagnifier.js"></script>
<script type="text/javascript" src="http://blackkapuas.googlecode.com/files/magnifycur.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
Silahkan ganti kode warna merah dengan kode yang terdapat di file hosting anda sendiri. Kode merah pertama untuk jquerymagnifier dan kode merah ke dua untuk magnifycur. Selnajutnya simpan template...untuk cara memberi efek zoom pada gambar, teknik sama dengan yang telah di terangkan sebelumnya. ok gan....selamat mencoba dan sukses selalu.
''keep spirits and do the best''
0 comments:
Post a Comment