Web design: come inserire una galleria di immagini su di un sito web
Per il successo di un sito web, sia che si tratti di un blog o di un negozio online, la resa visuale è spesso essenziale. Infatti, anche se con il motto “content is king” si tende sempre a sottolineare l’importanza dei contenuti, l’aspetto grafico non deve essere perso di vista. Spesso pagine solo testuali spaventano gli utenti, ancora prima che abbiano letto il contenuto. Le immagini e gli altri elementi grafici sono quindi un elemento essenziale per ogni sito web, che servono per illustrare o concretizzare i contenuti, per creare un livello personale ed emozionale 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 possibilità: 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’estensione adatta e integrarla nello “scheletro” del sito.
Registrazione dominio
Più di un semplice nome.
Registra il tuo dominio con IONOS e approfitta di tutte le nostre funzionalità.
Come integrare un lightbox
Un lightbox è una delle strategie più semplici per presentare immagini su un sito web. Il lightbox viene programmato come HTML dinamico in JavaScript. 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ò incorporare in maniera semplice nel proprio sito web e integrare con ulteriori funzioni. Come prerequisito è necessario una versione aggiornata di lightbox e naturalmente l’immagine, inclusiva di thumbnails (cioè l’anteprima), che si vorrebbe inserire sul proprio sito web.
Il primo lightbox è stato programmato da Lokesh Dhakar nel 2005 e lo script è stato rilasciato poco dopo sotto licenza Creative Commons. Nel frattempo sono nate numerose versioni dello script più amato. Tra questi si contano sia gli script sviluppati da singoli utenti sia anche i plug-in della libreria JavaScript e le estensioni dei CMS.
1. Scaricare lightbox
Il più famoso script lightbox è disponibile gratuitamente sul sito web di Lokesh Dhakar. Decomprimendo il file zip, si trovano i seguenti elementi: il file index.html (le istruzioni sono in inglese) e le tre cartelle css, images e js.
2. Collegare il file CSS e JavaScript
Il passo successivo è quello di copiare il file lightbox.css dalla cartella CSS alla directory CSS del sito web e i file .js in quella JavaScript. 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 conclusivo </body> :
<script src="la-vostra-cartella-js/lightbox.js"></script>Attenzione: lightbox ha bisogno di jQuery. Se non è già stato fatto, bisogna incorporare e caricare lo script prima di iniziare il procedimento.
3. Inserire gli attributi di lightbox in HTML per la galleria
Ogni immagine, che si vorrebbe visualizzare con il lightbox, ha bisogno nel codice sorgente di un attributo adatto, con il quale si mettono a disposizione le informazioni necessarie allo script. Ogni link ad un’immagine deve avere l’attributo data-lightbox e un nome individuale per ogni galleria. Le immagini che dovrebbero trovarsi nello stesso slideshow (sequenza di immagini) necessitano tutte dello stesso attributo data-lightbox. Per integrare una didascalia, si usa l’attributo data-title con il testo corrispondente.
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 successivo 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. Naturalmente ci sono ancora ulteriori possibilità per personalizzare lo slideshow. Aggiungendo l’attributo “lightbox.option” dopo il caricamento dello script e inserendo lì i valori corrispondenti, si personalizza il lightbox.
Esempio:
<script src="la-vostra-cartella-js/lightbox.js"></script>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
});
</script>
Die wichtigsten Optionen im Überblick:
| Opzioni | Standard | Descrizione |
|---|---|---|
| alwaysShowNavOnTouchDevices | false | Se cambiate questa opzione da false a true, le frecce di navigazione, che altrimenti si mostrano solo quando ci si passa sopra con il mouse, diventano visibili permanentemente sui dispositivi con display touch. |
| disableScrolling | false | Cambiando da false a true, non è più possibile scorrere la pagina quando il lightbox è aperto. |
| fadeDuration | 500 | Stabilisce la durata della dissolvenza (intervallo di tempo espresso in millisecondi). |
| maxWidth | Stabilisce la larghezza massima dell’immagine (espressa in pixel). | |
| maxHeight | Stabilisce l’altezza massima dell’immagine (espressa in pixel). | |
| positionfromTop | 50 | Stabilisce la distanza dal margine superiore della finestra (espressa in pixel). |
| resizeDuration | 700 | Stabilisce il tempo (in millisecondi) che il box impiega per il passaggio da un’immagine ad un'altra di diverse dimensioni. |
| showImageNumberLabel | true | Passando da true a false, non si indica più il numero di immagini complessive dello slideshow (ad esempio immagine 3 di 33). |
| wrapAround | false | Cambiando l’opzione da true a false, lo slideshow ricomincia dall’inizio dopo l’ultima immagine. |
Alternativamente, ci sono anche molti altri programmi per creare una galleria di immagini personalizzata e incorporarla 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.
Estensioni per gallerie di immagini per i CMS
Nella creazione di un proprio sito web molte imprese, come anche i lavoratori indipendenti, decidono di usare un sistema di gestione dei contenuti (CMS). I CMS offrono un vantaggio importante: una struttura del sito web già pronta. Inoltre, la maggior parte dei sistemi permette di creare un sito web professionale anche senza approfondite conoscenze informatiche o di programmazione.
Oltre all’utilizzo intuitivo e all’interfaccia user-friendly, molti apprezzano anche la struttura flessibile di sistemi come Joomla! o Typo3. Attraverso la struttura modulare, spesso si può ampliare il CMS e adattarlo in base alle esigenze individuali. Ciò è reso possibile, tra l’altro, dalle grandi community di molti sistemi open source, che creano numerose estensioni e plug-in, tra i quali ci sono anche quelli per creare e incorporare gallerie di immagini professionali. Vi presentiamo 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 inizialmente come sistema per blog, è diventato nel frattempo grazie alle molte possibilità di estensione e di personalizzazione un CMS completo, che può anche essere usato in altri ambiti. Ma la sua importanza nei blog continua ad essere in primo piano e proprio negli ambienti della moda, lifestyle o bellezza, la rappresentazione grafica dei tempi ha un grande rilievo. Non stupisce quindi che tra più di 18.000 estensioni, 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ù conosciuti. Con Next Gen sono possibili sia gallerie di thumbnail sia slideshow, oltre che ad avere l’opzione lightbox integrata e tutto con un design responsive. Il plug-in offre anche molte opzioni per gallerie molto grandi e, attraverso 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 intervalli, e si creano in pochissimo tempo anche i watermark. In generale NextGen punta sull’usabilità e su un’interfaccia utente strutturata chiaramente. Tra i plug-in di WordPress è disponibile per il download la versione gratuita di NextGen Gallery. Sul sito web dello sviluppatore si trovano inoltre la versione plus e quella pro a pagamento, che dispongono di funzioni aggiuntive per un uso professionale e offrono alcune funzioni interessanti, soprattutto 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 personalizzate sia per singoli post sia per pagine, oltre che global gallery.
Su Envira, il design responsive è realizzato per mezzo della funzionalità “out of the box” e si possono creare sia gallerie sia lightbox. La particolarità di Envira è che il programma carica in maniera asincrona le immagini e per questa ragione non si compromettono né il tempo di caricamento né le performance nelle gallerie di immagini di grandi dimensioni. Quindi il plug-in per gallerie di immagini Envira influenza positivamente anche il SEO perché il tempo di caricamento è un fattore importante per il ranking.
La versione gratuita di Envira Gallery Lite è disponibile per il download tra i plug-in sul sito di WordPress. I pacchetti avanzati sono a pagamento ma, ad esempio, offrono opzioni aggiuntive di condivisione e social media, oltre che altre funzioni SEO e per e-commerce. Scopritene di più sul sito web ufficiale di Envira Gallery.
Polaroid Gallery
L’ultimo plug-in che vi presentiamo per creare una galleria di immagini è Polaroid Gallery. Come il nome già suggerisce, 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 templating, attraverso il quale gli utenti possono creare propri layout senza problemi. Il plug-in accede direttamente 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 importanti e un design classico, personalizzabile 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 popolarità 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 estensioni e plug-in.
sigplus
sigplus, acronimo di Simple Image Gallery Plus, ha come presupposto la semplicità, come il nome già suggerisce, e supporta gli utenti nella creazione di una galleria di immagini semplice. Il plug-in raggiunge gli obiettivi prefissati e si adatta soprattutto a piccoli siti web e gallerie con un numero gestibile di immagini. Inoltre, mentre gli utenti inesperti approfittano dell’uso semplice e intuitivo, quelli esperti hanno anche a disposizione ulteriori impostazioni, come thumbnails e caching, nella sezione “Advanced”.
Il plug-in è gratuito e si trova tra le estensioni di Joomla!.
Phoca Gallery
Anche Phoca Gallery è gratuito, ma con un numero di funzionalità decisamente maggiore rispetto al sopracitato sigplus. Phoca Gallery offre la possibilità di inserire gallerie di immagini e slideshow nel proprio sito web Joomla!, ma il suo uso non è così intuitivo e in particolare i principianti hanno bisogno di un certo periodo di adattamento per poter usare pienamente le funzioni. Tuttavia, se si riesce a gestire l’estensione, sono poi a disposizione, oltre alle funzioni base, anche pratiche feature che consentono di inserire watermark o l’opzione di download per gli utenti. L’estensione gratuita si trova sul sito web di Joomla!, e sulla pagina ufficiale dello sviluppatore sono a disposizione una documentazione esaustiva, moduli aggiuntivi e altri plug-in.
Simple Image Gallery Extended (SIGE)
Un’ulteriore possibilità per integrare gallerie di immagini su Joomla! la offre il plug-in SIGE (Simple Image Gallery Extended), costantemente sviluppato e migliorato da una grande community. Tra le altre cose, dispone del cosiddetto turbo mode, che permette il caricamento di immagini anche di grandi dimensioni e di gallerie senza dover aspettare troppo a lungo e senza influire negativamente sulle performance. Ulteriori features come ad esempio personalizzare i parametri, la funzione di watermark, la visualizzazione a elenco e una distribuzione sul server costituiscono solo una piccola parte di una lista quasi infinita di estensioni, come potete vedere cliccando qui. Si può scaricare l’estensione dal sito web di Joomla!.
Gallerie di immagini per TYPO3
Per completare la lista dei tre CMS più conosciuti e usati, manca ancora un sistema: TYPO3. Il CMS è un software fortemente estendibile, che viene usato sia per siti web di dimensioni piccole o medie sia anche per soluzioni enterprise. Inoltre, grazie alla community in crescita, nessun altro CMS convince così tanto come TYPO3 per quanto riguarda gli aggiornamenti e i continui sviluppi. Ma TYPO3 non risulta una soluzione semplice, se non si hanno conoscenze pregresse su come realizzare un sito web. Tuttavia, per poter usare pienamente i vantaggi del CMS, molte imprese investono tempo nella formazione di personale specializzato. Anche per quanto riguarda le gallerie di foto, ci sono alcune soluzioni professionali per TYPO3.
Yet Another Gallery
L’estensione Yet Another Gallery (YAG) è tra le estensioni più amate per la creazione di gallerie di immagini su TYPO3. Il vantaggio maggiore è che l’estensione viene continuamente sviluppata e di conseguenza offre standard attuali. YAG si adatta sia a progetti piccoli e privati sia anche a siti grandi e professionali perché l’estensione permette attraverso le sue possibilità di configurazione una grande flessibilità. Proprio come il CMS stesso, anche le gallerie di immagini sono estendibili a piacere e si adattano esattamente ad ogni sito. Gli utenti personalizzano così il loro design o scelgono uno dei numerosi temi già pronti, disponibili nella Extension Repository del sito di TYPO3. Si può scaricare YAG gratuitamente qui.
Perfect Lightbox
Perfect Lightbox non è un’estensione per creare gallerie di immagini nel senso tradizionale del termine. L’estensione permette di visualizzare i contenuti di una pagina in un lightbox, invece che, come avviene di solito, in una finestra pop-up separata. La particolarità di Perfect Lightbox è che non si visualizzano solo i singoli elementi ma, se lo si desidera, si presentano tutti gli elementi di una pagina in una normale galleria. Ulteriori funzionalità sono lo slideshow, una modalità di presentazione variabile e l’opzione di download per gli utenti. Gli utenti possono configurare autonomamente e in maniera flessibile l’aspetto del lightbox. Potete scaricare Perfect Lightbox qui.
Articoli simili
Creare un sito web con Mac: qual è il giusto programma?
Oggi le soluzioni per creare un sito web con un Mac sono moltissime, anche se non si hanno particolari conoscenze HTML, JavaScript o di altri linguaggi di markup. Avete bisogno solo di un semplice editor e dell’idea adatta. Anche per siti complessi ci sono soluzioni software professionali che potete utilizzare in maniera semplice e che vi aiutano nella realizzazione del sito web dei vostri sogni.
vectorfusionartShutterstock Come inserire una funzione di ricerca sul sito web
Per l’usabilità di un sito è molto importante la velocità con cui gli utenti trovano informazioni utili. La possibilità di navigare in un sito utilizzando parole chiave specifiche, rientra tra le funzioni principali che dovreste mettere a disposizione dei vostri utenti. In questo articolo vi sveliamo come inserire questa funzione sul vostro sito.
Inserire video in un sito web
HTML5 rende l’inserimento dei video nei siti web più facile che mai. La nuova versione del linguaggio di markup definisce un tag nativo <video> e l’API (application programming interface) corrispondente. In alternativa, i gestori di siti web possono incorporare video sul proprio sito attraverso piattaforme di video hosting come YouTube o Vimeo.
Trucchi CSS: i comandi CSS più utili per il vostro sito web
I fogli di stile CSS sono uno degli strumenti più importanti nello sviluppo web moderno. Permettono di separare tra loro contenuti e layout di un sito web e vengono sviluppati ulteriormente in maniera costante dal World Wide Web Consortium (W3C). I comandi CSS mostrati nell’articolo facilitano la creazione dei siti web in maniera considerevole e possono sostituire persino le funzioni di Photoshop…
Plug-in per gallerie su WordPress: creare gallerie di immagini per il proprio sito web
Le gallerie di immagini sono spesso utilizzate nei siti web. Quando create un sito web con WordPress, trovate numerosi plug-in nel repository del CMS che possono facilitarvi la configurazione di una galleria di immagini. Ma cosa distingue i diversi plug-in e quali sono le funzioni indispensabili? Vi proponiamo un confronto tra quattro plug-in per la creazione veloce di una galleria fotografica su…
Impostare il perfetto sfondo per il vostro sito web
Con il giusto sfondo per sito web date una buona prima impressione agli utenti e li inducete a guardare ancora più da vicino le pagine del vostro sito. Ma come fare per impostare il perfetto sfondo per il vostro sito web? Da cosa dipende la scelta dell’immagine da usare come sfondo? E quali errori sono assolutamente da evitare? Vi spieghiamo quali sono le regole più importanti.
