Rumah > Artikel > hujung hadapan web > Cara membuat zum roda sokongan Peti Cahaya anda dan Base64 images_jquery
Cara membuat zum roda sokongan Peti Cahaya anda dan Base64 images_jquery
- WBOYasal
- 2016-05-16 16:29:121922semak imbas
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:
// 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('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:
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:
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:
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:
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.
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
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional