Cara membuat zum roda sokongan Peti Cahaya anda dan Base64 images

Apabila membuat halaman web jenis artikel, anda sering menghadapi keperluan untuk membuka perkara utama untuk melihat gambaran besar LightBox2 ialah pemalam Jquery yang sangat baik di antara banyak produk. Saya tidak akan menerangkan secara terperinci tentang konfigurasi Apa yang saya ingin kongsikan hari ini ialah: cara mengezum masuk dan keluar daripada imej melalui roda tetikus selepas mengklik pada imej besar,

1. Ubah suai kod sumber Peti Cahaya untuk menyokong zum roda

Cara utama untuk menyokong roda tetikus adalah dengan mengikat keseluruhan kotak pop timbul ke acara roda tetikus Buka lightbox.js dan cari bahagian Lightbox.prototype.build = function() {...}, yang boleh ditemui di sini (masa permulaan peti cahaya) Ikat acara roda skrol yang diingini, contohnya, tambah kod berikut pada penghujung fungsi:

Salin kod Kod adalah seperti berikut:

// Zum roda skrol imej
This.img = this.$container.find('.lb-image');
This.label = this.$lightbox.find('.lb-dataContainer');
         $([this.$overlay[0],this.$lightbox[0]]).bind("mousewheel", function(e){
var flag= e.originalEvent.wheelDelta < 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;
                                    // Bawah
If(bendera && imgH>20 && imgW>20) {
                   self.img.css('ketinggian', imgH - 20);
                    self.img.css('lebar', imgW - nw);
                    diri sendiri.$outerContainer.css('ketinggian', ctH - 20);
                     diri sendiri.$outerContainer.css('lebar', ctW - nw);
Jika(ctW-nw > 240){
                               self.label.css('lebar', ctW - nw);
                }
                   } lain jika(!flag && imgH                     self.img.css('ketinggian', imgH 20);
                    self.img.css('lebar', imgW nw);
                    diri.$outerContainer.css('ketinggian', ctH 20);
                    diri sendiri.$outerContainer.css('lebar', ctW nw);
                   self.label.css('lebar', ctW nw);
                                                                                                                                                                                                                                        e.stopPropagation();
            pulangan palsu;
});

Kod lebih mudah difahami Ia adalah untuk menambah pemantauan roda tetikus pada kedua-dua latar belakang dan imej hadapan, dan kemudian skala ketinggian dan lebar secara berkadar (tatal ke atas untuk zum masuk, tatal ke bawah untuk zum keluar). setiap ketinggian berubah kepada 20 piksel, kemudian lebar berubah secara berkadar. Apa yang perlu diberi perhatian ialah saiz minimum imej yang dikurangkan, dan pembesaran imej tidak boleh melebihi had julat skrin. Pada masa yang sama, untuk pengalaman yang lebih baik, pastikan anda menambah e.stopPropagation() dan mengembalikan palsu untuk menghalang penyemak imbas daripada menatal.

2 Ubah suai kod sumber Peti Cahaya untuk menyokong imej Base64

Mungkin menyusahkan untuk dibincangkan di sini Mari kita lihat dahulu keperluan format kod html apabila menggunakan Peti Cahaya asli:

Salin kod Kod adalah seperti berikut:

Imej #1

Ini ialah imej pop timbul yang paling ringkas Apabila anda mengklik pada Imej #1, kotak cahaya akan muncul untuk memaparkan kandungan img/image.jpg (pop up elemen Sekarang mari kita pertimbangkan situasi ini Jika imej dikodkan dalam Base64 pada pelayan, adakah ia disimpan dalam pangkalan data? Ini sepatutnya:

Salin kod Kod adalah seperti berikut:

Imej #1

Inilah masalahnya, panjang href adalah terhad di bawah IE Tidak mustahil untuk meletakkan gambar besar dalam medan href, dan gambar akan dikebiri (hanya bahagian atas akan dipaparkan).
Terdapat satu lagi situasi biasa Jika saya memaparkan gambar kecil dahulu dan klik pada gambar kecil untuk melihat gambar besar, ia sepatutnya seperti ini:

Salin kod Kod adalah seperti berikut:

Okay, terdapat dua data base64 pendua, dan kedua-duanya dihantar dari pelayan, yang memakan masa dan intensif lebar jalur.
Jadi saya mengubah suai mengikut keperluan saya Kod ini sangat mudah Ubah suai sub-fungsi addToAlbum:

dalam Lightbox.prototype.start = function($link) {...}

Salin kod Kod adalah seperti berikut:

Fungsi addToAlbum($link) {

          self.album.push({

// pautan: $link.attr('href'),

            pautan: $link.children().attr("src"),

Tajuk: $link.attr('data-title') ||. $link.attr('title')

});

}

Bahagian yang dikomen adalah asal, $link ialah teg dalam kod HTML sebelumnya, fungsi fungsi addToAlbum selepas perubahan ialah: apabila menetapkan src imej pop timbul, aksara tidak lagi diambil daripada href asal sebagai src pop timbul bagi teg img, tetapi terus mencari atribut src daripada sub-elemen teg a Memandangkan panjang atribut src adalah tidak terhad, ia tidak akan menyebabkan masalah pemotongan imej .

3. Gunakan Lightbox pada artikel sedia ada

Bahagian 2 telah menyebut bahawa HTML mempunyai format tertentu apabila menggunakan Peti Cahaya Jika gambar dalam artikel sedia ada adalah seperti , ia mesti diubah suai.

Salin kod Kod adalah seperti berikut:

fungsi initLightbox(){
var imgs = $(".lightbox-container").find('img');
$.each(imgs,function(i) {
var img = $(imgs[i]);
img.wrap(""); });
}

Antaranya, "lightbox-container" ialah kelas bekas tempat artikel itu berada. Fungsi initLightbox hendaklah diletakkan apabila halaman sedia untuk dimuatkan Ia akan merangkum semua teg img dalam artikel ke dalam format peti cahaya.

Itu sahaja untuk artikel ini untuk mata 2 dan 3, anda boleh menggunakannya mengikut senario penggunaan anda sendiri.

Lampirkan peti cahaya yang diubah suai http://xiazai.jb51.net/201412/yuanma/lightbox(jb51.net).rar

Label berkaitan：

lightbox

sumber：php.cn

Artikel sebelumnya：JavaScript menggunakan ungkapan biasa untuk mengesan alamat IP_petua javascript Artikel seterusnya：Ringkasan kaedah untuk mencipta objek tersuai dalam petua Javascript_javascript

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang