Image Magnify

Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah² yang melihat gambar yang lain.

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


53 comments:

  1. salam..dah aku dah letak kat blog aku benda ni sumer..dan berjaya pun,,nasib baik la ada hang..tak kedekut ilmu..bagus bagus..
    lawat dan komen la skit syokNYAdownload.blogspot.com ..mentang2 blog baru.takde sapa komen.,heehe..noob aku..ni..tolong juri skit yer..thanks cikgu ku.

    ReplyDelete
  2. salam...

    Saya sudah cuba trick besarkan pic ni dan berjaya.... sungguh senang rupanyer untuk tutorial ni dan saya mengucapkan jutaan terima kasih diatas tutorial yg sgt berguna ini... bila nak buat trick pic yg bersusun tu pula???jemput la ke blos saya ye.... terima kasih skali lg... moga2 usaha anda diberkati....

    sharing is caring

    ReplyDelete
  3. Macam mana nak susun gambar sebelah menyebelah, then magnify?

    ReplyDelete
  4. kalau gambar tu gamebar yang diupload nak tulis apa kat bahagian image url?

    ReplyDelete
  5. maaf ya.. macam mana nak buat gambar tu bila di magnify tak pecah2 ?

    ReplyDelete
  6. thank ya....banyak membantu :P

    ReplyDelete
  7. xberjaya pun...huhu
    cmna nak letak url gmbar tu?
    kalo kita copy image location tu sm x?

    ReplyDelete
  8. Terima kasih tuan blog . Tabik spring ! :D

    ReplyDelete
  9. Bagi yang masih tidak jelas bagaiman hendak mendapatkan url gambar, sila rujuk tutorial ini.
    http://tutorialuntukblog.blogspot.com/2010/04/cara-dapatkan-url-gambar.html

    ReplyDelete
  10. hello yunk...ash grab u py banner bubuh kt belog i...if have free tyme..come visit me yaaa thanks...

    ReplyDelete
  11. salam..ziarah lah blog sy yer http://tingkaphijau,blogspot.com

    ReplyDelete
  12. yeeeyyyy...dah try..jadik jugak..huhuhuhu

    ReplyDelete
  13. ermm..sedih ! xlh nk bt pn ! dh bnyk kali dh try !
    sob..sobb

    ReplyDelete
  14. okey..yg ni gunakan url gmbar..tapi kalu nk yg upload dri folder cmne plak?

    ReplyDelete
  15. langkah 2 nak copy paste di mana. kurang jelas

    ReplyDelete
  16. MINTAK TOLONG! KOD YG KEDUA TU NAK PASTE KAT MANE??

    ReplyDelete
  17. ty, mau sampai sepetang jugak lah berfikir how to do this... alhamdulillah. im just confius dengan url(magnify.cur).

    first mistake because i just copy and put url photo from photobucket for replace. rupanya yang bawah tu url(magnify.cur) pun kena isi kan jugak. but another url.

    kena tgk awak nyer inspect element baru faham. anyway. thanks alots.~

    ReplyDelete
  18. thanks...tp boleh x tunjuk camne nak wat header blog sendri..

    ReplyDelete
  19. second code nak kena paste mcm mane..??
    kene paste dekat mane..??
    tiap tiap2 entry yang kite nak letak gambar ke..??
    tolong..tolong..

    ReplyDelete
  20. tengkiu ngan tutor ni..:)
    2nd code nak apply cane ea??

    ReplyDelete
  21. tenkiu , bagus tutorial ni, dah isi dah kat blog aku

    ReplyDelete
  22. code kedua nak paste dekat mana eh ?

    ReplyDelete
  23. hye...
    nk tny..
    jd 2 jd tp ley ta law kite nk wat owg len xley copy gmbr??
    n code kdua 2post ktne?

    ReplyDelete
  24. salam

    langkah kedua tu nk paste katne?
    hukhuk

    ReplyDelete
  25. da jadi

    hehehe hahahahoyayaya

    ReplyDelete
  26. XBOLEH BUAT!!!2nd link ltak kat mana??

    ReplyDelete
  27. Assalam....Terima kasih...

    Yana dah cuba menjadi lah hehehe...

    Boleh tgk kat link ini...heheheh happy nye...Tq

    Churp Churp The Cutest Thing Contest

    ReplyDelete
  28. cam ne nk wt energy saver?tq..

    ReplyDelete
  29. tak faham lah . saya sudah cuba tapi tak ada perubahan . remain the same . haizz . macam mana nak buat yaa ?

    ReplyDelete
  30. katne nak letak link n0 2 neyh?abes sume org tanye,tapi tader jwpan un [konpius]

    ReplyDelete
  31. kat mana nak letak link num 2 tu??????? tlg la bg jwpnnye. adehh

    ReplyDelete
  32. kat mana nak letak code no2????pls....i dah letak banner u kat blog i...tq anywiz...rajin2 jenguk la kat blog i n pls komen ler....

    ReplyDelete
  33. best gile tuto kat sini. loveyahh :)

    ReplyDelete
  34. smart lorh. cm na jual beg gucci plak..
    beb, kalu letak menda neh x lembab ke blog kita nanti??

    ReplyDelete
  35. benda ni hanya yang kita letak dalam gadjet jewww..lau ajen wat bnyak gadjet..bkeh la nak wat bnda ni smua kpda gmbar anda..hehe,,:-)..apepom..keep sharing

    ReplyDelete
  36. yeahhh mjadi jgak akhir nyer... hhuhu

    ReplyDelete
  37. Tak faham laaaaaa.. yang utk letak url gambar tu letak kt new

    ReplyDelete
  38. nak tanye code ke-2 nak letak dekat mana? nak letak kat semua gambar ke?

    ReplyDelete
  39. code ke 2 to, nk letak kat manaee ye hlp help...

    ReplyDelete
  40. letak kode no.2 berikut ini d simpan dmn ?


    img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; "

    ReplyDelete
  41. thank you .. thank you .. thank you !! jom kunjungi d blog sya http://www.ryanharveyx.blogspot.com . n jgn lupa follow :)

    ReplyDelete
  42. thankz banyak2 sbb dah banyak tolong saye editkan blog saye ni

    ReplyDelete