Animierte GIF-Bilder sind im Internet sehr beliebt, da sie schnell geteilt und schnell verwendet werden können. Mithilfe von Basis-HTML können Sie Bilder in eine Seite mit Animationen einbetten, ohne sich auf andere Technologien zu verlassen. Zugegeben - es gibt Plugins zum Animieren von Sprites oder Hintergründen - aber GIFs sind ein völlig anderes Konzept.
In diesem Tutorial möchte ich zeigen, wie wir eine Bildergalerie erstellen können, die die Anzeige von animierten Bildern optimiert. Auf Giphy ist eine sehr ähnliche Funktion zu sehen, bei der ich auch die Bilder für meine Demo heruntergeladen habe. Ich programmiere meine eigene Methode, die nicht exakt dem gleichen Prozess wie Giphy folgt - aber das Endergebnis ist praktisch identisch und funktioniert für alle modernen Browser hervorragend.
Live Demo - Quellcode herunterladen
Fertig machen
Zunächst sollten wir eine lokale Kopie von jQuery herunterladen und diese zusammen mit den anderen Projektdateien speichern. Ich erstelle eine Indexseite zusammen mit einem externen Stylesheet namens styles.css.
Jetzt erstelle ich im Körper eine ungeordnete Liste von Bildelementen. Da diese Miniaturen alle unterschiedliche Größen haben, wird die Anzeige je nach Bildgröße unterschiedlich aussehen. Ich benutze HTML Breite und Höhe Attribute zum Einrichten benutzerdefinierter Werte. Es gibt zusätzliche Zeit für das Laden der Miniaturbilder, sodass das GIF selbst nicht zu sehr nachlässt.
Dieses Codebeispiel enthält nur zwei Elemente aus der gesamten Liste. Für jedes Bild habe ich eine Kopie der animierten GIF sowie eine JPG-Miniaturansicht gespeichert. Dieses Miniaturobjekt wird von einem Ankerlink umschlossen, der auf das animierte GIF-Bild zeigt. Wenn der Benutzer nun auf ein Miniaturbild klickt, führt dies direkt zur Animation.
Aber genauso können wir das nutzen href Wert als Variable in jQuery. Immer, wenn sich der Benutzer auf einem Miniaturbild befindet, ersetzen wir einfach das Bild src, um das animierte GIF anzuzeigen. Beachten Sie, dass das Miniaturbild und das GIF exakt dieselbe Größe haben. Auf diese Weise sollten unsere HTML-Einstellungen für Breite / Höhe für jedes Bild perfekt funktionieren.
CSS-Stile
Es gibt nicht viele CSS-Inhalte, aber ich möchte das Setup für meine Kerngalerie erläutern. #w ist die äußere Hülle, die auf 750px Breite fixiert ist. Innen haben wir eine #Inhalt div ist ein innerer Container für die Thumbnails. Ich habe die ungeordnete Liste mit einer ID von gekennzeichnet #giflist um meine jQuery-Auswahl zu klären.
Ich stelle nur die inneren Listenelemente so ein, dass sie links nebeneinander schweben können. Sobald das nächste Bild zu groß ist, bricht es natürlich in eine neue Zeile ein. Es gibt einige zusätzliche Abstände mit Rändern, um ausreichend Platz zwischen den Miniaturansichten zu gewährleisten.
Da alle diese internen Elemente verschoben werden, hätte die ungeordnete Liste normalerweise keinen Höhenwert. Es würde vollständig ohne den Einsatz einer .clearfix-Klasse aus dem Seitenfluss entfernt. Natürlich könnten wir mit CSS3 stilvollere Schnittstellenmerkmale hinzufügen, aber diese grundlegenden Eigenschaften reichen aus, um die Galerie reibungslos arbeiten zu lassen.
Bildersetzung mit jQuery
Zum Abschluss dieses Puzzles gehört ein kleiner jQuery-Ereignishandler. Am Ende meiner Seite vor dem Schließen Tag müssen wir einen neuen JavaScript-Block öffnen. Die Anker-Links, die die Bilder umgeben, sind nicht auf Blockebene und können daher nicht mit einem Ereignis-Listener angesprochen werden. Stattdessen ziele ich auf die Bilder selbst, und wir führen jedes Mal eine neue Funktion aus, wenn der Benutzer über eine dieser Miniaturbilder der Bilder fährt.
Die jQuery .hover () - Methode nimmt zwei Callback-Parameter auf, die ich als Funktionen geschrieben habe. Die erste wird ausgelöst, wenn die Maus des Benutzers in den Selektor eintritt, und die zweite Funktion wird ausgelöst, sobald die Maus des Benutzers den Selektor verlässt. Wenn sie zum ersten Mal über dem Bild schweben, müssen wir den entsprechenden Href-Wert aus dem äußeren Ankerlink ziehen.
Dann können wir den Bild-Quellwert ersetzen, um jetzt unser animiertes GIF-Bild anzuzeigen. Es wird entsprechend den HTML-Breiten- / Höhenattributen verkleinert, aber auch vollständig in den Cache-Speicher geladen. Möglicherweise haben Sie bemerkt, dass ich ein HTML5-Datenattribut mit dem Namen verwende Daten-orig. Sobald wir den Wert für das Bild-Quellwort durch das animierte GIF ersetzt haben, gibt es keine einfache Möglichkeit, zum Miniaturbild zurückzukehren.
Anstatt dies in einer Variablen zu speichern, behalten wir es einfach im img-Tag.Wenn der Benutzer die Maus nun vom Bild wegbewegt, wird die Quelle einfach durch eine Kopie des Daten-Ursprungswerts ersetzt. Dadurch wird das nicht animierte Miniaturbild wieder eingesetzt, während das animierte GIF nur einen Klick (oder Schwebeflug) entfernt ist.
Live Demo - Quellcode herunterladen
Schließen
Die Verwendung einer JavaScript-Bibliothek wie jQuery bietet eine hervorragende Unterstützung für neuere Webbrowser. Beachten Sie bei mobilen Geräten, dass die Benutzer auf jedes Miniaturbild tippen müssen, um die Animation in einem neuen Fenster anzuzeigen. Die Benutzeroberfläche wurde jedoch so konzipiert, dass sie für alle modernen Browser und sogar ältere ältere Versionen mit aktiviertem JavaScript einwandfrei funktioniert. Fühlen Sie sich frei, eine Kopie meiner Quellcodes herunterzuladen und zu überprüfen, ob Sie diesen Effekt in ähnliche Webprojekte implementieren können.