Plugin pembesaran gambar Zoomy, yang mensimulasikan kaca pembesar nyata, telah ditinjau. Dalam beberapa kasus, penggunaannya merepotkan, karena kaca pembesar menutupi gambar utama dan menyulitkan pemfokusan pada area yang diinginkan. Untuk memposisikan titik pembesaran secara tepat, Anda dapat menggunakan kaca pembesar versi lain - jLoupe. Plugin untuk perpustakaan skrip jQuery gratis ini dikembangkan oleh desainer web Chris Iufer. Ini memiliki lebih banyak pengaturan dan memungkinkan Anda membuat efek indah yang mensimulasikan kaca pembesar, menampilkan fragmen gambar yang diperbesar di sebelah kursor penunjuk.

Tiga opsi untuk plugin jLoupe ditunjukkan pada gambar. Di sebelah kiri terdapat kaca pembesar berbentuk drop dan merupakan penghubung untuk keluaran gambar skala penuh, di tengah adalah kaca pembesar berbentuk persegi panjang tanpa penghubung, di sebelah kanan adalah kaca pembesar berbentuk lingkaran. Sayangnya, pembulatan, seperti pada plugin kaca pembesar Zoomy yang telah dibahas sebelumnya, tidak berfungsi di browser IE6 - IE8. Itu sebabnya kaca pembesar di dalamnya selalu berbentuk persegi panjang, dan versi yang benar, secara umum, sangat memalukan.

Pertama, unduh arsipnya. Kemudian, seperti biasa, untuk menghindari kebingungan, mari buat folder baru di situs tersebut, beri nama jloupe, dan ekstrak arsip yang diunduh ke dalamnya. Kami akan mendapatkan tiga file:
jquery-1.8.3.min.js, jquery.jloupe.js dan gambar pendukung untuk kaca pembesar bulat loupe-trans.png.

Agar plugin berfungsi, Anda hanya perlu menyetel class="jloupe" untuk gambar, dan keluaran kaca pembesar itu sendiri dapat diatur dalam beberapa cara:
1. Buat dua gambar - gambar utama (image.jpg) dan gambar yang diperbesar (image_big.jpg). Pada tag gambar yang ditempatkan di halaman, tunjukkan jalur ke versi yang diperbesar menggunakan atribut data-asli:
.
2. Gunakan hanya satu gambar yang diperbesar, dan untuk memperkecilnya di browser, atur dimensi yang diperlukan pada halaman menggunakan atribut lebar dan tinggi. Ingatlah bahwa penskalaan yang dilakukan oleh browser biasanya menurunkan kualitas gambar:
.
3. Jika Anda perlu memberikan link untuk membuka gambar besar atau objek lainnya, gunakan formulir berikut:
.

Ini menyelesaikan instalasi plugin jLoupe, dan Anda dapat melihat cara kerjanya dengan membuka halaman dengan gambar di browser.

Catatan Penting: Jika situs Anda menggunakan beberapa plugin jQuery, akan lebih mudah untuk memindahkan file jquery.js (sebaiknya versi terbaru) ke folder root agar tidak mendownloadnya beberapa kali. Dalam hal ini, baris untuk mengaksesnya akan terlihat sama untuk semua plugin. Khususnya, untuk contoh kita, hasilnya seperti ini:
.
Tidak disarankan untuk menggunakan beberapa versi jQuery yang berbeda pada halaman yang sama agar tidak saling bertentangan. Pada saat yang sama, pastikan untuk memeriksa apakah plugin berfungsi dengan versi jQuery yang terinstal, karena tidak semua versi dapat dipertukarkan.

Pengaturan dasar untuk kaca pembesar jLoupe diatur dalam file jquery.jloupe.js. Untuk mengubahnya, buka di editor HTML atau Notepad apa pun. Di awal file terdapat baris dengan pengaturan yang tersedia yang dapat diubah:

Misalnya, untuk kaca pembesar berbentuk tetesan air mata yang ditampilkan di bagian atas artikel (di sebelah kiri), pengaturan default yang digunakan, dan untuk gambar kanan digunakan pengaturan berikut:
radiusLT: 100,
margin: 12,
perbatasanWarna: salah,
warna latar belakang:"#ffffee",
gambar: "jloupe/loupe-trans.png"

Untuk opsi kaca pembesar persegi panjang (di tengah), tidak diperlukan gambar eksternal (gambar: salah):
radiusLT: 0,
radiusRT: 10,
radiusRB: 0,
radiusLB: 10,
lebar: 300,
tinggi: 150,
warna batas: "#f2730b",
warna latar belakang: "#000",
memudar: salah,
gambar: salah

Untuk program lain untuk memperbesar gambar, serta membuat galeri foto, carousel gambar, dan tayangan slide di situs, lihat dan di bagian "

Dalam tutorial ini kita akan melihat cara membuat efek kaca pembesar untuk gambar statis hanya menggunakan jQuery dan CSS.

Markup untuk mencapai efeknya cukup sederhana. kami hanya menggunakan sedikit div dan gambar.

div#iphone menampilkan bingkai iPhone. Di dalamnya terletak div#halaman web dengan tangkapan layar halaman tersebut. Tangkapan layar ditampilkan setengah dari ukuran sebenarnya, jadi kami menggunakan gambar yang sama untuk versi kecil (ditampilkan di bingkai iPhone) dan versi besar, yang ditampilkan di jendela bundar.

Ada juga div#retina, yang diatur menjadi bentuk bulat menggunakan CSS3. Ini menampilkan versi tangkapan layar halaman yang lebih besar sebagai latar belakang dan bergerak saat Anda menggerakkan kursor mouse.

Mari kita atur gaya untuk div#iphone, #webpage dan #retina, yang memungkinkan efek yang diinginkan terwujud.

posisi:relatif; div lebar:750 piksel; )

div Dengan menentukan posisi absolut div di halaman tersebut, kita dapat menggunakan teknik pemusatan vertikal dan horizontal, yang secara efektif menempatkan tangkapan layar di tengah bingkai iPhone. div#retina juga mendapatkan posisi absolut, sehingga dimungkinkan untuk memindahkannya di bagian jQuery hanya dengan mengatur offset dari atas dan kiri. Diberikan

juga memiliki tangkapan layar halaman sebagai latar belakang (dalam ukuran aslinya). Perpindahan latar belakang saat bergerak div menciptakan ilusi memperbesar potongan kecil tangkapan layar di belakangnya.. Juga#retina memiliki radius batas dengan nilai yang sama persis dengan setengah lebarnya, menjadikannya bulat persis (setidaknya di browser yang mendukung properti tersebut

Dan terakhir, kita menyembunyikan penunjuk tetikus dengan menyetel kursor kosong (Google Chrome menimbulkan kesalahan saat merender kursor yang benar-benar kosong, jadi kita perlu menyetel kursor putih 1 piksel untuk itu). Opera sepenuhnya mengabaikan kursor pengguna, dan tidak ada yang dapat dilakukan mengenai fakta ini. Oleh karena itu, pengguna browser ini akan mendapatkan pengalaman negatif saat melihat efeknya.

Gaya sudah diatur, saatnya memulai pemrograman.

)).mouseenter(function())( retina.stop(benar,benar).fadeIn("cepat"); )); )); Dalam fungsi gerakan mouse koordinat kursor mouse saat ini diteruskan sebagai e.halamanX Dan e.halamanY div, tetapi bersifat mutlak dalam kaitannya dengan keseluruhan dokumen. Mengurangi offset div#webpage, kita mendapatkan koordinat relatif kursor mouse, yang nantinya digunakan untuk penentuan posisi

#retina.

Kesimpulan

Perdebatan antara pendukung Flash dan HTML5 semakin memanas akhir-akhir ini karena orang-orang mulai mencari cara untuk mendapatkan tingkat fungsionalitas yang sama tanpa menggunakan aplikasi eksternal. Pendekatan ini mengarah pada penerapan yang lebih sederhana. Namun, kita harus ingat untuk menjaga kompatibilitas solusi lintas-browser, yang tidak selalu memungkinkan (ingat IE).

Artikel ini menjelaskan prosedur untuk menginstal plugin cloud-zoom berdasarkan jQuery, dan juga menjelaskan pengaturan tambahan plugin untuk mengoptimalkan tampilan jendela pembesar.

Cukup sering, pada sumber daya dengan persediaan materi grafis yang besar, mereka menggunakan kaca pembesar. Misalnya ada gambar yang berukuran dan beresolusi besar. Agar sesuai dengan area yang terlihat di layar, ukurannya perlu diperkecil, yang akan mengganggu keterbacaan gambar dan akan sulit untuk melihat detailnya. Dalam hal ini, plugin khusus akan membantu, yang secara lokal akan memperbesar area tertentu pada gambar saat mengarahkan kursor. Selain itu, teknik ini sangat sering digunakan di toko online agar calon klien dapat mempelajari produk yang ditawarkan kepadanya secara detail.

Perlu dicatat bahwa ada cukup banyak paket perangkat lunak serupa di Internet yang memungkinkan Anda mengimplementasikan kaca pembesar gambar. Oleh karena itu, logis untuk memilih opsi yang paling optimal dari seluruh variasi plugin. Selama analisis saya, saya memilih 3 kriteria utama yang saya gunakan untuk membuat pilihan:

• dukungan untuk browser yang berbeda;
• ruang lingkup fungsionalitas;
• volume plugin dan kecepatan kerjanya.

Opsi pertama yang sangat sesuai dengan kriteria saya adalah cloud-zoom. Artikel ini akan fokus pada instalasi dan pengoperasian skrip ini saja, dan solusi selanjutnya yang juga memenuhi kriteria akan dibahas di artikel mendatang.

Jadi, zoom awan. Penulis pengembangan ini adalah Profesor Tucha tertentu, patut dihormati karyanya dan berterima kasih padanya atas produk ini. Pertama-tama, saya ingin mencatat keunggulan utama skrip dibandingkan dengan yang lain - kemampuan kode untuk berinteraksi dengan format galeri yang berbeda.

Langkah pertama dalam menginstal plugin adalah mengunduh jQuery terbaru, juga secara langsung, file plugin itu sendiri dan style sheetnya. Semua ini dapat ditemukan di sumber produk resmi.

Setelah dokumen yang diperlukan diunduh dan ditempatkan di direktori yang sesuai dengan sumber daya Anda, Anda dapat melanjutkan ke bagian kode instalasi. Di tag head kami menyertakan style sheet untuk kaca pembesar kami, dan di badan situs itu sendiri kami memasukkan tag skrip yang akan menghubungkan perangkat lunak plugin kami. Contoh kode yang menyelesaikan tugas di atas diberikan di bawah ini.

HTML

/*di kepala*/< link rel= "stylesheet" type= "text/css" href= "cloud-zoom/cloud-zoom.css" />/*di dalam tubuh*/< script type= "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" > < script type= "text/javascript" src= "cloud-zoom/cloud-zoom.1.0.2.js" >

Jika Anda sudah berhasil menghubungkan semuanya, Anda dapat melanjutkan ke tahap instalasi berikutnya. Ini akan menjadi penyisipan kerangka kerja agar plugin berfungsi dengan benar, akan terlihat seperti ini

HTML

< a class = "cloud-zoom" href= "big-img.jpg" > < img src= "small-img.jpg" />

Seperti yang Anda lihat, tidak ada yang supernatural dalam desain standar badan HTML plugin: tautan ke gambar yang diperbesar dan gambar itu sendiri di dalamnya. Saya juga ingin mencatat bahwa pada dasarnya penting untuk menentukan kelas plugin, jika tidak, skrip tidak akan berfungsi. Jika semuanya dilakukan dengan benar, maka di browser Anda akan melihat sesuatu seperti berikut:

Seperti yang Anda lihat, jendela kaca pembesar menempel erat pada versi gambar yang lebih kecil. Kekurangan ini dihilangkan melalui pengaturan khusus yang menyesuaikan desain dan posisi jendela kaca pembesar. Dalam contoh ini, kita akan melihat bagaimana Anda dapat memperbaiki lokasi jendela kaca pembesar

HTML

< a class = "cloud-zoom" href= "big-img.jpg" rel= "adjustX: 20, adjustY: 0" > < img src= "small-img.jpg" />

Entri ini berarti bahwa kita telah sedikit mendefinisikan ulang koordinat keluaran jendela relatif terhadap sumbu X. Perhatikan juga bahwa semua pengaturan untuk plugin ditulis dalam atribut rel, dipisahkan dengan koma. Memeriksa apakah perintah kami berfungsi

Di bawah ini adalah daftar semua kemungkinan pengaturan plugin dan penjelasan singkatnya.

• zoomWidth – menentukan ukuran lebar jendela untuk menampilkan pembesaran gambar lokal. Jika tidak ada yang ditentukan untuk parameter ini, jendela akan mengulangi nilai lebar gambar.
• zoomHeight – menentukan ukuran tinggi jendela untuk menampilkan pembesaran gambar lokal. Jika tidak ada yang ditentukan untuk parameter ini, jendela akan mengulangi ketinggian gambar.
• position – mengesampingkan posisi jendela untuk ditampilkan. Mirip dengan properti CSS dengan nama yang sama, dibutuhkan nilai "kiri", "kanan", "atas" dan "bawah". Posisinya diatur relatif terhadap gambar yang dimaksud. Anda juga dapat menentukan tampilan jendela dalam wadah yang diperlukan melalui pengikatan ke pengidentifikasi. Nilai "blockId" bertanggung jawab untuk ini.
• adjustX – mengatur posisi jendela kaca pembesar relatif terhadap koordinat sumbu x.
• adjustY – mengatur posisi jendela kaca pembesar relatif terhadap sumbu ordinat.
• tint – bertanggung jawab atas warna bingkai yang membingkai jendela kaca pembesar. Tidak berfungsi saat menggunakan parameter softFocus.
• tintOpacity – menentukan transparansi batas kursor kaca pembesar.
• lensOpacity – menentukan transparansi batas jendela kaca pembesar.
• softFocus – memberikan efek blur pada bagian gambar yang tidak ditangkap oleh kursor kaca pembesar. Tidak berfungsi saat menggunakan parameter warna.
• smoothMove – memungkinkan Anda mengonfigurasi pergerakan kursor kaca pembesar yang lebih mulus di area gambar yang sedang dipelajari.
• showTitle – Sesuai dengan fungsi atribut title biasa.
• titleOpacity – memungkinkan Anda mengontrol transparansi blok dengan deskripsi gambar.

Pada saat yang sama, pengaturannya mencakup pemformatan style sheet. Di bawah ini adalah daftar semua pemilih tabel, serta mana yang sesuai dengan elemen kaca pembesar yang mana:

• .cloud-zoom-lens adalah kursor yang menentukan zona zoom lokal.
• .cloud-zoom-title – bertanggung jawab untuk menata judul kaca pembesar.
• .cloud-zoom-big – jendela untuk menampilkan gambar yang diperbesar.
– desain pesan pemuatan informasi.

Jika kita bekerja dengan galeri, struktur kodenya sedikit berubah, dan pada saat yang sama beberapa opsi pengaturan baru muncul. Mari kita lihat contoh langsung

HTML

< a class = "cloud-zoom" href= "big-img.jpg" id= "loupe1" rel= "position: "right", adjustX: 10, adjustY: 0" > < img src= "small-img.jpg" width= "200" /> < ul> < li> < a class = "cloud-zoom-gallery" href= "big-img.jpg" title= "" rel= > < img src= "small-img.jpg" width= "100" /> < li> < a class = "cloud-zoom-gallery" href= "masdefault.jpg" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "masdefault.jpg" width= "100" height= "114px" /> < li> < a class = "cloud-zoom-gallery" href= "kostyum" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "kostyum.jpg" width= "100" height= "114px" />

Tampilannya menyerupai galeri biasa yang dibuat menggunakan daftar berpoin. Elemen plugin cloud-zoom juga sudah dikenali, menunjukkan beberapa pengaturannya. Dalam hal ini, Anda perlu memperhatikan perintah useZoom, yang mengikat setiap elemen galeri ke blok tampilan utama. Koneksi dibentuk oleh pengidentifikasi yang cocok. Selain itu, parameter lain telah ditambahkan - smallImage, yang pada gilirannya menentukan gambar mana yang akan ditampilkan dalam format yang diperkecil. Perlu dicatat bahwa untuk mode galeri Anda perlu memiliki tiga gambar: 2 yang akan berinteraksi dengan plugin, dan satu lagi dalam versi yang lebih kecil untuk membuat daftar ikon.

Dalam praktiknya, contoh ini akan terlihat seperti ini

Jika ajax digunakan untuk meluncurkan galeri, plugin mungkin tidak berfungsi. Untuk memperbaiki bug ini, Anda perlu menginisialisasi ulang plugin. Dalam bentuk standar tampilannya seperti ini

JavaScript

jQuery(".cloud-zoom, .cloud-zoom-gallery" ) . CloudZoom() ;

Sebagai kesimpulan, saya ingin mencatat kemudahan penggunaan plugin dan fleksibilitas saat melakukan penyesuaian pada desain elemen fungsional ini. Selain itu, kami senang dengan tingkat kompatibilitas lintas-browser yang tinggi dan ukuran skrip yang kecil - hanya 6 kilobyte. Dukungan untuk mode galeri patut mendapat perhatian khusus. Satu-satunya hal yang sedikit membingungkan adalah bahwa semua pengaturan dibuat langsung ke dalam dokumen HTML; ini sedikit menyumbat kode kita. Akan lebih praktis jika meletakkannya di file js eksternal. Secara umum, plugin ini layak mendapat perhatian dan pengakuan.

Memperbesar luas persegi.

Kualitas plugin ini sama sekali tidak kalah dengan skrip penskalaan gambar komersial, seperti Magic Zoom. Banyak fitur berbeda dan kompatibilitas dengan browser terpopuler. Saya sarankan menonton skrip ini beraksi di halaman demo. Saya pikir dia tidak akan membiarkan Anda acuh tak acuh.

Skrip yang relatif fleksibel. Area tampilan mudah disesuaikan menggunakan CSS. Plugin ini memperbesar area kecil di bawah ketiak. Beralih antara ukuran besar dan kecil semua konten dengan mengklik dua kali

Dibuat dalam bentuk layar iPhone.

Untuk melihat gambar secara detail, cukup arahkan mouse Anda ke atasnya.

Implementasi portofolio yang menarik, dibuat dengan menghubungkan dua plugin jQuery: Cloud Zoom dan Fancybox. Saat Anda mengarahkan mouse ke thumbnail, salinan area di bawah kursor yang diperbesar akan muncul. Mengklik thumbnail akan membuka galeri Fancybox yang memungkinkan Anda melihat beberapa gambar ukuran penuh untuk proyek tersebut dalam portofolio Anda.

Memperbesar area di bawah kursor.

Efek kaca pembesar untuk memperbesar sebagian gambar.

Efek kaca pembesar saat mengarahkan mouse ke atas gambar. Diimplementasikan menggunakan jQuery.

Efek memperbesar area gambar saat melayang.

Dapat digunakan untuk mengimplementasikan tampilan produk secara detail di toko online.

Plugin jQuery memungkinkan untuk mengimplementasikan tampilan gambar besar dalam blok terbatas. Dalam hal ini, navigasi akan dilakukan dengan menggerakkan persegi panjang melintasi thumbnail.

AJAX-zoom adalah plugin galeri yang sangat fungsional dengan beragam fitur. Plugin ini berjalan pada JQuery dan PHP dan memiliki lebih dari 250 opsi tampilan. Selain fungsinya, ini adalah plugin yang sangat fleksibel yang dapat diintegrasikan ke situs web mana pun.