So stellen Sie sicher, dass Ihre Lightbox Wheel-Zoom und Base64 images_jquery unterstützt

Bei der Erstellung artikelartiger Webseiten müssen Sie häufig die wichtigsten Punkte öffnen, um das Gesamtbild zu sehen. LightBox2 ist unter vielen Produkten ein hervorragendes JQuery-Plug-In. Auf die Konfiguration möchte ich heute vor allem nicht näher eingehen: Wie man das Bild mit dem Mausrad vergrößert und verkleinert, nachdem man auf das große Bild geklickt hat,

1. Ändern Sie den Lightbox-Quellcode, um den Radzoom zu unterstützen

Die wichtigste Möglichkeit, das Mausrad zu unterstützen, besteht darin, die gesamte Popup-Box an das Mousewheel-Ereignis zu binden. Öffnen Sie lightbox.js und suchen Sie den Abschnitt Lightbox.prototype.build = function() {...}, der dies kann finden Sie hier (Lightbox-Initialisierungszeit) Binden Sie das gewünschte Scrollrad-Ereignis, fügen Sie beispielsweise den folgenden Code am Ende der Funktion hinzu:

Code kopieren Der Code lautet wie folgt:

// Bild-Scrollrad-Zoom
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 imgW = self.img.width();
          var nw = Math.round(20*imgW/imgH);
          var ctH = self.$outerContainer.height();
          var ctW = self.$outerContainer.width();
          varlayH = self.$overlay.height()-20;
          varlayW = self.$overlay.width()-20;
                                   // Runter
If(flag && imgH>20 && imgW>20) {
                   self.img.css('height', imgH - 20);
                    self.img.css('width', imgW - nw);
                    self.$outerContainer.css('height', ctH - 20);
                     self.$outerContainer.css('width', ctW - nw);
If(ctW-nw > 240){
                               self.label.css('width', ctW - nw);
                }
                   } else if(!flag && imgH                     self.img.css('height', imgH 20);
                    self.img.css('width', imgW nw);
                    self.$outerContainer.css('height', ctH 20);
                    self.$outerContainer.css('width', ctW nw);
                   self.label.css('width', ctW nw);
                                                                                                                             e.stopPropagation();
            return false;
});

Der Code ist einfacher zu verstehen. Er besteht darin, sowohl dem Hintergrund als auch dem Vorderbild eine Mausradüberwachung hinzuzufügen und dann die Höhe und Breite proportional zu skalieren (zum Vergrößern nach oben scrollen, zum Verkleinern nach unten scrollen). Jede Höhe ändert sich auf 20 Pixel, dann ändert sich die Breite proportional. Was beachtet werden muss, ist die minimale Verkleinerung des Bildes, und die Vergrößerung des Bildes darf die Grenze des Bildschirmbereichs nicht überschreiten. Stellen Sie gleichzeitig für ein besseres Erlebnis sicher, dass Sie e.stopPropagation() hinzufügen und false zurückgeben, um zu verhindern, dass der Browser scrollt.

2. Ändern Sie den Lightbox-Quellcode, um Base64-Bilder zu unterstützen

Es kann schwierig sein, hier darüber zu sprechen. Werfen wir zunächst einen Blick auf die Anforderungen an das HTML-Codeformat bei Verwendung von nativem Lightbox:

Code kopieren Der Code lautet wie folgt:

Bild #1

Dies ist das einfachste Popup-Bild. Wenn Sie auf Bild Nr. 1 klicken, wird ein Leuchtkasten angezeigt, um den Inhalt von img/image.jpg anzuzeigen (Popup-Element Betrachten wir nun diese Situation: Wenn das Bild auf dem Server in Base64 codiert ist, wird es dann in der Datenbank gespeichert? Das sollte es sein:

Code kopieren Der Code lautet wie folgt:

Bild #1

Hier kommt das Problem: Die href-Länge ist im IE begrenzt. Es ist nicht möglich, ein großes Bild in das href-Feld einzufügen, und das Bild wird kastriert (nur der obere Teil wird angezeigt).
Es gibt noch eine weitere häufige Situation: Wenn ich zuerst das kleine Bild zeige und auf das kleine Bild klicke, um das große Bild zu sehen, sollte es so aussehen:

Code kopieren Der Code lautet wie folgt:

Okay, es gibt zwei doppelte Base64-Daten, und beide werden vom Server übertragen, was zeitaufwändig und bandbreitenintensiv ist.
Also habe ich es entsprechend meinen Bedürfnissen geändert. Ändern Sie die Unterfunktion addToAlbum:

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

Code kopieren Der Code lautet wie folgt:

Funktion addToAlbum($link) {
          self.album.push({
// Link: $link.attr('href'),
            Link: $link.children().attr("src"),
Titel: $link.attr('data-title') || $link.attr('title')
});
}

Der auskommentierte Teil ist das Original, $link ist das a-Tag im vorherigen HTML-Code, die Funktion der addToAlbum-Funktion nach der Änderung ist: Beim Festlegen der Quelle des Popup-Bildes werden keine Zeichen mehr verwendet vom ursprünglichen href als Popup-src des img-Tags, aber finden Sie das src-Attribut direkt aus dem Unterelement des a-Tags. Da die Länge des src-Attributs unbegrenzt ist, verursacht es nicht das Problem der Bildkürzung .

3. Lightbox auf vorhandene Artikel anwenden

In Abschnitt 2 wurde bereits erwähnt, dass HTML bei der Verwendung von Lightbox ein bestimmtes Format hat. Wenn die Bilder in den vorhandenen Artikeln wie sind, müssen sie geändert werden:

Code kopieren Der Code lautet wie folgt:

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

Unter diesen ist „lightbox-container“ die Klasse des Containers, in dem sich der Artikel befindet. Die initLightbox-Funktion sollte platziert werden, wenn die Seite zum Laden bereit ist. Sie kapselt alle IMG-Tags im Artikel im Lightbox-Format.

Das ist alles für die Punkte 2 und 3, Sie können sie entsprechend Ihren eigenen Nutzungsszenarien verwenden. Der Schwerpunkt der Lightbox-Änderungen liegt auf der Unterstützung des Scrollrad-Zooms.

Anbei ist der modifizierte Leuchtkasten http://xiazai.jb51.net/201412/yuanma/lightbox(jb51.net).rar