Super Simple Lightbox mit CSS und jQuery

Anstatt ein aufgeblähtes Plugin zu verwenden, das Funktionen enthält, die Sie nie verwenden werden, zeigt Ihnen dieses Tutorial, wie Sie eine sehr einfache Lightbox für den Umgang mit Bildern erstellen. Ideal für Bildergalerien, Portfolios und mehr!

Schritt 1: Der Markup

Öffnen Sie Ihren bevorzugten Texteditor (ich verwende Coda) und beginnen Sie mit unserem HTML-Markup.

Hinweis: Wenn Sie keinen richtigen DOCTYPE-Code angeben und die Seite im Quirks-Modus dargestellt wird, wird die Lightbox in Internet Explorer nicht richtig angezeigt.

   Einfache Lightbox    Super einfache Lightbox
 Unsere super einfache Lightbox Demo. Hier sind die Bildlinks: 
   Bild 1  
   Bild 2  
   Bild 3

Hinweis: Wir haben die Klasse benutzt Lightbox_auslöser Auf jedem Link mit einem Bild, das wir in unserer Lightbox anzeigen möchten. Dies ist nützlich, wenn wir diese Elemente in dem Skript, das wir schreiben werden, anvisieren möchten.

Schritt 2: Das CSS

Lassen Sie uns einige grundlegende CSS-Stile auf unserer Seite anwenden. Für dieses grundlegende Beispiel werden wir unser gesamtes CSS in einfügen Tags innerhalb der Sektion.

body margin: 0; Polsterung: 0; Hintergrund: #efefef; Text ausrichten: Mitte; / * zum Zentrieren von div in IE * / #wrapper width: 600px; Marge: 0 auto; / * zentriert das div horizontal in allen Browsern (außer IE) * / background: #fff; Text ausrichten: links; / * Setzt die Textausrichtung vom Body-Tag zurück. * / border: 1px solid #ccc; Rand oben: keine; Polsterung: 25px; / * Fügen wir einige CSS3-Stile hinzu, die sich in älteren Browsern und im IE * / border-radius grausam verschlechtern: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; Box-Schatten: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc;

Jetzt haben wir eine einfache, aber elegante Seite, auf der wir unser Leuchtkastenfenster testen können.

Schritt 3: Hinweise zu CSS in Internet Explorer

Wir verwendeten Marge: 0 auto; um unseren #wrapper div horizontal auf der Seite zu zentrieren. Das funktioniert prima für alle Browser außer… Trommelwirbel… Sie haben es erraten, Internet Explorer. Um dieses Problem zu beheben, haben wir verwendet Text ausrichten: Mitte; auf dem body-Tag, der untergeordnete divs (in unserem Fall das #wrapper-div) horizontal auf der Seite zentriert.

Jedoch mit Text ausrichten: Mitte; Auf dem body-Tag wird der gesamte Text in untergeordneten Divs zentriert. Um dies zu beheben, setzen wir zurück Text ausrichten: links; Im #wrapper div können Sie alle weiteren untergeordneten Inhalte in der linken Ausrichtung wiederherstellen. Besuchen Sie communitymx.com, wenn Sie mehr über dieses spezielle IE-Problem erfahren möchten.

Schritt 4: Lightbox HTML

So sieht unser Lightbox-HTML-Markup aus. Fügen Sie es jedoch nicht in das HTML-Markup ein. Wir werden das mit jQuery dynamisch tun. Wenn Sie das Leuchtkasten-HTML-Markup verstehen, können wir es mit CSS entsprechend formatieren.

 Klicken Sie zum Schließen

Hinweis: Es gibt keinen Wert für das Bild src denn das hängt davon ab, auf welchen Link der Benutzer geklickt hat. Daher verwenden wir Javascript, um den Wert später dynamisch einzufügen.

Schritt 5: Lightbox CSS Black Overlay

Lassen Sie uns das CSS für unsere Lightbox einfügen. Wenn Sie dies jetzt tun, werden unsere Seitenelemente später korrekt angezeigt, wenn Sie unseren HTML-Code dynamisch einfügen.

Zuerst haben wir unsere #lightbox div, die als schwarzes Overlay fungiert. Wir möchten, dass dies das gesamte Ansichtsfenster des Benutzers ausfüllt, unabhängig von der Bildschirmauflösung.

#lightbox position: fixiert; / * behält das Leuchtkastenfenster im aktuellen Ansichtsfenster * / top: 0; links: 0; Breite: 100%; Höhe: 100%; Hintergrund: URL (overlay.png) Wiederholung; Text ausrichten: Mitte;

Das CSS ist ziemlich unkompliziert. Hier einige Highlights:

Position: feststehend bewirkt, dass unser Overlay im aktuellen Ansichtsfenster korrekt angezeigt wird, unabhängig von der Position des Benutzers auf dem Bildschirm (oben oder unten auf der Seite). Hier ist es sinnvoll, den richtigen DOCTYPE zu verwenden. Wenn der IE aufgrund des falschen DOCTYPE (oder gar nicht) im Quirks-Modus ausgeführt wird, wird unsere Überlagerung nicht richtig angezeigt.
Breite: 100%; Höhe: 100%; Damit deckt unsere #lightbox div, die als schwarzes Overlay fungiert, den gesamten Ansichtsbereich ab, unabhängig von der Bildschirmauflösung des Endbenutzers.
Hintergrund: URL (overlay.png) Wiederholung; Wir hätten RGBa-Farbe verwenden können, um unsere Hintergrundfarbe leicht transparent zu machen. Das hätte so etwas verlangt Hintergrund: rgba (0,0,0, .7);. Da diese Eigenschaft jedoch relativ neu ist, funktioniert die Hintergrundfarbentransparenz in IE nicht (es sei denn, Sie wenden bestimmte Hacks an). Anstatt CSS3- und IE-Hacks zu verwenden, erstellen wir in Photoshop einfach ein 1x1-Pixel-PNG mit schwarzem Hintergrund und setzen die Transparenz auf etwa 75 Prozent.

Schritt 6: Lightbox CSS-Benutzeranleitung

Um sicherzustellen, dass unsere Benutzer nicht verwirrt sind, fügen wir der Lightbox-Überlagerung Text hinzu, der besagt, dass sie irgendwo klicken können, um das Lightbox-Fenster auszublenden.

#lightbox p text-align: right; Farbe: #fff; Rand rechts: 20px; Schriftgröße: 12px;

Schritt 7: Lightbox-CSS-Bild

Nun möchten wir das Bild formatieren, das in der Lightbox angezeigt wird. Ich werde einfach einige CSS3-Effekte geben. Diese werden in IE und älteren Browsern offensichtlich nicht angezeigt, aber sie werden immer noch graziös abgebaut. Wenn Sie möchten, können Sie hier weitere Effekte hinzufügen, z. B. einen weißen Rand um das Bild.

#lightbox img box-shadow: 0 0 25px # 111; -webkit-box-shadow: 0 0 25px # 111; -moz-box-shadow: 0 0 25px # 111; Max-Breite: 940px;

Hinweis:Hinzufügen eines maximale Breite verkleinert alle Bilder mit hoher Auflösung, auf die wir möglicherweise verlinken. Dies hilft sicherzustellen, dass alle Bilder in das Ansichtsfenster passen.

So würde unsere Seite jetzt aussehen, wenn wir unseren Leuchtkasten-HTML-Code in das Dokument einfügen würden (wir machen das mit Javascript):

Bild mit freundlicher Genehmigung von CSS Lounge Photostream auf Flickr

Schritt 8: Ermitteln der Logik

Wenn der Benutzer auf einen Link zu einem Bild klickt, möchten wir das Bild in einer Lightbox anzeigen. Dazu möchten wir zunächst die Logik hinter unserer Funktionalität bestimmen:

Der Benutzer klickt mit der Klasse Lightbox_auslöser
- Verhindern, dass der Browser dem Link standardmäßig folgt
- Sehen Sie, ob die Leuchtkasten div ist bereits im Dokument
  - Wenn es existiert:
    - Finden und Bestehendes img tag in der Inhalt div.
    - Ersetzen Sie das Bild src Wert mit der href Wert des Links, auf den der Link geklickt wurde.
  - Wenn es nicht existiert:
    - Fügen Sie die Lightbox-Markierung in die Seite mit den Bildern ein src Wert auf den Wert gesetzt href Wert des Links, auf den der Link geklickt wurde
Klicken Sie auf die Lightbox (wenn angezeigt), um sie zu verschwinden

Schritt 9: Javascript mit jQuery

Nachdem wir nun HTML-Markup, CSS-Stil und Javascript-Logik haben, ist es an der Zeit, sich mit dem Code zu beschäftigen und unsere Funktionalität zum Laufen zu bringen.

Zuerst schließen wir die jQuery-Bibliothek ein. Ich füge es gerne kurz vor dem Schließen hinzu Karosserie Tag mit der gehosteten Version von jQuery.

Schritt 10: Javascript Custom Script

Lassen Sie uns unseren Code einpacken Skript Tags und jQuery's document.ready

Wir werden unser benutzerdefiniertes Skript direkt nach dem Einbinden der jQuery-Bibliothek einbinden. Wir richten unsere jQuery-Funktion mit dem Dollarzeichen "$" im Funktionsparameter ein. Auf diese Weise müssen wir nicht jedes Mal "jQuery" schreiben, wenn wir die jQuery-Funktion verwenden möchten. Stattdessen können wir einfach "$" verwenden..

Schritt 11: Javascript `Lightbox_auslöser` Funktion

Wie bereits in Schritt 1 erläutert, haben wir jedem verknüpften Bild, das die Lightbox verwendet, eine Klasse von zugewiesen Lightbox_auslöser. In unserem Skript erstellen wir eine Funktion, die jedes Mal eine Verknüpfung mit der Klasse auslöst Lightbox_auslöser geklickt wird.

$ ('. lightbox_trigger'). click (Funktion (e) // Code, durch den die Lightbox angezeigt wird);

Schritt 12: Javascript in der Funktion

Erstens möchten wir die Standardaktion verhindern. Dadurch wird verhindert, dass der Browser das verknüpfte Bild auf einer neuen Seite öffnet. (Um zu sehen, warum wir verwenden Standard verhindern() Klick hier

e.preventDefault ();

Als nächstes bekommen wir die href Das Bild wird in der Lightbox über den Link angezeigt, auf den geklickt wurde

var image_href = $ (this) .attr ("href");

Hier kommt unsere vorgegebene Logik wirklich ins Spiel. Da wir den Leuchtkasten-HTML-Code dynamisch einfügen, möchten wir zunächst prüfen, ob er bereits im Dokument vorhanden ist. Wir führen also eine if / else-Anweisung aus.

Ob

Wenn die Leuchtkasten div existiert, ersetzen wir das img tag in der Inhalt div. Wir werden auch sicherstellen, dass src Der Wert des Image-Tags wird so eingestellt, dass er mit dem übereinstimmt href von welchem Link auch immer geklickt wurde.

if ($ ('# lightbox'). length> 0) // #lightbox ist vorhanden // Img-Tag mit angeklickter href des Links wird als src-Wert $ ('# content'). html ('eingefügt.'); // Lightbox-Fenster anzeigen - Sie können hier einen Übergang verwenden, wenn Sie möchten, d. h. show ('fast') $ ('# lightbox'). show ();

Sonst

Falls unser Leuchtkasten div kann nicht im Dokument gefunden werden, wir erstellen es und fügen es ein. Dies wird nur ausgeführt, wenn zum ersten Mal auf einen Leuchtkasten-Link geklickt wird.

else // # lightbox existiert nicht // erstellt HTML-Markup für das Lightbox-Fenster var lightbox = ''+'Klicken Sie zum Schließen
'+''+ // füge den Link des geklickten Links in img src ein''+'
'+'
'; // füge Lightbox-HTML in Seite $ ('body') ein. anfügen (Leuchtkasten);

Schritt 13: Javascript das Lightbox-Fenster ausblenden

Zuletzt möchten wir das Leuchtkastenfenster ausblenden, wenn der Benutzer darauf klickt. Weil das div Leuchtkasten Nachdem der DOM bereits erstellt wurde (die Seite wurde bereits geladen), müssen wir jQuery mitteilen, dass wir ein neues div in unsere Seite einfügen und auf Klicks auf diese neuen Elemente achten. Wir machen dies, indem wir .live () statt .click () verwenden.

$ ('# lightbox'). live ('click', function () $ ('# lightbox'). hide (););

Schritt 14: Javascript Final Code

Nun, da wir unser Leuchtkasten-Skript untersucht haben, sieht das Ganze so aus:

Endprodukt

Bild mit freundlicher Genehmigung von CSS Lounge Photostream auf Flickr

Das ist es! Jetzt haben Sie eine leichte Lightbox-Lösung zum Anzeigen von Bildern. Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie haben etwas Neues gelernt! Danke fürs Lesen.

Premium-Optionen

In diesem Tutorial haben Sie den Do-it-Yourself-Ansatz kennen gelernt. Wenn Sie jedoch eine fertige Lösung bevorzugen, bietet Envato Market eine Vielzahl von Lightbox-Plugins an. Hier ist eine Auswahl der beliebtesten:

1. Lightbox Evolution für WordPress

Lightbox Evolution ist ein Tool zum Anzeigen von Bildern, HTML-Inhalten, Karten und Videos in einem "Leuchtkasten" -Stil, der über die Webseite hinausragt. Mit Lightbox Evolution können Website-Autoren eine breite Palette von Medien in allen gängigen Browsern präsentieren, ohne die Benutzer von der Verknüpfungsseite wegzuleiten. Es gibt auch eine jQuery-Version.

Lightbox Evolution für WordPress

2. iLightBox · Revolutionäres Lightbox-Plugin

Mit der iLightBox können Sie mit Hilfe der jQuery-JavaScript-Bibliothek auf einfache Weise die schönsten responsiven Overlay-Fenster erstellen. Durch die Kombination einer breiten Palette von Medien mit großartigen Skins und einer benutzerfreundlichen API möchte iLightBox das Lightbox-Konzept so weit wie möglich vorantreiben.

iLightBox · Revolutionäres Lightbox-Plugin

3. PopupPress - Popups mit Slider & Lightbox für WP

PopupPress ist ein Wordpress-Plugin, mit dem Sie auf einfache Weise elegante überlappende Fenster erstellen können. Dieses Plugin ist dazu gedacht, beliebige Inhalte in ein Popup der schnellsten und einfachsten Art auf jeder Seite von WordPress einzufügen. Es hat auch eine einfache Systemstatistik für die Anzahl der Ansichten der Popups.

PopupPress - Popups mit Slider & Lightbox für WP

Web-Design