Image Magnify - Tutorial

Adakah anda pernah melihat kesan khas pada gambar yang terdapat dalam entri ini, Image Magnify - Test Mode

Bagi yang sudah mengikuti blog ini, aku tahu korang mesti tak sabar² hendak tahu kod untuk kesan itu kan,:). Dan untuk memenuhi janji, aku buat tutorial ini khas kepada semua. Diharapkan blog korang akan lebih menarik dengan kehadiran kesan khas ini.:)

Kalau anda masih baru dan rasa tidak faham sangat. Ini apa yang aku hendak tunjukkan.
PENTING: pastikan page untuk entri ini telah dibuka sepenuhnya, baru korang akan dapat lihat kesannya. So kena la tunggu sekejap bergantung kepada kelajuan internet korang.:)

Apabila sudah dibuka sepenuhnya, Cuba klik pada gambar di bawah..




Nampak bezanya berbanding gambar² biasa apabila anda klik kan.?

dan inilah tutorial yang anda tunggu²..:)


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

Untuk melihat contoh perbezaan skala,width, height, Sila klik gambar di bawah untuk melihat contohnya.

width=200, height=150, skala=2.5


width=150, height=110, skala=2


width=450, height=200, skala=0.5



Biasanya apabila anda sudah mencuba beberapa kali, anda kan tahu berapa nilai width, height, dan scale yang bersesuaian untuk blog anda..

-------------------------

Amacam, sudah menjadi belum kesan khas gambar ini pada blog anda.?
Aku tahu siapa yang sudah menjadi tu mesti tersenyum girang..ha3.

Kalau anda belum cuba lagi, baik anda cuba kerana trick ini jarang sangat aku jumpa kat internet. Dan korang pun jarang jumpa kan (entah² tak pernah jumpa.:).
So, jadilah antara blogger yang mempunyai trick yang unik berbanding orang lain.

Dan, apabila sudah mejadi..
Bukan masanya untuk simpan sorang² ye.
Bagitahu kawan² atau sesiapa sahaja yang ingin mengetahui.
Kerana ilmu yang ada untuk dikongsi, bukan disimpan.

Bukankah Sharing Is Caring..:)


Happy Blogging..:)

Suka entri ini.?