Bagaimana Membuat Alat Zoom Pada Gambar Didalam Blog Anda.

Salam,
Ntah kenapa hari ini saya lebih suka bermain dengan peralatan gambar, semalam saya merangkak jauh dari satu laman ke satu laman. Lalu dalam rasa seronok menyelongkar segala isi perut setiap laman, Saya terjumpa sesuatu yang mungkin menarik minat anda, sebenarnya anda boleh jumpa cara yang sama di halaman-halaman yang lain, tetapi seperti apa yang telah saya katakan pada post saya yang sebelumnya, apa yang saya pelajari saya kongsikan dan saya olahkan mengikut bahasa melayu. Ini kerana bagi saya, ada sesetengah individu kurang fasih mengunakan bahasa asing, jadi disini saya terjemahkan mengikut cara saya dan bahasa saya. Dan ini amat menyenangkan hati saya, begitu juga bahasa yang saya gunakan, sebolehnya saya inginkan setiap posting saya mesra dengan Translator Gadget yang saya pasangkan dalam laman saya ini. Saya mahukan keadilan bagi setiap pelawat atau pengunjung laman saya. Dan harapan saya anda bergembira.
Nah, Apa yang saya ingin kongsikan kali ini mengenai gambar yang mana sejenis alat yang dipasang dapat membesarkan gambar yang anda muat naik kedalam laman anda dapat dibesar seperti kanta pembesar. (ZOOM).

Pada mula saya membaca tajuk utama, agak sukar bagi saya meneka bagaimana ianya berfungsi. Lalu saya
cuba ikuti langkah-langkah yang ditulis sebagaimana penulis asal alat JQZOOM ini. Berulang kali saya mencuba, pada tahap pertama dan kedua, saya gagal memahami cara dan langkah-langkah tersebut. Namun sesungguhnya saya rasa bersyukur setelah saya mencuba berulang kali, akhirnya apa yang saya pelajari berhasil saya lakukan. Untuk melihat bagaimana ianya berfungsi, anda boleh lihat bagaimana saya berjaya memasang alat tersebut. [SILA KLIK], untuk melihat fungsi alat tersebut.
Disini juga saya sediakan gambarannya.

Mari kita mencuba, bagaimana langkah tersebut.
Langkah pertama.
Seperti biasa, untuk bermain dengan css kod, anda perlu pergi ke blog Layout-->Edit HTML.
Dalam ruangan HTML text template, tekan key CTRL+F, untuk mencari perkataan </head>.
Seterusnya anda perlu salin kod dibawah ini. Dan anda perlu tampalkan diatas atau sebelum perkataan </head> tersebut.
Salin kod dibawah.

<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jqzoom.css" type="text/css" />
<script type="text/javascript">

$(function() {
var options =
{
zoomWidth: 275,
zoomHeight: 275
}
$(".jqzoom").jqzoom(options);

var options2 =
{
zoomWidth: 275,
zoomHeight: 275,
zoomType:'reverse'
}

$(".jqzoom2").jqzoom(options2);

});
</script>

Untuk saiz bagi ketinggian dan juga kelebaran, anda boleh menukar mengikut citarasa dan kesesuaian anda, Lihat tulisan yang berwarna merah diatas, itu adalah saiz lalai yang ditetapkan. terpulanglah kepada anda.
Setelah anda siap menampal dan mengubah saiz, sekarang anda perlu simpan, Klik Tab 'Save Template'.

Nota: Peralatan telah diaktifkan, cuma ada sedikit penambahan perlu dilakukan untuk ianya benar-benar berfungsi.

Pada mulanya saya begitu keliru tentang keadaan ini, namun segalanya terjawab selepas berulang kali mencubanya. Untuk menjelaskan keadaan seharusnya saya ceritakan bagaimana kekeliruan itu timbul. Apa yang perlu anda lakukan adalah, anda perlu muat naik gambar kemana-mana image hosting. Seperti anda juga biasa mengenai Picasaweb, photobucket, istockphoto dan lain-lain, tetapi saya lebih suka menggunakan google site. Menjadikan ianya sebagai store penyimpanan segala apa saja file saya, dan ianya juga adalah percuma. Dengan menggunakan google site, anda tidak hanya dapat menyimpan gambar, tetapi apa saja ffile untuk muat naik atau muat turun, dan ramai diantara kita tidak mengetahuinya.

Sekarang, muatkan naik gambar yang ingin anda pasangkan untuk alat zoom ini, sebenarnya cara ini lebih menyenangkan anda. Kerana teknik ini hanya berfungsi pada gambar yang tertentu sahaja, bukan untuk keseluruhan gamabr-gambar dilaman anda.

Setelah dimuat naik gambar yang dimaksudkan, salin url link gambar tersebut. contohnya http://photobucket/akaun-anda-gambar anda.jpg. Nah sekarang anda tampalkan dulu url link gambar anda. Anda boleh gunakan notepad untuk sementara.

Sekarang anda salin kod dibawah.

<a href="DIRECT_LINK_TO_THE_LARGER_IMAGE" class="jqzoom" title="IMAGE_TITLE"><img src="DIRECT_LINK_TO_THE_SMALLER_IMAGE"/></a>


Apa yang anda perlu lakukan seterusnya, pada tulisan berwarna merah DIRECT_LINK_TO_THE_LARGER_IMAGE
Anda perlu gantikan kedua-dua dengan url link gambar yang sama anda muat naik ke image hosting sebelumnya. Image Title yang bertulisan biru, anda gantikan tajuk gambar tersebut mengikut tajuk anda.

Nota: Nasihat saya, ada baiknya sekiranya kod ini dimasukkan selepas anda mengarang posting anda, tampalkan kod semasa anda meng'Edit pada post Edit HTML tab, dan mungkin juga anda boleh lakukan pada post compose template.

Ok, Selamat mencuba dan selamat berjaya.

Browser Support.

6+ | 2+ | 1.0 | 2+ | 9+ |

Project Author:
Renzi Marco from Mind Projects, presently working on the next release of jqzoom with thumbnail image switch.
R. Marco is an Italian Engineer skilled in php, CodeIgniter, javascript, JQuery, XML and SOAP... He is actually looking for a full-time job in a collaborative and innovative web team. Hire Him.