Lightbox, Modal und Overlay Plugins gibt es wie Sand am Meer. Das erspart zwar in den meisten Fällen das Programmieren einer eigenen Lösung, macht aber die Wahl bei hohen Ansprüchen zur Qual. Mit Magnific Popup mache ich schon seit einigen Projekten gute Erfahrungen - zeit dieses jQuery Plugin einmal vorzustellen.
Features
- Responsive und performance orientiert
- Neben jQuery läuft Magnific Popup auch mit Zepto.js
- Nicht nur Bilder, sondern auch HTML-Inhalte können dargestellt werden. Modale oder andere klassische Overlay-Anforderungen sind somit kein Problem
- Die Option auf einen kleinen Screen zu einer optimierten Ansicht zu wechseln
- Retina Support
- Alle grafischen Elemente sind, wie die Animationen auch, per CSS gelöst
- u.v.m.
Anwendung
Nachdem das Magnific Popup Script und CSS eingebunden ist, lässt sich die Lightbox bequem zuweisen:
$('.overlay-link').magnificPopup({
type: 'image'
/* weiter Optionen */
});Der type: 'image' gibt in dem Fall dem Plugin die Info, dass es sich um ein ganz normales Bild handelt das wir in groß darstellen möchten. Die Quelle des großen Bildes wird im href Attribut des Links angegeben. Neben dem Image-Type gibt es auch noch z. B. auch den ajax -Type, oder iframe Type. Diese Types ermöglichen es, die im href Attribut referenzierte URL in einem Overlay darzustellen.
Callbacks
Sehr nützlich ist die Möglichkeit nach dem Ausführen des Overlays eigenen Code anzuhängen. Callbacks lassen sich mit Magnific-Popup leicht nutzen:
$('.overlay-link').magnificPopup({
type:'image',
callbacks: {
elementParse: function(item) {
// Das item-Objekt wird jedem Klick neu gesetzt und entspricht dem geklickten Element
// Die Werte des Objekts lassen sich somit manipulieren. Beispiele:
// "item.el" ist das DOM-Element
// "item.src" ist die Datenquelle des DOM-Elements
}
}
});Fazit
Magnific-Popup erfüllt die Anforderungen an ein modernes Overlay-Plugin und lässt sich flexibel nutzen und anpassen. Ich wünsche viel Spaß beim Experimentieren mit den Zahlreichen Möglichkeiten.