Wenn Sie Webseiten vom Typ Artikel erstellen, müssen Sie häufig auf die Anzeige großer Bilder stoßen. Lightbox2 ist ein relativ ausgezeichnetes JQuery-Plug-In unter vielen Produkten. Ich werde nicht auf Details zur Konfiguration eingehen. Heute möchte ich hauptsächlich teilen: So zoomen Sie das Bild durch das Maus -Scroll -Rad, nachdem Sie auf das große Bild geklickt haben.
1. Ändern Sie den Lightbox -Quellcode, um die Skalierung von Scroll -Rad zu unterstützen
Die Unterstützung von Mausrädern binden hauptsächlich die gesamte Popup-Box an das Mausrad-Ereignis, Open Lightbox.js, und finden Sie lightbox.prototype.build = function () {...}. Sie können das gewünschte Bildlaufradereignis hier binden (wenn Lightbox initialisiert wird), z. B. den folgenden Code am Ende der Funktion hinzufügen:
Die Codekopie lautet wie folgt:
// Bildradzoom
this.img = this. $ container.find ('. LB-Image');
this.label = this. $ lightbox.find ('. lb-datacontainer');
$ ([this. $ Overlay [0], this. $ lightbox [0]]). Bind ("Mausrad", Funktion (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. $ obercontainer.height ();
var ctw = self. $ otercontainer.width ();
var layh = self. $ obere.height ()-20;
var layw = self. $ operay.width ()-20;
// Runter
if (flag && imgh> 20 && imgw> 20) {
self.img.css ('Höhe', imgh - 20);
self.img.css ('width', imgw - nw);
self. $ otercontainer.css ('Höhe', Cth - 20);
self. $ outercontainer.css ('width', ctw - nW);
if (ctw-nw> 240) {
self.label.css ('width', ctw - nW);
}
} else if (! Flag && imgh <layh && imgw <layw) {
self.img.css ('Höhe', imgh + 20);
self.img.css ('width', imgw + nw);
self. $ otercontainer.css ('Höhe', Cth + 20);
self. $ obercontainer.css ('width', ctw + nw);
self.label.css ('width', ctw + nw);
}
E.Stoppropagation ();
false zurückgeben;
});
Der Code ist leichter zu verstehen, was zum Hinzufügen von Mausradüberwachung zum Hintergrund und dem Frontbild und dann die Höhe und die Breite proportional skaliert wird (rollen Sie nach oben, um zu zoomen, nach unten zu scrollen, um herauszureisen). Ich stelle die Höhenänderung jedes Mal auf 20 Pixel und dann ändert sich die Breite proportional. Beachten Sie, dass die Mindestgröße des Bildes reduziert werden sollte und die Bildvergrößerung die Bildschirmbereichsgrenze nicht überschreiten darf. Gleichzeitig müssen Sie für eine bessere Erfahrung E.StopPropagation () und False zurückgeben, um zu verhindern, dass der Browser scrollen.
2. Ändern Sie den Lightbox -Quellcode, um Base64 -Bilder zu unterstützen
Es kann schwieriger sein, hier zu sprechen. Schauen wir uns zunächst die Anforderungen an das HTML -Codeformat an, wenn Sie native Lightbox verwenden:
Die Codekopie lautet wie folgt:
<a href = "img/image.jpg" data-lightbox = "test"> bild #1 </a>
Dies ist das einfachste Pop-up-Bild. Wenn Sie auf Bild Nr. 1 klicken, wird eine Lightbox angezeigt, um den Inhalt von IMG/Image.jpg anzuzeigen (ein Element <img Src = "img/image.jpg"/>).
Betrachten wir diese Situation nun, wenn das Bild in Base64 auf dem Server codiert und in der Datenbank gespeichert ist? Es sollte so sein:
Die Codekopie lautet wie folgt:
<a href = "Daten: Bild/Png; Base64, IVBORW ..." Data-Lightbox = "Test"> Bild #1 </a>
Das Problem ist, dass die Länge von HREF unter dem IE begrenzt ist. Ein großes Bild kann nicht im Href -Feld platziert werden, und das Bild wird kastriert (nur der obere Teil wird angezeigt).
Es gibt eine weitere gemeinsame Situation. Wenn ich das kleine Bild zum ersten Mal anzeige und auf das kleine Bild klicke, um das große Bild zu sehen, sollte es so sein:
Die Codekopie lautet wie folgt:
<a href = "Daten: Bild/png; Base64, IVBORW ..." data-lightbox = "test">
<img Src = "Daten: Bild /Png; Base64, Ivborw ..." />
</a>
OK, es gibt zwei doppelte Base64 -Daten, die alle von der Serverseite gesendet werden, die Zeit und Bandbreite konsumieren.
Daher habe ich es gemäß meinen Anforderungen geändert, der Code ist sehr einfach, die Unterfunktion in Lightbox.Prototype.start = Funktion ($ link) {...} addtoAlbum:
Die Codekopie 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 kommentierte Teil ist das Original. $ link ist das A -Tag im vorherigen HTML -Code. Nach der Modifikation lautet die Funktion der AddtoAlbum -Funktion: Beim Einstellen des SRC zum Aufpacken des Bildes nimmt sie keine Zeichen mehr aus dem ursprünglichen HREF als SRC zum Aufheben des IMG -Tags, sondern findet das SRC -Attribut direkt aus den untergeordneten Elementen des A -Tags. Da die Länge des SRC -Attributs unbegrenzt ist, wird es nicht das Problem der Bildkürzung haben.
3. Anwenden Sie Lightbox auf vorhandene Artikel an
Abschnitt 2 hat bereits darüber gesprochen, dass HTML bei der Verwendung von Lightbox über ein bestimmtes Format verfügt. Wenn die Bilder im vorhandenen Artikel <img src = "img/image.jpg"> sind, muss es in einer Ebene eingekapselt werden:
Die Codekopie lautet wie folgt:
Funktion initlightbox () {
var imgs = $ (". Lightbox-Container"). Find ('img');
$ .each (IMGS, Funktion (i) {
var img = $ (IMGS [i]);
img.wrap ("<a href = '' data-lightbox = 'test'> </a>");
});
}
Unter ihnen ist "Lightbox-Container" die Klasse des Behälters, in dem sich der Artikel befindet. Die Funktion "Initlightbox" sollte platziert werden, wenn die Seite geladen wird. Sie werden alle IMG -Tags im Artikel in das Lightbox -Format zusammengefasst.
Das ist alles für diesen Artikel. Punkte 2 und 3: Sie können es in Ihren eigenen Nutzungsszenarien verwenden. Der Schwerpunkt von Lightbox -Änderungen liegt auf der Unterstützung der Scaling von Scroll -Rad.
Angehängt die modifizierte Lightbox http://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com).rar