Saat membuat halaman web tipe artikel, Anda sering menemukan kebutuhan untuk mengklik untuk melihat gambar besar. Lightbox2 adalah plug-in jQuery yang relatif sangat baik di antara banyak produk. Saya tidak akan membahas detail tentang konfigurasi. Hari ini saya terutama ingin berbagi: Cara memperbesar gambar melalui roda gulir mouse setelah mengklik gambar besar.
1. Ubah kode sumber Lightbox untuk mendukung penskalaan roda gulir
Roda mouse pendukung terutama mengikat seluruh kotak pop-up ke acara mousewheel, buka lightbox.js, dan temukan lightbox.prototype.build = function () {...}. Anda dapat mengikat acara roda gulir yang diinginkan di sini (saat LightBox diinisialisasi), misalnya, tambahkan kode berikut di akhir fungsi:
Salinan kode adalah sebagai berikut:
// gambar zoom roda
this.img = this. $ container.find ('. lb-image');
this.label = this. $ lightbox.find ('. lb-datacontainer');
$ ([ini. $ overlay [0], this. $ lightbox [0]]). bind ("mousewheel", function (e) {
var flag = e.originalevent.wheeldelta <0;
var imgh = self.img.height ();
var imgw = self.img.width ();
var nw = math.round (20*imgw/imgh);
var cth = self. $ outerContainer.height ();
var ctw = self. $ outerContainer.width ();
var layh = self. $ overlay.height ()-20;
var layw = self. $ overlay.width ()-20;
// Turun
if (flag && imgh> 20 && imgw> 20) {
self.img.css ('tinggi', imgh - 20);
self.img.css ('lebar', imgw - nw);
self. $ OutTerContainer.css ('tinggi', cth - 20);
self. $ OuterContainer.css ('lebar', ctw - nw);
if (ctw-nw> 240) {
self.label.css ('lebar', ctw - nw);
}
} else if (! flag && imgh <layh && imgw <layw) {
self.img.css ('tinggi', imgh + 20);
self.img.css ('lebar', imgw + nw);
self. $ OutTontainer.css ('tinggi', cth + 20);
self. $ OutterContainer.css ('lebar', ctw + nw);
self.label.css ('lebar', ctw + nw);
}
e.Stoppropagation ();
mengembalikan false;
});
Kode lebih mudah dipahami, yaitu menambahkan pemantauan roda mouse ke latar belakang dan gambar depan, dan kemudian skala tinggi dan lebar secara proporsional (gulung ke atas, gulir ke bawah untuk memperbesar). Saya mengatur perubahan ketinggian menjadi 20 piksel setiap kali, dan kemudian lebarnya berubah secara proporsional. Apa yang harus dicatat adalah bahwa ukuran minimum gambar harus dikurangi, dan pembesaran gambar tidak dapat melebihi batas rentang layar. Pada saat yang sama, untuk pengalaman yang lebih baik, Anda harus menambahkan E.Stoppropagation () dan kembali salah untuk mencegah browser dari pengguliran.
2. Ubah Kode Sumber Lightbox Untuk Mendukung Base64 Gambar
Mungkin lebih merepotkan untuk dibicarakan di sini. Pertama -tama mari kita lihat persyaratan format kode HTML saat menggunakan LightBox asli:
Salinan kode adalah sebagai berikut:
<a href = "img/image.jpg" data-lightbox = "test"> gambar #1 </a>
Ini adalah gambar pop-up termudah. Saat mengklik Image #1, LightBox akan muncul untuk menampilkan konten img/image.jpg (elemen <img src = "img/image.jpg"/>).
Sekarang mari kita pertimbangkan situasi ini, jika gambar dikodekan di Base64 di server dan disimpan dalam database? Seharusnya seperti ini:
Salinan kode adalah sebagai berikut:
<a href = "data: gambar/png; base64, ivborw ..." data-lightbox = "test"> gambar #1 </a>
Masalahnya adalah bahwa panjang HREF terbatas di bawah IE. Gambar besar tidak dapat ditempatkan di bidang HREF, dan gambar akan dikebiri (hanya bagian atas yang ditampilkan).
Ada situasi umum lainnya. Jika saya pertama kali menampilkan gambar kecil dan klik pada gambar kecil untuk melihat gambar besar, itu harus seperti ini:
Salinan kode adalah sebagai berikut:
<a href = "data: gambar/png; base64, ivborw ..." data-lightbox = "test">
<img src = "data: gambar /png; base64, ivborw ..." />
</a>
Oke, ada dua data base64 duplikat, dan semuanya dikirim dari sisi server, yang menghabiskan waktu dan bandwidth.
Jadi saya memodifikasinya sesuai dengan kebutuhan saya, kode ini sangat sederhana, memodifikasi subfungsi di lightbox.prototype.start = function ($ link) {...} addoAlbum:
Salinan kode adalah sebagai berikut:
fungsi addoalbum ($ link) {
self.album.push ({
// tautan: $ link.attr ('href'),
Tautan: $ link.children (). attr ("src"),
Judul: $ link.attr ('Data-title') || $ link.attr ('judul')
});
}
Bagian yang dikomentari adalah aslinya. $ Link adalah tag dalam kode HTML sebelumnya. Setelah modifikasi, fungsi fungsi AddoAlbum adalah: Saat mengatur SRC untuk muncul gambar, tidak lagi mengambil karakter dari HREF asli sebagai SRC untuk muncul tag IMG, tetapi secara langsung menemukan atribut SRC dari elemen anak dari tag A. Karena panjang atribut SRC tidak terbatas, ia tidak akan memiliki masalah pemotongan gambar.
3. Terapkan LightBox ke artikel yang ada
Bagian 2 telah berbicara tentang fakta bahwa HTML memiliki format tertentu saat menggunakan Lightbox. Jika gambar dalam artikel yang ada adalah <img src = "img/image.jpg">, itu harus dienkapsulasi dalam satu lapisan:
Salinan kode adalah sebagai berikut:
function initlightbox () {
var imgs = $ (". Lightbox-container"). find ('img');
$ .each (imgs, function (i) {
var img = $ (imgs [i]);
img.wrap ("<a href = '' data-lightbox = 'test'> </a>");
});
}
Di antara mereka, "Lightbox-Container" adalah kelas wadah tempat artikel itu berada. Fungsi InitLightBox harus ditempatkan ketika halaman memuat siap, itu akan merangkum semua tag IMG dalam artikel ke dalam format LightBox.
Itu saja untuk artikel ini. Poin 2 dan 3: Anda dapat menggunakannya dalam skenario penggunaan Anda sendiri. Fokus perubahan Lightbox adalah mendukung penskalaan roda gulir.
Melampirkan LightBox yang dimodifikasi http://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com).rar