Betten Sie animierte GIFs wie Facebook mit jqGifPreview ein

Twitter und Facebook haben viele Leute animierte GIFs teilen Täglich. Wenn diese automatisch abgespielt werden, können sie in einem Feed grausam sein.

Beide Netzwerke umgehen das mit einem Click-to-Preview-Funktion für alle GIFs. Dies lässt den Benutzer wählen welche Animationen sie sehen wollen Legen Sie fest, wann die Animation gestartet / gestoppt werden soll.

Mit dem jqGifPreview-Plugin, Sie können diese Funktionalität auf Ihrer Website verwenden.

Diese kostenloses jQuery-Plugin funktioniert auf allen GIFs auf der Seite oder kann gezielt auf jedes beliebige Ziel ausgerichtet werden. Es ist eine fantastische Ressource, braucht aber etwas Zeit, um sie einzurichten.

Eine pausierte GIF ist wirklich gerechtfertigt ein Frame der Animation, auf der Seite angezeigt.

Leider dieses plugin nicht automatisch ein statisches Bild aus der GIF ziehen für dich Sie können dies jedoch mit PHP oder einer anderen Backendsprache erledigen. Mit etwas Code kann dies automatisiert werden.

Dieses Plugin verwendet ein data- * -Attribut für Speichern Sie den GIF-Bildspeicherort. Sobald der Benutzer auf das Bild klickt, wird es automatisch in das Bild geladen src Attribut des Bildes und auf dem Bildschirm angezeigt werden.

Einfach, effektiv und definitiv ein toller Effekt! Sie benötigen lediglich die CSS / JS-Dateien für dieses Plugin direkt aus GitHub ziehen. Und natürlich wirst du brauche eine Kopie von jQuery, auch.

Von dort aus richten Sie Ihr Bild so ein:

Der haupt src Attribut sollte enthalten das statische Bild. Sie können entweder ein Skript erstellen, um es zu generieren, oder Sie können eine statische Aufnahme für jede GIF manuell bearbeiten und hochladen.

Das Daten-GIF Attribut hält das echte animierte GIF und sie werden auf Klick tauschen, wenn Sie ziele auf die Hauptbildklasse (in diesem Fall ist es .myImg). Jetzt brauchen Sie nur noch eine Zeile von jQuery, damit alles funktioniert:

 $ (". myImg"). jqGifPreview (); 

Auf jeden Fall eines der coolsten jQuery-Plugins, die ich diesen Monat gesehen habe, und es ist ziemlich einfach einzurichten.

Sie können mehr erfahren, indem Sie die besuchen GitHub-Seite und es gibt auch eine Live-Demo-Vorschau gehostet auf der Website des Entwicklers.