Come mostrare tanti immagini nella prima schermata con jQuery

Oggi vediamo come creare una galleria di immagini con aiuto di un plugin di jQuery

Indice articolo

1. Markup html
2. jQuery
3. Impostazioni dio plugin
4. Realizzazione finale

 L'idea è che creeremo una galleria di immagini, o semplicemente una lista di immagini per le quali determineremo il numero di righe e colonne che verranno automaticamente disposte in una griglia.

Le immagini cambieranno con diversi effetti, transizioni e ritardi . Avremo solo bisogno di determinare la larghezza di questo  blocco con le immagini per mostrare corettamente su varie dispositivi

Una galleria del genere funzionerà bene come lo sfondo o anteprima della pagina di  un sito web, poiché potremo come avevo gia detto mostrare tante immagini in poco spazio in realtà riempire per esempio la prima scremata visibile al utente -ospite.

Come esempio della nostra galleria useremo foto di mobili per presentare il nostro lavoro

Markup html

La nostra struttura  html e molto semplice

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <ul>
        <li><a href="#"><img src="/images/medium/1.jpg" alt="cucina classica_1 "/></a></li>
        <li><a href="#"><img src="/images/medium/2.jpg" alt="cucina classica_2"/></a></li>
        <!-- ..e cosi via . -->
    </ul>
</div>

Jquery
E dopo aver creata la struttura dobiamo agiungere il motore della nostra galleria un plugin jQuery  che si chiama “gridrotator “ che girera le nostre immagini rachiusi nella scatola con l   id ri-grid(in realta puo avere qualsiasi nome )

$(function() {
             
    $( '#ri-grid' ).gridrotator();
 
});

Non dimentichiamo di inserire sulla nostra pagina o collegare dalla CDN la libreria di jQuery altrimenti non funzionerà, come farlo leggi qui e anche plugin  gridrotator  che troverà come allegato a questo post

Impostazioni

Vediamo anche come gestire le impostazioni della nostra galleria

// quantita  righe 
rows            : 4,
 
// quantita colonne 
columns         : 10,
 
/ / quantita righe - colonne per diversa larghezza di  schermi 
/ / in seguito 768 per schermi che non superano 768 px di larghezza
w1024           : {
    rows    : 3,
    columns : 8
},
 
w768            : {
    rows    : 3,
    columns : 7
},
 
w480            : {
    rows    : 3,
    columns : 5
},
 
w320            : {
    rows    : 2,
    columns : 4
},
 
w240            : {
    rows    : 2,
    columns : 3
},
 
// quantità di elementi che cambiano contemporaneamente  
// random || [quantita , numero]step            : 'random',
maxStep         : 3,
 
// disabilitare possibilita dio cliccare immagini 
preventClick    : true,
 
// effeti di animazione:
// showHide || fadeInOut || slideLeft || 
// slideRight || slideTop || slideBottom || 
// rotateLeft || rotateRight || rotateTop || 
// rotateBottom || scale || rotate3d || 
// rotateLeftScale || rotateRightScale || 
// rotateTopScale || rotateBottomScale || random
animType        : 'random',
 
// velocita animazione
animSpeed       : 500,
 
// visualizzazione animazione
animEasingOut   : 'linear',
animEasingIn    : 'linear',
 
// cambio effetto ogni  3 secondi
// ma non meno di  < 300 ms
interval  : 3000,
 
// fals  se senza animazione 
// uso false, se "onhover" - true
slideshow       : true,
 
// se true, effetto sara mostrato solo al hover, posizionando puntatore sopra immagine 
onhover     : false,
 
// id  di immagini che non devono cambiare 
nochange        : []

Definendo grandezza della intera galleria ( che include tutta la rette di immagini )  devi tenere presente che al interno della cella sara mostrata immagine piu piccola rispetto originale che si trova nella apposita cartella sul sito.

Supponiamo che hai 15 immagini e hai diviso la tua galerria in 5 colonne e 2 righe. Questo ti permnette di crere e mostrare subito 10 immagini con 5 che saranno usati per cambiare galleria.

Non dimenticare di inserire sulla tua pagina gli script necessarie: Libreria jQuery ,  jquery.gridrotator.js e un altro script che si chiama modernizr e la sua versione creata manualmente in base dei parametri necessarie  modernizr.custom.26633.js

Tutti gli fail necesarie per creare galeria potresti scaricare qui sotto l'articolo.

E ora vediamo la nostra galleria in funzione   

Direi che  è tutto! Abbiamo creato una galleria di immagini piuttosto attraente con effetti meravigliosi. Penso che ti sia piaciuto.