Kali ini membuat zoom gambar lagi,Sama seperti posting zoom image sebelumnya tapi yang sebelumnya onmouseover zoom image, kali on klik zoom image, Skala gambar otomatis akan membesar jika kita klik gambar,zoom ini juga menggunakan efek bayangan
liat contohnya diwww.cable.name, kang rohman
caranya
karena file scriptnya panjang download fancyzom.zip dibawah ini.. :
Instructions
Installing FancyZoom on your web pages .
Jika sudah di download, silahkan di ekstrak terlebih dahulu dengan memakai software ekstraktor seperti winzip atau winrar. Nanti akan terdapat dua file script java :
Nanti akan ada file javascript yang nama nya : FancyZoom.js dan FancyZoomHTML.js.
Didalamnya fancyzoo.zip tadi juga ada folder images,didalam folder tersebut terdapat beberapa images yang berfungsi sebagai efek untuk fancyzoom.. Tetapi agar efek dapat bekerja kamu harus edit kedua script tersebut
contoh km upload gambar diyahoo geocities
username nya eko editny menjadi seperti ini:
pada js
fancyzoom.js
cari tulisan
images/
kalo udah ketemu ganti dengan induk alamat hosting gambar contohnya
http://www.geocities.com/eko/
yang jelas itu adalah alamat gambar itu berkumpul tapi jika ada mengelopokan didalam folder images pada web yang di masukan jadi seperti ini
http://www.geocities.com/eko/images/
selanjutnya lalu edit script fancyzoomHTML.js
Yang dilakukan adalah mengedit alamat gambar sesuai nama gambar,
jika sudah selesai simpan file js
Tugas anda selanjutnya adalah mengupload file java tersebut ke server tempat anda biasa menyimpan file javascript, misalkan ke yahoo geocities atau yang lainnya. Setelah di upload, kemudian copy kedua alamat file tersebut, misalkan anda sudah mempunyai alamat sebagai berikut saya mempunyai username eko di yahoo geocities alamatnya dan kodenya menjadi:
http://www.geocities.com/eko/FancyZoom.js
http://www.geocities.com/eko/FancyZoomHTML.js
Dari alamat tersebut, kodenya jadi seperti ini :
<script src='http://www.geocities.com/eko/FancyZoom.js' type='text/javascript'></script> <script src='http://www.geocities.com/eko/FancyZoomHTML.js' type='text/javascript'></script>
Kemudian masukan kode tersebut di atas kode </head> di dalam template blog anda Lengkapnya seperti berikut :
- login ke blogger yang pastinya
- Klik Tata Letak.
- Klik tab Edit HTML.
- nah kalo km takut terjadi yang kagak2,dari pada bingung,Klik tulisan Download template Lengkap. Agar mudah mengembalikan template seperti semula
- Cari kode </head>
- lalu paste yang kode
<script src='http://www.geocities.com/eko/ FancyZoom.js' type='text/javascript'></script> <script src='http://www.geocities.com/eko/FancyZoomHTML.js' type='text/javascript'></script>yang telah diganti alamat kamu karena alamat diatas hanya contoh, paste di atas kode </head>. - selanjutnya lalu cari code kode ini <body>
- Hapus kode <body> lalu ganti dengan kode :
<body onload="setupZoom()"> - lalu SIMPAN TEMPLATE.
Atau sebagai contoh lengkap dengan alamat gambar seperti berikut ini
<a href="http://www.cabel.name/images-post/2008/02/mwsf-2.jpg"><img src="http://www.cabel.name/images-post/2008/02/mwsf-2.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-2" class="photo" /></a>
agar dapat efek zoom tentunya ukuran gambar harus tampil lebih kecil dari yang sebenarnya,agar gambar yang tampil bisa menjadi berukuran lebih kecil daripada ukuran aslinya yaitu Kode width="161" height="123" ganti menurut keinginan km.
script from :
www.fancyzoo.com
2 komentar:
seperti biasanya, perlu dicoba.
Wah luar biasa sekali ya,, disini ane nemuin berbagai informasi informasi yang lengkap dan berkalitas. Makasih ya
Posting Komentar