Per il successo di un sito web, sia che si tratti di un blog o di un negozio online, la resa visuale è spesso es­sen­zia­le. Infatti, anche se con il motto “content is king” si tende sempre a sot­to­li­nea­re l’im­por­tan­za dei contenuti, l’aspetto grafico non deve essere perso di vista. Spesso pagine solo testuali spa­ven­ta­no gli utenti, ancora prima che abbiano letto il contenuto. Le immagini e gli altri elementi grafici sono quindi un elemento es­sen­zia­le per ogni sito web, che servono per il­lu­stra­re o con­cre­tiz­za­re i contenuti, per creare un livello personale ed emo­zio­na­le o per chiarire i pregi dei prodotti offerti.

Le gallerie sono uno degli strumenti più amati per integrare più immagini insieme sul proprio sito web. Per riuscirci ci sono diverse pos­si­bi­li­tà: gli utenti possono ad esempio inserire, per mezzo del codice sorgente, un semplice lightbox nel loro sito web e creare una galleria di immagini in HTML. Ancora più facile è quando si usa uno dei sistemi di gestione dei contenuti (CMS) più diffusi come TYPO3 o WordPress, dove basta solo trovare l’esten­sio­ne adatta e in­te­grar­la nello “scheletro” del sito.

Registra il tuo dominio
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa

Come integrare un lightbox

Un lightbox è una delle strategie più semplici per pre­sen­ta­re immagini su un sito web. Il lightbox viene pro­gram­ma­to come HTML dinamico in Ja­va­Script. Se si clicca sull’immagine di anteprima, si apre l’immagine in formato grande con il sito web oscurato come sfondo. Un lightbox di questo tipo si può in­cor­po­ra­re in maniera semplice nel proprio sito web e integrare con ulteriori funzioni. Come pre­re­qui­si­to è ne­ces­sa­rio una versione ag­gior­na­ta di lightbox e na­tu­ral­men­te l’immagine, inclusiva di thumb­nails (cioè l’anteprima), che si vorrebbe inserire sul proprio sito web.

Il primo lightbox è stato pro­gram­ma­to da Lokesh Dhakar nel 2005 e lo script è stato ri­la­scia­to poco dopo sotto licenza Creative Commons. Nel frattempo sono nate numerose versioni dello script più amato. Tra questi si contano sia gli script svi­lup­pa­ti da singoli utenti sia anche i plug-in della libreria Ja­va­Script e le esten­sio­ni dei CMS.

1. Scaricare lightbox

Il più famoso script lightbox è di­spo­ni­bi­le gra­tui­ta­men­te sul sito web di Lokesh Dhakar. De­com­pri­men­do il file zip, si trovano i seguenti elementi: il file index.html (le istru­zio­ni sono in inglese) e le tre cartelle css, images e js.

2. Collegare il file CSS e Ja­va­Script

Il passo suc­ces­si­vo è quello di copiare il file lightbox.css dalla cartella CSS alla directory CSS del sito web e i file .js in quella Ja­va­Script. Inoltre si deve copiare la seguente riga nell’head del sito web in questione:

<link href="la-vostra-cartella-css/lightbox.css" rel="stylesheet">

E la riga seguente deve essere inserita alla fine prima del tag con­clu­si­vo </body> :  

<script src="la-vostra-cartella-js/lightbox.js"></script>

At­ten­zio­ne: lightbox ha bisogno di jQuery. Se non è già stato fatto, bisogna in­cor­po­ra­re e caricare lo script prima di iniziare il pro­ce­di­men­to.

3. Inserire gli attributi di lightbox in HTML per la galleria

Ogni immagine, che si vorrebbe vi­sua­liz­za­re con il lightbox, ha bisogno nel codice sorgente di un attributo adatto, con il quale si mettono a di­spo­si­zio­ne le in­for­ma­zio­ni ne­ces­sa­rie allo script. Ogni link ad un’immagine deve avere l’attributo data-lightbox e un nome in­di­vi­dua­le per ogni galleria. Le immagini che do­vreb­be­ro trovarsi nello stesso slideshow (sequenza di immagini) ne­ces­si­ta­no tutte dello stesso attributo data-lightbox. Per integrare una di­da­sca­lia, si usa l’attributo data-title con il testo cor­ri­spon­den­te.

Ecco un esempio per un’immagine singola: 
<a href="images/foto1.jpg" data-lightbox="foto1" data-title="Didascalia">
    <img src="images/foto1-anteprima.jpg" alt="testo alternativo">
</a>
L’esempio suc­ces­si­vo vale invece per uno slideshow: 
<a href="images/foto2.jpg" data-lightbox="slideshow1" data-title="mattino"><img src="images/foto2-anteprima.jpg" alt="testo alternativo"></a>
<a href="images/foto3.jpg" data-lightbox="slideshow1" data-title="pomeriggio"><img src="images/foto3-anteprima.jpg" alt="testo alternativo"></a>
<a href="images/foto4.jpg" data-lightbox="slideshow1" data-title="sera "><img src="images/foto4-anteprima.jpg" alt="testo alternativo"></a>

A questo punto, il lightbox è inserito nel sito web. Na­tu­ral­men­te ci sono ancora ulteriori pos­si­bi­li­tà per per­so­na­liz­za­re lo slideshow. Ag­giun­gen­do l’attributo “lightbox.option” dopo il ca­ri­ca­men­to dello script e inserendo lì i valori cor­ri­spon­den­ti, si per­so­na­liz­za il lightbox.

Esempio: 
<script src="la-vostra-cartella-js/lightbox.js"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    });
</script>
Die wi­ch­tig­sten Optionen im Überblick:
Opzioni Standard De­scri­zio­ne
al­ways­Sho­w­Na­vOn­Tou­ch­De­vi­ces false Se cambiate questa opzione da false a true, le frecce di na­vi­ga­zio­ne, che al­tri­men­ti si mostrano solo quando ci si passa sopra con il mouse, diventano visibili per­ma­nen­te­men­te sui di­spo­si­ti­vi con display touch.
di­sa­ble­Scrol­ling false Cambiando da false a true, non è più possibile scorrere la pagina quando il lightbox è aperto.
fa­de­Du­ra­tion 500 Sta­bi­li­sce la durata della dis­sol­ven­za (in­ter­val­lo di tempo espresso in mil­li­se­con­di).
maxWidth   Sta­bi­li­sce la larghezza massima dell’immagine (espressa in pixel).
maxHeight   Sta­bi­li­sce l’altezza massima dell’immagine (espressa in pixel).
po­si­tion­from­Top 50 Sta­bi­li­sce la distanza dal margine superiore della finestra (espressa in pixel).
re­si­ze­Du­ra­tion 700 Sta­bi­li­sce il tempo (in mil­li­se­con­di) che il box impiega per il passaggio da un’immagine ad un'altra di diverse di­men­sio­ni.
sho­wI­ma­ge­Num­ber­La­bel true Passando da true a false, non si indica più il numero di immagini com­ples­si­ve dello slideshow (ad esempio immagine 3 di 33).
wra­pA­round false Cambiando l’opzione da true a false, lo slideshow ri­co­min­cia dall’inizio dopo l’ultima immagine.

Al­ter­na­ti­va­men­te, ci sono anche molti altri programmi per creare una galleria di immagini per­so­na­liz­za­ta e in­cor­po­rar­la nel proprio sito web. Di regola, i tool sono molto semplici e intuitivi da usare, dato che la maggior parte dispone di un editor Drag&Drop. Una selezione di alcune gallerie di immagini la trovate qui.

Esten­sio­ni per gallerie di immagini per i CMS

Nella creazione di un proprio sito web molte imprese, come anche i la­vo­ra­to­ri in­di­pen­den­ti, decidono di usare un sistema di gestione dei contenuti (CMS). I CMS offrono un vantaggio im­por­tan­te: una struttura del sito web già pronta. Inoltre, la maggior parte dei sistemi permette di creare un sito web pro­fes­sio­na­le anche senza ap­pro­fon­di­te co­no­scen­ze in­for­ma­ti­che o di pro­gram­ma­zio­ne.

Oltre all’utilizzo intuitivo e all’in­ter­fac­cia user-friendly, molti ap­prez­za­no anche la struttura fles­si­bi­le di sistemi come Joomla! o Typo3.  At­tra­ver­so la struttura modulare, spesso si può ampliare il CMS e adattarlo in base alle esigenze in­di­vi­dua­li. Ciò è reso possibile, tra l’altro, dalle grandi community di molti sistemi open source, che creano numerose esten­sio­ni e plug-in, tra i quali ci sono anche quelli per creare e in­cor­po­ra­re gallerie di immagini pro­fes­sio­na­li. Vi pre­sen­tia­mo alcune soluzioni per i sistemi Joomla!, WordPress e TYPO3.

Gallerie di immagini su WordPress

WordPress è il CMS open source più usato al mondo. Sebbene sia stato concepito ini­zial­men­te come sistema per blog, è diventato nel frattempo grazie alle molte pos­si­bi­li­tà di esten­sio­ne e di per­so­na­liz­za­zio­ne un CMS completo, che può anche essere usato in altri ambiti. Ma la sua im­por­tan­za nei blog continua ad essere in primo piano e proprio negli ambienti della moda, lifestyle o bellezza, la rap­pre­sen­ta­zio­ne grafica dei tempi ha un grande rilievo. Non stupisce quindi che tra più di 18.000 esten­sio­ni, ce ne siano anche molte per le gallerie di immagini, oltre che i plug-in.

NextGen Gallery

NextGen Gallery è uno dei plug-in di WordPress più co­no­sciu­ti. Con Next Gen sono possibili sia gallerie di thumbnail sia slideshow, oltre che ad avere l’opzione lightbox integrata e tutto con un design re­spon­si­ve. Il plug-in offre anche molte opzioni per gallerie molto grandi e, at­tra­ver­so la sua struttura chiara e un’usabilità semplice, facilita sia l’upload di grandi quantità di immagini sia la loro gestione. Si possono scegliere parametri come grandezza, numeri e in­ter­val­li, e si creano in po­chis­si­mo tempo anche i watermark. In generale NextGen punta sull’usabilità e su un’in­ter­fac­cia utente strut­tu­ra­ta chia­ra­men­te. Tra i plug-in di WordPress è di­spo­ni­bi­le per il download la versione gratuita di NextGen Gallery. Sul sito web dello svi­lup­pa­to­re si trovano inoltre la versione plus e quella pro a pagamento, che di­spon­go­no di funzioni ag­giun­ti­ve per un uso pro­fes­sio­na­le e offrono alcune funzioni in­te­res­san­ti, so­prat­tut­to per gli e-commerce.

Envira Gallery

Anche il plug-in Envira Gallery (Lite) consente di creare gallerie di immagini per il proprio sito web. L’utente può creare gallerie per­so­na­liz­za­te sia per singoli post sia per pagine, oltre che global gallery. Su Envira, il design re­spon­si­ve è rea­liz­za­to per mezzo della fun­zio­na­li­tà “out of the box” e si possono creare sia gallerie sia lightbox. La par­ti­co­la­ri­tà di Envira è che il programma carica in maniera asincrona le immagini e per questa ragione non si com­pro­met­to­no né il tempo di ca­ri­ca­men­to né le per­for­man­ce nelle gallerie di immagini di grandi di­men­sio­ni. Quindi il plug-in per gallerie di immagini Envira influenza po­si­ti­va­men­te anche il SEO perché il tempo di ca­ri­ca­men­to è un fattore im­por­tan­te per il ranking. La versione gratuita di Envira Gallery Lite è di­spo­ni­bi­le per il download tra i plug-in sul sito di WordPress. I pacchetti avanzati sono a pagamento ma, ad esempio, offrono opzioni ag­giun­ti­ve di con­di­vi­sio­ne e social media, oltre che altre funzioni SEO e per e-commerce. Sco­pri­te­ne di più sul sito web ufficiale di Envira Gallery.

Polaroid Gallery

L’ultimo plug-in che vi pre­sen­tia­mo per creare una galleria di immagini è Polaroid Gallery. Come il nome già sug­ge­ri­sce, gli utenti qui si aspettano gallerie di immagini in formato polaroid, con la classica cornice bianca: una soluzione perfetta per gli amanti del design e dello stile retrò, che cercano di creare senza grande sforzo una galleria di immagini con un design classico. Polaroid Gallery lavora con CSS3 e jQuery e si basa su un sistema di tem­pla­ting, at­tra­ver­so il quale gli utenti possono creare propri layout senza problemi. Il plug-in accede di­ret­ta­men­te alla libreria WordPress, così anche le immagini già caricate sono integrate senza problemi. Polaroid Gallery è una soluzione veloce e semplice, che offre tutte le funzioni base im­por­tan­ti e un design classico, per­so­na­liz­za­bi­le in ogni momento. Questo plug-in gratuito lo trovate tra i plug-in di WordPress.

Gallerie di immagini per Joomla!

Anche Joomla! gode di una po­po­la­ri­tà sempre maggiore, sia in Italia che all’estero, e rientra nella lista dei tre CMS più usati. Anche su Joomla! gli utenti possono contare su una grande community e su una vasta scelta di esten­sio­ni e plug-in.

sigplus

sigplus, acronimo di Simple Image Gallery Plus, ha come pre­sup­po­sto la sem­pli­ci­tà, come il nome già sug­ge­ri­sce, e supporta gli utenti nella creazione di una galleria di immagini semplice. Il plug-in raggiunge gli obiettivi pre­fis­sa­ti e si adatta so­prat­tut­to a piccoli siti web e gallerie con un numero gestibile di immagini. Inoltre, mentre gli utenti inesperti ap­pro­fit­ta­no dell’uso semplice e intuitivo, quelli esperti hanno anche a di­spo­si­zio­ne ulteriori im­po­sta­zio­ni, come thumb­nails e caching, nella sezione “Advanced”.   Il plug-in è gratuito e si trova tra le esten­sio­ni di Joomla!.

Phoca Gallery

Anche Phoca Gallery è gratuito, ma con un numero di fun­zio­na­li­tà de­ci­sa­men­te maggiore rispetto al so­pra­ci­ta­to sigplus. Phoca Gallery offre la pos­si­bi­li­tà di inserire gallerie di immagini e slideshow nel proprio sito web Joomla!, ma il suo uso non è così intuitivo e in par­ti­co­la­re i prin­ci­pian­ti hanno bisogno di un certo periodo di adat­ta­men­to per poter usare pie­na­men­te le funzioni. Tuttavia, se si riesce a gestire l’esten­sio­ne, sono poi a di­spo­si­zio­ne, oltre alle funzioni base, anche pratiche feature che con­sen­to­no di inserire watermark o l’opzione di download per gli utenti. L’esten­sio­ne gratuita si trova sul sito web di Joomla!, e sulla pagina ufficiale dello svi­lup­pa­to­re sono a di­spo­si­zio­ne una do­cu­men­ta­zio­ne esaustiva, moduli ag­giun­ti­vi e altri plug-in.

Simple Image Gallery Extended (SIGE)

Un’ulteriore pos­si­bi­li­tà per integrare gallerie di immagini su Joomla! la offre il plug-in SIGE (Simple Image Gallery Extended), co­stan­te­men­te svi­lup­pa­to e mi­glio­ra­to da una grande community. Tra le altre cose, dispone del co­sid­det­to turbo mode, che permette il ca­ri­ca­men­to di immagini anche di grandi di­men­sio­ni e di gallerie senza dover aspettare troppo a lungo e senza influire ne­ga­ti­va­men­te sulle per­for­man­ce. Ulteriori features come ad esempio per­so­na­liz­za­re i parametri, la funzione di watermark, la vi­sua­liz­za­zio­ne a elenco e una di­stri­bu­zio­ne sul server co­sti­tui­sco­no solo una piccola parte di una lista quasi infinita di esten­sio­ni, come potete vedere cliccando qui. Si può scaricare l’esten­sio­ne dal sito web di Joomla!.

Gallerie di immagini per TYPO3

Per com­ple­ta­re la lista dei tre CMS più co­no­sciu­ti e usati, manca ancora un sistema: TYPO3. Il CMS è un software for­te­men­te esten­di­bi­le, che viene usato sia per siti web di di­men­sio­ni piccole o medie sia anche per soluzioni en­ter­pri­se. Inoltre, grazie alla community in crescita, nessun altro CMS convince così tanto come TYPO3 per quanto riguarda gli ag­gior­na­men­ti e i continui sviluppi. Ma TYPO3 non risulta una soluzione semplice, se non si hanno co­no­scen­ze pregresse su come rea­liz­za­re un sito web. Tuttavia, per poter usare pie­na­men­te i vantaggi del CMS, molte imprese investono tempo nella for­ma­zio­ne di personale spe­cia­liz­za­to. Anche per quanto riguarda le gallerie di foto, ci sono alcune soluzioni pro­fes­sio­na­li per TYPO3.

Yet Another Gallery

L’esten­sio­ne Yet Another Gallery (YAG) è tra le esten­sio­ni più amate per la creazione di gallerie di immagini su TYPO3. Il vantaggio maggiore è che l’esten­sio­ne viene con­ti­nua­men­te svi­lup­pa­ta e di con­se­guen­za offre standard attuali. YAG si adatta sia a progetti piccoli e privati sia anche a siti grandi e pro­fes­sio­na­li perché l’esten­sio­ne permette at­tra­ver­so le sue pos­si­bi­li­tà di con­fi­gu­ra­zio­ne una grande fles­si­bi­li­tà. Proprio come il CMS stesso, anche le gallerie di immagini sono esten­di­bi­li a piacere e si adattano esat­ta­men­te ad ogni sito. Gli utenti per­so­na­liz­za­no così il loro design o scelgono uno dei numerosi temi già pronti, di­spo­ni­bi­li nella Extension Re­po­si­to­ry del sito di TYPO3. Si può scaricare YAG gra­tui­ta­men­te qui.

Perfect Lightbox

Perfect Lightbox non è un’esten­sio­ne per creare gallerie di immagini nel senso tra­di­zio­na­le del termine. L’esten­sio­ne permette di vi­sua­liz­za­re i contenuti di una pagina in un lightbox, invece che, come avviene di solito, in una finestra pop-up separata. La par­ti­co­la­ri­tà di Perfect Lightbox è che non si vi­sua­liz­za­no solo i singoli elementi ma, se lo si desidera, si pre­sen­ta­no tutti gli elementi di una pagina in una normale galleria. Ulteriori fun­zio­na­li­tà sono lo slideshow, una modalità di pre­sen­ta­zio­ne variabile e l’opzione di download per gli utenti. Gli utenti possono con­fi­gu­ra­re au­to­no­ma­men­te e in maniera fles­si­bi­le l’aspetto del lightbox. Potete scaricare Perfect Lightbox qui.

Vai al menu prin­ci­pa­le