All post

Rabu, 07 Januari 2009

Zoom image dengan FancyZoom

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 di
www.cable.name, kang rohman

caranya

karena file scriptnya panjang download fancyzom.zip dibawah ini.. :

Instructions

Installing FancyZoom on your web pages .



Download the FancyZoom package, right here:


Jika sudah di download, silahkan di ekstrak terlebih dahulu dengan memakai software ekstraktor seperti winzip atau winrar. Nanti akan terdapat dua file script java :

 

ektrak

 

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 di
yahoo 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 :

  1. login ke blogger yang pastinya
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. nah kalo km takut terjadi yang kagak2,dari pada bingung,Klik tulisan Download template Lengkap. Agar mudah mengembalikan template seperti semula
  5. Cari kode </head>
  6. 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>.
  7. selanjutnya lalu cari code kode ini <body>
  8. Hapus kode <body> lalu ganti dengan kode :

     

    <body onload="setupZoom()">

     

  9. lalu SIMPAN TEMPLATE.

Lalu format penulisan gambar pada postingan seperti berikut ini

<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>

 

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:

Seti@wan Dirgant@Ra 29 April 2009 13.55  

seperti biasanya, perlu dicoba.

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Seti@wan Dirgant@Ra
Website : https://www.blogger.com/profile/11782379445543111592
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Pengobatan Tradisional Asam Urat 24 Januari 2013 15.23  

Wah luar biasa sekali ya,, disini ane nemuin berbagai informasi informasi yang lengkap dan berkalitas. Makasih ya

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Pengobatan Tradisional Asam Urat
Website : http://goo.gl/vy9In
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Poskan Komentar