Membuat Featured Image Zoomer
Featured Image Zoomer ini memungkinkan Anda melihat gambar diperbesar dari setiap bagian gambar saat menggerakkan cursor diatasnya.
Seperti halnya Image Power Zoomer, sebuah kaca pembesar muncul untuk memperbesar bagian gambar dan disampingnya menampilkan bagian gambar yang sudah diperbesar sesuai permintaan.
Contoh:
(Letakan cursor diatas gambar, kemudian gerakan...)
- Berbeda, gambar resolusi tinggi digunakan sebagai gambar diperbesar dan dimuat pada permintaan.
- Listrik Default adalah 3X gambar asli.
- Daya berkisar antara Adjustable "3X untuk 10X" diaktifkan (menggunakan roda mouse untuk mengubah listrik).
- Ukuran Magnifier diatur ke 300px oleh 300px, diposisikan tepat dari gambar asli.
- Pembesar lensa di atas gambar zoomable diaktifkan.
- Sama gambar yang digunakan sebagai gambar asli dan diperbesar.
- Tidak ada kekuatan default yang ditentukan-diperbesar gambar yang digunakan seperti di dalam kaca pembesar.
- Opsi daya Adjustable tidak digunakan. (
zoomrangeproperti tidak diatur) - Ukuran Magnifier diatur ke 200px oleh 200px, diposisikan tepat dari gambar asli.
Milla Jojovitch
- Efek Lensa (
cursorshade: true) dengan shading kuning (cursorshadecolor: '#fdffd5'), kecuali gambar 2 (Saleen S7 Twin Turbo), yang memiliki ukuran gambar kustom diperbesar juga:data-lens="false" data-magsize="150,150"
data-la . .
- Membesarkan dari 3 sampai 10 (
zoomrange: [3, 10]) - Gambar zoomable berpusat vertikal dalam wadah (
imagevertcenter: true) - baru dengan multi-zoom - Descripton berikut bawah gambar (
descpos: true) - baru dengan multi-zoom - Gambar diperbesar berpusat vertikal dalam kaitannya dengan citra zoomable (
magvertcenter: true) - baru dengan multi-zoom - Durasi fade in untuk gambar zoomable baru 1,5 detik (
speed: 1500), default untuk 'memperlambat', 0,6 detik - baru dengan multi-zoom
Angelina Jolie
- Memperbesar resolusi sebenarnya dari largeimage (
zoomrangeproperti tidak diatur) - Gambar zoomable tidak terpusat vertikal dalam wadah (
imagevertcenterproperti tidak diatur) - Descripton tidak mengikuti bawah gambar (
descposproperti tidak diatur) - Gambar diperbesar tidak terpusat vertikal dalam kaitannya dengan citra zoomable (
magvertcenterproperti tidak diatur) - Meskipun tidak ada zoom variabel, mousewheel dinonaktifkan sementara atas gambar (
disablewheel: true) - baru
Cara Memasang Featured Image Zoomer
Langkah Pertama:
Download terlebih dahulu Css dan Js berikut ini untuk membuat Featured Image Zoomer, letakan diatas kode </head>. Jangan lupa untuk memberikan tag <pembuka> dan tag </penutup> Lalu tambahkan script berikut ini dibawahnya, masih diatas kode </head>.
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
})
$('#image3').addimagezoom()
})
</script>
Langkah Terakhir:
Pasang script contoh berikut ini untuk Membuat Featured Image Zoomer, letakan pada <body> halaman anda.<p><img id="image1" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>
<p><img id="image2" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>
<p><img id="image3" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>
Keterangan:
Lihat Cara Memasang Image Power Zoomersumber: dynamicdrive
saya coba kok tidak bisa, punya script lengkapnya apa tidak ? terima kasih.
ReplyDeletekalau ada bisa kirim ke kurniawan0219@gmail.com
sebelumnya saya mohon maaf, mungkin halaman sobat bentrok di jquery, semua kode diatas sudah lengkap, saya kloning dari halamam sumber, silahkan coba lihat halaman sumber
Delete