Come espandere le miniature come le immagini di Google
Google Immagini esegue un'interfaccia utente unica con anteprime in miniatura da molti siti Web diversi. Facendo clic su una di queste miniature si espande lo schermo con ulteriori dettagli e una foto più grande.
È una delle migliori funzioni di galleria di immagini che ho usato e ora, puoi clonarlo con Gridder.js.
Questo plugin gratuito di jQuery segue le orme dell'incredibile UX di Google creando un plug-in che corrisponda a questo effetto. Puoi trasforma qualsiasi galleria fotografica in una galleria in stile Google Immagini con tutte le stesse animazioni e funzioni di visualizzazione.
Sono piacevolmente sorpreso dalla velocità e facilità d'uso di questo plugin. Basta fare clic su qualsiasi miniatura visualizza immediatamente uno scatto più grande e le animazioni sono super pulite.
Le immagini includere una sezione per il testo descrittivo nel caso in cui si desidera aggiungere alcuni dettagli o collegamenti relativi alle immagini. Questo funziona particolarmente bene per i siti di portfolio semplici con l'obiettivo di concentrarsi sulle immagini.
Oltre a ciò, puoi anche tirare il contenuto tramite Ajax. Questo ti permette crea miniature dinamiche che estrae contenuti da altri siti Web o tramite API.
Ogni evento click offre un metodo di callback, così puoi anche eseguire altri plugin o funzioni JavaScript insieme a Gridder. Con così tante opzioni, sembra praticamente un'intera griglia!
Dal momento che Gridder gira su jQuery, richiede la versione più recente come dipendenza. Ma questo è tutto ciò di cui hai bisogno (insieme al file Gridder.js) e con poche righe di HTML, puoi far funzionare la tua rete in modo fluido.
Dovresti controllare la pagina GitHub per istruzioni complete per la configurazione ma ecco a anteprima veloce di come appare l'HTML:
Tutto il contenuto viene trascinato in JavaScript, così puoi caricare praticamente tutto ciò che vuoi.
È un plugin incredibilmente versatile con opzioni a modifica la velocità dell'animazione, l'andamento, lo stile dei pulsanti di chiusura e la posizione di scorrimento per quando l'utente fa clic su una nuova miniatura.
Gli sviluppatori principianti e professionisti troveranno molto valore in questo plugin. Eppure, se non sei ancora sicuro se questo è per te dai un'occhiata alla pagina demo di Gridder dal vivo e dai un'occhiata.
