So erweitern Sie Thumbnail wie Google Bilder

Google Images führt eine einzigartige Benutzeroberfläche mit Miniaturansichten von vielen verschiedenen Websites aus . Wenn Sie auf eines dieser Miniaturbilder klicken, wird der Bildschirm mit weiteren Details und einem größeren Bild erweitert.

Es ist eines der besten Bildergalerie Features, die ich verwendet habe und jetzt können Sie es mit Gridder.js klonen .

Dieses kostenlose jQuery-Plugin folgt den Fußstapfen von Googles unglaublichem UX, indem es ein Plugin erstellt, das diesem Effekt entspricht. Sie können jede Fotogalerie in eine Galerie im Google-Bilderstil mit den gleichen Animationen und Anzeigefunktionen verwandeln .

Ich bin angenehm überrascht von der Geschwindigkeit und Benutzerfreundlichkeit, die dieses Plugin bietet. Wenn Sie auf ein Thumbnail klicken, wird sofort eine größere Einstellung angezeigt und die Animationen sind sehr sauber.

Die Bilder enthalten einen Abschnitt für beschreibenden Text, falls Sie einige Details oder Links zu den Bildern hinzufügen möchten. Dies funktioniert besonders gut für einfache Portfolioseiten mit dem Ziel, sich auf die Bilder zu konzentrieren.

Darüber hinaus können Sie Inhalte auch über Ajax abrufen . Auf diese Weise können Sie dynamische Miniaturansichten erstellen, die Inhalte von anderen Websites oder über APIs abrufen.

Jedes Click-Ereignis bietet eine Callback-Methode, sodass Sie neben Gridder sogar andere Plugins oder JavaScript-Funktionen ausführen können. Bei so vielen Möglichkeiten fühlt es sich praktisch wie ein gesamtes Raster an.

Da Gridder auf jQuery ausgeführt wird, benötigt es die neueste Version als Abhängigkeit. Aber das ist alles was Sie brauchen (zusammen mit der Gridder.js Datei), und mit ein paar Zeilen HTML können Sie Ihr Grid reibungslos laufen lassen.

Sie sollten die GitHub-Seite für vollständige Setup-Anweisungen besuchen, aber hier ist eine kurze Vorschau dessen, wie der HTML-Code aussieht:

 Inhalt geht hier ... 

Der gesamte Inhalt wird durch JavaScript gezogen, sodass Sie so viel wie möglich laden können.

Es ist ein unglaublich vielseitiges Plugin mit Optionen zum Ändern der Animationsgeschwindigkeit, zum Beschleunigen, zum Schließen des Schaltflächenstils und zum Verschieben der Offsetposition, wenn der Benutzer auf eine neue Miniaturansicht klickt.

Sowohl Anfänger als auch Entwickler werden in diesem Plugin viel Wert finden. Wenn Sie sich jedoch noch nicht sicher sind, ob dies für Sie ist, werfen Sie einen Blick auf die Live-Gridder-Demoseite und spielen Sie herum.