Diperbarui 18 Juni, 10: Menambahkan kemampuan untuk menentukan versi, resolusi yang berbeda yang lebih tinggi dari gambar asli sebagai gambar yang digunakan di dalam kaca pembesar.
Description: Beberapa gambar yang layak melihat lebih dekat, itulah sebabnya mengapa ada Gambar Zoomer Power. Ini memberikan gambar apapun pada halaman Anda kemampuan untuk diperbesar ketika mouse berguling itu. Sebuah "kaca pembesar" yang muncul di atas gambar zoom memungkinkan pengguna dalam pada setiap bagian itu karena ia mengikuti kursor di sekitar. Selanjutnya, kekuatan pembesaran dapat disesuaikan on the fly dengan memutar roda mouse kembali atau sebagainya, seperti dalam program-program grafis banyak. Mari kita lihat lebih dekat pada fitur ini script:
Berlaku efek zoom untuk setiap gambar pada halaman tanpa menambahkan markup tambahan untuk itu.
Kemampuan untuk menggunakan gambar asli, atau, versi yang berbeda yang lebih tinggi resolusi itu sebagai gambar yang digunakan di dalam kaca pembesar, untuk menyediakan detail sebanyak mungkin. v1.1 Fitur
Zoom default tingkat (yaitu: 2x) dapat diubah untuk setiap gambar.
Ketika pengguna gulungan roda mouse sementara lebih dari gambar, tingkat zoom berkurang atau meningkat berdasarkan arah gulir. Rentang zoom dapat diubah (yaitu: 2x untuk 10x).
Ukuran dari "kaca pembesar" dapat diubah untuk setiap gambar.
Sudah waktunya untuk menyoroti layak gambar di situs Anda dengan script ini!
Demo (gulir roda mouse Anda saat di atas gambar untuk memperbesar lebih lanjut dalam atau keluar).
Demo 1 (listrik default:. 2x Rentang: 2x untuk 7x ukuran Magnifier:. 150px by 150px):
Demo 2 / 3 (demo 3 menggunakan, versi yang berbeda yang lebih tinggi res dari gambar asli sebagai gambar diperbesar):
Arah Pengembang View
Langkah 1: Tambahkan kode di bawah ini di bagian <HEAD> halaman:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js">
/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
/*
EXAMPLE 1:
$('#myimage').addpowerzoom()
EXAMPLE 2:
$('img.vacation').addpowerzoom({
defaultpower: 2,
powerrange: [2,5],
largeimage: null,
magnifiersize: [100,100] //<--no comma following last option!
})
*/
})
</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script> <ketik skrip = "text / javascript "src =" ddpowerzoomer.js "> /*************************************** ******** * Gambar Daya Zoomer-(c) Dynamic DHTML Hard kode perpustakaan (www.dynamicdrive.com) * Pemberitahuan ini HARUS tetap utuh untuk penggunaan hukum * Kunjungi Dynamic Drive di http://www.dynamicdrive. com / untuk script ini dan 100 lebih ****************************************** *****/ </ script> <script type="text/javascript"> jQuery (document) siap (function ($) {/ / api pada DOM siap / * Contoh 1:. $ ('# myImage') addpowerzoom () CONTOH 2:.. $ ('img.vacation') addpowerzoom ({defaultpower: 2, powerrange: [2,5], largeimage: null, magnifiersize: [100.100] //<-- ada koma berikut opsi terakhir }) * /}) </ script>
Kode di atas referensi file eksternal yang harus Anda download di bawah ini (klik kanan, dan pilih "Save As"):
ddpowerzoomer.js
Langkah 2: Kemudian, untuk menerapkan efek zoom power pada gambar, pertama, menentukan gambar pada halaman Anda seperti biasa, dengan atribut ID yang unik untuk membantu mengidentifikasi:
<img id="myimage" src="ocean.gif" style="width:200px; height:150px" />
Tips: Berikan gambar yang Anda menerapkan efek zoom untuk lebar CSS eksplisit dan atribut tinggi yang mencerminkan dimensi asli gambar itu. Ini membantu script inisialisasi lebih cepat daripada tanpa atribut-atribut ini.
Kemudian, di dalam bagian HEAD halaman Anda, panggilan addpowerzoom metode jQuery (opsi) pada gambar di pertanyaan:
<script type="text/javascript">jQuery (document) siap (function ($) {/ / api pada DOM siap.
$ ('# MyImage'). Addpowerzoom ()})</ Script>
Dimana "# myImage" adalah Selector jQuery yang memilih citra tertentu dan menambahkan efek zoom itu. Perhatikan bahwa Anda harus memanggil fungsi ini hanya setelah halaman telah dimuat, dengan membungkusnya dalam fungsi siap jQuery ().
Anda dapat menerapkan efek memperbesar kekuatan untuk koleksi gambar sekaligus. Cukup mengubah pemilih jQuery Anda untuk target grup yang diinginkan gambar. Berikut adalah beberapa contoh:
<script type="text/javascript">jQuery (document) siap (function ($) {/ / api pada DOM siap.
Addpowerzoom $ ('img.showcase'). () / / Menambahkan efek zoom untuk gambar dengan CSS "menampilkan" kelas
$ ('# Gallerydiv img'). Addpowerzoom () / / menambahkan efek zoom untuk semua gambar di dalam DIV dengan ID "gallerydiv"})</ Script>
Seperti yang Anda lihat, berdasarkan pemahaman Anda tentang Selectors jQuery, Anda dapat menargetkan efek memperbesar dalam berbagai cara.
Ketika Anda menelepon addpowerzoom () dengan tidak ada parameter berlalu dalam, pengaturan tertentu secara otomatis dimasukkan. Pengaturan ini global yang Anda dapat menyesuaikan didefinisikan di dekat bagian atas ddpowezoomer.js:
dsetting: {defaultpower: 2, powerrange: [2,7], magnifiersize: [75, 75]},
Pengaturan defaultpower set kekuatan pembesaran standar. Pengaturan powerrange set kisaran kekuasaan mungkin (berlaku bila pengguna gulungan roda mouse). Dan akhirnya, dimensi magnifiersize set default dari kaca pembesar yang muncul di atas gambar.addpowerzoom () opsi
Ketika memanggil addpowerzoom (pilihan) metode, Anda dapat lulus ke dalamnya 4 pilihan untuk menyesuaikan pengaturan gambar yang terkena dampak (s). Pilihan ini jika ditentukan menimpa global yang didefinisikan di dalam file js. Disebutkan di atas. Pilihan harus didefinisikan dalam sebuah obyek kosong {}, masing-masing dipisahkan dengan koma jika lebih dari 1 didefinisikan.addpowerzoom () opsi Pilihan Deskripsidefaultpower: nilai Mengatur kekuatan perbesaran default ketika mouse berguling gambar. Nilai harus integer lebih besar atau sama dengan 1. Contoh:
$ ('# MyImage'). Addpowerzoom ({
defaultpower: 3 daya / / default: gambar asli 3x
})
Nilai 1 berarti tidak perbesaran secara default. Nilai default adalah 2.powerrange: [lowvalue, highvalue] Mengatur berbagai kekuatan perbesaran mungkin ketika pengguna gulungan roda mouse sementara lebih dari gambar target. Pastikan rentang ini mencakup pengaturan defaultpower atas. Contoh:
$ ('# MyImage'). Addpowerzoom ({
defaultpower: 3,
powerrange: rentang [2, 10] / / Kemungkinan: 2x untuk pembesaran 10x
})
Nilai default adalah [2,7].largeimage: "path_to_image" Jika didefinisikan, menentukan path ke gambar yang diperbesar ditampilkan dalam kaca pembesar. Ini harus menjadi lebih besar, lebih tinggi versi resolusi dari gambar asli, untuk memberikan rincian sebanyak mungkin:
$ ('# MyImage'). Addpowerzoom ({
defaultpower: 3,
powerrange: [2, 10],
largeimage: "http://mysite.com/images/sarah_large.jpg"
})
Jika opsi ini tidak didefinisikan, gambar asli yang digunakan sebagai gantinya.
Nilai default adalah null.magnifiersize: [lebar, tinggi] Mengatur dimensi kaca pembesar yang muncul di atas gambar target. Untuk gambar besar itu masuk akal untuk mengambil keuntungan dari real estate dengan juga meningkatkan ukuran kaca pembesar itu. Contoh:
$ ('# MyImage'). Addpowerzoom ({
magnifiersize: [120, 120]} / / Mengatur ukuran kaca pembesar untuk 120px dengan 120px
)
Nilai default adalah [75,75].
Berikut ini mendefinisikan semua 4 pilihan addpowerzoom ():
<script type="text/javascript">jQuery (document) siap (function ($) {/ / api pada DOM siap.
$ ('# MyImage'). Addpowerzoom ({
defaultpower: 2,
powerrange: [2,5],
largeimage: nol,
magnifiersize: [100.100] //<-- ada koma berikut opsi terakhir!})})</ Script>
Bila lebih dari 1 pilihan didefinisikan, yang terpisah masing-masing dengan koma.
accessories 
notepad 
SaveAs kemudian pada file name *.txt diganti dengan index.html kemudian klik save. 
(jika anda menggunakan mozila sebagai web browser) 
accessories 
notepad 
SaveAs kemudian pada file name *.txt diganti dengan index.html kemudian klik save. 
(jika anda menggunakan mozila sebagai web browser) 
