TUTORIAL™

 Cara Pasang Featured Image Zoomer Di Blog



Keterangan: Script ini memungkinkan Anda untuk melihat bagian diperbesar dari gambar apapun setelah menggerakkan mouse Anda di atasnya. Sebuah kaca pembesar muncul di samping gambar menampilkan daerah diperbesar pada permintaan. Pengguna dapat beralih tingkat zoom dengan menggunakan roda mouse. Ini bagus untuk digunakan pada gambar produk, foto, atau gambar lain dengan banyak rincian yang ingin Anda pengguna untuk dapat masuk ke pada perintah. Berikut adalah fitur script ini: Kemampuan untuk menentukan baik gambar asli atau versi yang lebih besar dari itu sebagai gambar "diperbesar". Setup kemudian memungkinkan Anda untuk awalnya menampilkan gambar thumbnail rendah-res pada halaman, tetapi menggunakan gambar resolusi tinggi untuk menampilkan gambar secara detail saat diperbesar. The "diperbesar" gambar hanya dimuat pada permintaan (pertama kalinya pengguna bergerak mouse-nya di atas gambar thumbnail), menghemat waktu download halaman awal. Mendukung pengaturan daya opsional disesuaikan. Ketika diaktifkan, pengguna dapat mengatur tingkat zoom pada permintaan dengan menggunakan roda mouse sementara lebih dari gambar. Sesuaikan dimensi gambar diperbesar, ditambah apakah harus muncul di "kanan" atau "kiri" dari gambar thumbnail. Mengatur apakah akan menampilkan "lensa pembesar" di atas gambar thumbnail yang mengisolasi daerah yang saat ini sedang diperbesar ketika mouse berguling itu. Gaya lensa ini dapat disesuaikan, seperti perbatasan dan warna latar belakang, dll dimensi baru di v1.5








<style type="text/css"> .magnifyarea{ /* CSS to add shadow to magnified image. Optional */ box-shadow: 5px 5px 7px #818181; -webkit-box-shadow: 5px 5px 7px #818181; -moz-box-shadow: 5px 5px 7px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); background: white; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://selladrt.wap.sh/Loc/featuredimagezoomer.js"> /*********************************************** * Featured Image Zoomer (w/ adjustable power)- By Selladrt DHTML code library (www.selladrt.com) * This notice MUST stay intact for legal use * Visit Drtsella at http://www.selladrt.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#image1').addimagezoom({ zoomrange: [3, 10], magnifiersize: [300,300], magnifierpos: 'right', cursorshade: true, largeimage: 'http://selladrt.wap.sh/Loc/Tina Fey.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://selladrt.wap.sh/Loc/Sienna Miller.jpg' //<-- No comma after last option! }) $('#image3').addimagezoom() }) </script> <br>

Referensi kode di atas sebuah js file eksternal ditambah dua gambar yang Anda harus men-download di bawah ini (klik , lalu pilih "Save As").:

     featuredimagezoomer.js

 . Di dalam file js, Anda mungkin ingin mengedit bawah dua variabel dekat bagian atas:

Langkah 2: Masukkan kode contoh di bawah ini ke bagian BODY dari halaman Anda, yang menunjukkan 3 Zoomers gambar fitur:
 
 <p> <img id="image1" border="0" src="http://selladrt.wap.sh/Loc/Tina Fey.jpg" style="width:300px;height:225px" /><p> <p> <img id="image2" border="0" src="http://selladrt.wap.sh/Loc/Sienna Miller.jpg" style="width:300px;height:225px" /><p> <p> <img id="image3" border="0" src="" style="width:300px;height:225px" /></p> </p> </p> </p> </p>

Detil Set Up informasi

Untuk mengaktifkan Zoomer Gambar Feature pada gambar, pertama, mencari atau menentukan gambar awal pada halaman:


Kalu Ada Waktu Tinggalkan Saran Anda
PARA MASTER SEJATI KYAK ROKO YA HEHE