gravatar

Image Magnify

by shuko




Pastinya pengunjung blog ini tidak perasan bahawa semua gambar-gambar yang telah aku post di dalam blog ini telah dimagnify. Apakah itu image magnify?


Haa..aku pun tak pandai sangat nak terangkan. Cuba klik gambar di atas untuk lebih pemahaman. Nampak lebih coolkan? Berbeza dari gambar-gambar yang anda klik di dalam blog lain. Pastinya anda ingin mencubanya di dalam blog anda sendiri.

Jadi, di bawah ini aku sediakan tutorial untuk korang semua.

1) Copy kod di bawah dan letakkan di HTML/javascript dalam blog anda. Caranya masuk dalam (Dashboard > Layout > Page element > Add a gadget > HTML/javascript ) dan pastekan kod di bawah ini di dalamnya.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>

<script src="%3Cbr%3Ehttp://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></i>




Lepas tu, savekan. Dan anda bersedia untuk step yang ke-2. Kod di atas hanya perlu buat sekali sahaja. Ia merupakan kod asas.



2) Kemudian, anda sampai bahagian yang 'tricky' sedikit. Kod di bawah ini adalah untuk magnifykan gambar di dalam post. Anda copy kod di bawah dan paste bersama url gambar yang anda hendak post di dalam blog. Pastekan kod di bawah ini bersama url gambar anda tadi di dalam 'Edit HTML' bukan di dalam 'Compose'. Ingat!!!


<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 di sini. Url gambar mestilah terdapat di dalam laman web. Kalau nak masukkan gambar yang terdapat di dalam pc anda, upload dulu gambar yang anda hendak post di dalam edit post & copy url gambar tersebut. Caranya, right click gambar tersebut & klik Copy image Url. Kemudian, remove gambar tersebut dari edit post dan pastekan url gambar yang anda copy tersebut kat url gambar disini di dalam kod di atas.


2: Skala pembesaran. Bergantung pada width dan height. Nilai yang lebih besar dari 1 akan membesarkan gambar, nilai yang kurang dari 1 akan mengecilkan gambar, contoh 0.5

200: Masukkan lebar gambar yang anda rasakan bersesuaian.

150: Masukkan tinggi  gambar yang anda rasakan bersesuaian.



Contoh yang aku buat untuk gambar di atas:


<img src="http://www.kartunisubi.com/images/kartun-budak-hostel.jpg" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />



Aku cuma ubah skala pembesaran sahaja untuk gambar di atas. Anda cubalah untuk tentukan skala pembesarannya. Biasa yang aku guna adalah 1.5 dan 2. Tutorial ini aku ambil dari unwanted86. Kredit untuk dia kerana sudi berkongsi ilmu ini.



p/s Jangan lupa tinggalkan komen korang kalau dah berjaya ok. Klik Subscribe by email kat bawah kalau korang menggunakan google account. Ini memudahkan korang tahu yang aku dah reply komen korang melalui email.








Jika anda suka akan entri ini, sila klik Facebook Like Button di bawah :

gravatar

menarik jgk script nih..nnt nak try juge!

gravatar

try la..tapi aku buat ni pakai google chrome..mozilla aku try xdpt..ko try je k..klau pakai mozilla xdpt..cube buat kt google chrome k..

gravatar

siyes dowh // aq ta pam gilew