Cara membuat zum roda sokongan Peti Cahaya anda dan Base64 images_jquery

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

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di ​​manakah & bagaimana untuk melindunginya?

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7338

9

Tutorial Java

1627

14

Tutorial CakePHP

1352

46

Tutorial Laravel

1265

25

Tutorial PHP

1210

29

Tunjukkan Lagi