So erweitern Sie Miniaturbilder wie Google Bilder
Google Images führt eine einzigartige Benutzeroberfläche mit Vorschaubilder von vielen verschiedenen Websites. Wenn Sie auf eines dieser Miniaturbilder klicken, wird der Bildschirm mit mehr Details und einem größeren Bild erweitert.
Dies ist eine der besten Funktionen der Bildergalerie, die ich bisher verwendet habe, Sie können es mit Gridder.js klonen.
Dieses kostenlose jQuery-Plugin folgt den Spuren von Googles unglaublicher UX, indem es ein Plugin erstellt, das diesem Effekt entspricht. Sie können Verwandeln Sie jede Fotogalerie in eine Galerie im Google Bilder-Stil mit den gleichen Animationen und Anzeigefunktionen.
Ich bin angenehm überrascht, wie schnell und benutzerfreundlich dieses Plugin ist. Klicken Sie einfach auf ein Miniaturbild zeigt sofort eine größere Einstellung und die Animationen sind super sauber.
Die Bilder Fügen Sie einen Abschnitt für beschreibenden Text ein falls Sie Details oder Links zu den Bildern hinzufügen möchten. Dies funktioniert besonders gut für einfache Portfolio-Sites mit dem Ziel, sich auf die Bilder zu konzentrieren.
Darüber hinaus können Sie ziehen Sie auch Inhalte über Ajax. Das lässt dich Erstellen Sie dynamische Thumbnails die Inhalte von anderen Websites oder über APIs ziehen.
Jedes Klickereignis bietet eine Rückrufmethode an, So können Sie neben Gridder auch andere Plugins oder JavaScript-Funktionen ausführen. Bei so vielen Optionen fühlt es sich praktisch an wie ein ganzes Rasterfeld!
Seit Gridder läuft auf jQuery, Es ist jedoch die neueste Version als Abhängigkeit erforderlich. Aber das ist alles, was Sie brauchen (zusammen mit der Datei Gridder.js), und mit ein paar Zeilen HTML können Sie Ihr Raster reibungslos laufen lassen.
Sie sollten die GitHub-Seite für vollständige Installationsanweisungen aber hier ist ein schnelle Vorschau wie das HTML aussieht:
Alle Inhalte wird durch JavaScript gezogen, Sie können also so ziemlich alles laden, was Sie möchten.
Es ist ein unglaublich vielseitiges Plugin mit Optionen Ändern Sie die Animationsgeschwindigkeit, das Beschleunigen, das Schließen der Schaltflächen und die Position des Bildlaufversatzes wenn der Benutzer eine neue Miniaturansicht anklickt.
Anfänger und Profis werden in diesem Plugin viel Wert finden. Wenn Sie sich dennoch nicht sicher sind, ob dies der Fall ist, werfen Sie einen Blick auf die Live-Demo-Seite von Gridder und spielen Sie herum.
