Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image Magnify - Test Mode
Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan.
Berikut adalah tutorial untuk image magnify ini.
1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )
Jika masih tidak jelas lagi, klik sini.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">
/***********************************************
* Kod telah di'edit' oleh unwanted
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
* -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
***********************************************/
</script>
2) Apabila sudah letak code tu, save sahaja seperti biasa..
Siap untuk bahagian letakkan kod asas..
Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.)
<img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />
Keterangan :
- url gambar disini : Masukkan url gambar.
- 2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5
- 200 : Masukkan lebar gambar yang anda rasakan bersesuaian
- 150 : Masukkan tinggi gambar yang anda rasakan bersesuaian
0 komentar:
Posting Komentar