Beim Erstellen Ihres eigenen WordPress-Themes müssen Sie einige Punkte berücksichtigen. Ein solches Seitenelement ist eine dynamische Bildergalerie, die entweder eine Lightbox oder eine Art Schieberegler verwendet. Diese beiden Benutzeroberflächen fügen sich nahtlos in den Inhalt eines Artikels ein. Da beide auf typischen Websites arbeiten können, ist es schön, den Code für die Verwendung in einem anderen Blogthema bereit zu haben.
In diesem Tutorial möchte ich mich darauf konzentrieren, den Leuchtkasten-Effekt mit einem Plugin namens jQuery lightBox zu verwenden. Dies ist sehr einfach einzurichten und an Ihre eigene Website anzupassen. Zwar gibt es einige unangenehme Korrekturen im CSS, aber das Plugin funktioniert insgesamt einwandfrei. Es gibt sogar einige alternative Parameter, in denen Sie Eigenschaften wie die Animationsgeschwindigkeit oder Hintergrunddeckkraft angeben können.
Live Demo - Quellcode herunterladen
Fertig machen
Der erste Schritt besteht darin, eine Kopie des Hauptquellcodes von der Plugin-Homepage herunterzuladen. Sie finden diese Dateien auch in meinem Demo-Quellcode oben. Es gibt eine benutzerdefinierte CSS-Datei, mit der die verschiedenen Lightbox-Elemente formatiert werden. Andernfalls enthält die Überschrift des Dokuments andere zusätzliche Abhängigkeiten.
Für dieses Beispiel habe ich eine lokale Kopie der neuesten Version von jQuery heruntergeladen. Dies ist die einzige Voraussetzung, damit dieses lightBox-Plugin reibungslos läuft. Ein weiterer wichtiger Punkt ist das Markup von HTML auf der Seite. Wir müssen die Bildergalerie mit Thumbnails formatieren, die mit dem Bild mit höherer Auflösung verknüpft sind.
Die Syntax ist ziemlich unkompliziert und ich habe ein Beispiel weiter unten kopiert. Dies sollte überall in Ihrem Seitenkörper gehen, und Sie können theoretisch beliebige Elemente für die Miniaturansicht verwenden. Ich bin mit einer ungeordneten Liste gegangen, weil das Schema in einer Liste von zufälligen Dribbble-Aufnahmen Sinn macht.
Der an jedes Bild angehängte Text wird nur angezeigt, wenn die Miniaturansicht noch nicht geladen wurde. Das Titelelement verhält sich jedoch sowohl als Tooltip als auch als Bildunterschrift. Dies ist eine wirklich nette Funktion, wenn Sie die Idee von Galerien mit Untertitel mögen. Sie können den Beschriftungstext auch manuell mithilfe von Funktionsparametern vom Titel festlegen.
CSS anpassen
In der Datei jquery.lightbox-0.5.css Wir können eine Reihe wichtiger Selektoren für die Lightbox-Oberfläche finden. Sie müssen keinen dieser CSS-Code bearbeiten, damit das Plugin funktioniert. Aber ich denke, es lohnt sich zu verstehen, auf welche Seite die einzelnen IDs und Klassen abzielen. Auf diese Weise haben Sie die Möglichkeit, neue CSS3-Effekte hinzuzufügen oder die Größe der Symbole nach Bedarf zu ändern.
Mein typischer CSS-Code ist im Hauptdokument-Stylesheet enthalten. Beachten Sie ganz oben, dass ich einen anderen Selektor für die eingerichtet habe # lightbox-container-image-data-box Element. Dieses Div enthält tatsächlich die Untertiteldaten für das Bild, das eine Dropdown-Animation ausführt. ich benutze Border-Box für alle meine Seitenelemente und dies kann die Beschriftung vermasseln, wo sie nicht richtig angezeigt wird.
Eine schnelle Lösung kann jedoch angewendet werden, indem Sie einfach diesen Container anvisieren und auf zurücksetzen Inhaltsfeld. Dann ist es viel einfacher, dieses Lightbox-Element als normales Verhalten zu erzwingen, das Layout jedoch durch die Verwendung von Randrahmen und Füllungen anzupassen. Abgesehen von diesem Quick-Fix habe ich keine anderen Probleme mit dem Plugin-CSS.
Wie man lightBox () ausführt
Das letzte Segment, das wir untersuchen müssen, ist das Aufrufen dieses Plugins mit seiner JavaScript-Funktion. Es gibt nur einen erforderlichen Selektor, der alle Elemente mit dieser Lightbox-Technik ansprechen soll. Mein Beispiel ist auf alle Ankerlinks innerhalb der #dumbnails Element. Sie könnten noch spezifischer sein und nur Zielverknüpfungen mit bestimmten Klassennamen verwenden.
Beachten Sie, dass die Funktion selbst keine zusätzlichen Parameter erfordert. Dies ist das absolute Grundverhalten des Plugins. Da es so einfach einzurichten ist, können Sie problemlos mehrere separate Galerien generieren, die alle auf derselben Seite laufen! Wenn Sie mehr Zeit haben, schauen Sie sich die zusätzlichen Einstellungen des Plugins an, um eine Vorstellung davon zu bekommen, was noch möglich ist.
Sie können den Schaltflächenstil, die Hintergrunddeckkraft, den Bildtext und vieles mehr anpassen. Nachfolgend finden Sie ein Beispielausschnitt der Website, der nur einige dieser Parameter verwendet. Spielen Sie herum und sehen Sie, was Sie bauen können.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Ich hoffe, dieses Tutorial kann für einige Entwickler da draußen nützlich sein. Ich finde es toll, Bildergalerien in Blogbeiträgen zu finden, da dies eine fantastische Inspirationsquelle sein kann. Es erfordert aber auch viel harte Arbeit und Mühe.Sie müssen von Anfang an einen Plan haben, wie Sie eine saubere und ausgewogene Benutzeroberfläche erstellen möchten. Fühlen Sie sich frei, eine Kopie des Quellcodes herunterzuladen und zu prüfen, ob Sie dieses Plugin für Ihr eigenes Blog oder Website-Layout umgestalten können.