Lavora con noi

CSS

Siti tematici

Pagine:

RSS Download

Responsive image gallery con HTML5, CSS3 e jQuery PhotoSwipe

di: Filippo Buratti 05 Settembre 2011

In questo articolo applichiamo due principi cardine per lo sviluppo di moderne interfacce web nella creazione di una gallery di immagini: si tratta del responsive design e del progressive enhancement. In parole povere, il layout della galleria, realizzato in maniera "fluida" con le dimensioni degli elementi espresse in misure percentuali, assicurerà una corretta visualizzazione della pagina su tutti i device (desktop, notebook, smarthone, tablet) adattandosi perfettamente a qualsiasi risoluzione dello schermo. Inoltre, l'impiego attento delle nuove tecnologie HTML5, CSS3 e Javascript consentirà di fornire con i browser più recenti l'esperienza di navigazione più piacevole e avanzata senza precludere la compatibilità e l'accessibilità su dispositivi e software meno aggiornati.

Dulcis in fundo, mettere in pratica tutto questo e lo sviluppo dell'esempio finale sono molto semplici. Cominciamo subito!

La struttura HTML e gli stili CSS

Il layout della galleria fotografica presenta una struttura decisamente minimale basata sui nuovi tag HTML5:

un <header> contente l'intestazione.
un <footer> con le indicazioni di copyright.
un tag <section> contenente le varie thumbs della gallery, racchiuse a loro volta ognuna in un tag <figure>, semanticamente adatto per includere immagini o contenuti multimediali. Naturalmente ogni thumbnail è anche associata all'immagine ingrandita.

<header>
    <h1>Intestazione</h1>
</header>
<section id="gallery">
    <figure>
    	<a href="images/big/1.jpg"><img src="images/thumbs/1.jpg" alt="didascalia"></a>
    </figure> 
    <figure>
        <a href="images/big/2.jpg"><img src="images/thumbs/2.jpg" alt="didascalia"></a>
    </figure> 
    <figure>
    	<a href="images/big/3.jpg"><img src="images/thumbs/3.jpg" alt="didascalia"></a>
    </figure>
    <figure>
    	<a href="images/big/4.jpg"><img src="images/thumbs/4.jpg" alt="didascalia"></a>
    </figure>
</section> 
<footer>
    <p>paragrafo</p>
</footer>

Le immagini utilizzate sono archiviate in due sottodirectory separate: nel nostro esempio le miniature misurano 300x300 pixel. Anche gli ingrandimenti, in rapporto, hanno dimensioni volutamente generose, in modo da assicurare una corretta qualità di visualizzazione anche su schermi molto grandi. Questo perché anche le immagini del nostro layout saranno liquide, libere di ridimensionarsi e adattarsi alle dimensioni del viewport del browser.

Facendo un passo indietro nel codice della pagina, è necessario fare attenzione al contenuto del tag head, dove sono inclusi anche tutti i file esterni necessari, cioè gli script Javascript e i fogli di stile CSS. Per il momento è sufficiente fare attenzione ad acune parti importanti:

il meta tag viewport che consente di evitare lo scaling della pagina nei browser dei dispositivi mobile basati su iOS e Android.
l'inclusione del foglio CSS di reset prelevato da HTML5 Doctor, utile ad azzerare tutti i valori che i vari browser applicano di default alle proprietà dei vari tag.
l'inclusione, in un apposito commento condizionale riservato alle versioni di Internet Explorer inferiori alla 9, degli script html5shiv e selectivizr, necessari per poter utilizzare gli elementi di marcatura HTML5 e i comodi selettori CSS2 e CSS3 anche su questi browser.

<head>
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<link type="text/css" rel="stylesheet" href="css/html5reset-1.6.1.css">
<link type="text/css" rel="stylesheet" href="css/styles.css">
<link type="text/css" rel="stylesheet" href="css/photoswipe.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/simple-inheritance.min.js"></script>
<script type="text/javascript" src="js/code-photoswipe-jQuery-1.0.15.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="/js/selectivizr.js"></script>
<![endif]-->
<script type="text/javascript" src="js/scripts.js"></script>
</head>

L'aspetto del nostro nostro documento di esempio è naturalmente affidato alle regole di formattazione contenute nei fogli di stile CSS. Sottolineiamo come sia importante utilizzare misure in em o percentuale per i valori delle dimensioni dei vari elementi, margini, padding, e font-size dei testi, allo scopo di ottenere appunto un layout fluido. I tre elementi principali del layout (header, footer e section) presentano tutti una larghezza uguale a quella del viewport del browser (width:100%).

I tag figure contenenti le anteprime delle fotografie sono gli unici elementi flottanti, con larghezza e margini calcolati in modo da presentarli su righe in gruppi di quattro:

section#gallery figure {
    float:left;
    display:inline;
    width:21%;
    margin:2%; /*2% + 21% + 2% = 25% */
}

Il collegamento alla foto ingrandita e la thumbnail devono essere dichiarati di blocco con una width impostata al 100%, per ottenere così il "dimensionamento liquido".

section#gallery a { 
    display:block; 
    width:100%;
    border:1px solid #000000;
    background:#42403f;
    opacity:0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 hack */ 
    filter: alpha(opacity = 60); /* IE 5-7 hack */
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s; 
    -webkit-box-shadow: 0 0 5px #42403f;
    -moz-box-shadow: 0 0 5px #42403f;
    box-shadow: 0 0 5px #42403f;
} 

section#gallery a:hover { 
    opacity:1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */ 
    filter: alpha(opacity = 100); /* IE 5-7 hack */
} 

section#gallery img { 
    width:100%;
    display:block;
    border:none;
    -ms-interpolation-mode:bicubic; /* IE 7+ hack */ 
}

Ecco che incominciamo con prefissi proprietari e filtri vari, penserete, così antipatici, perché non inclusi nelle specifiche CSS e quindi non validi, ma così utili, perché ci permettono di utilizzare insieme nuove e vecchie tecnologie e ottenere un più ampio supporto cross-browser.

Importante: per i browser Internet Explorer 7 e 8, affinchè la qualità dell'immagine ridimensionata non risulti degradata, è necessario applicare una regola con un filtro specifico di Microsoft (-ms-interpolation-mode:bicubic).

Usare con la proprietà opacity, è molto semplice ottenere un rollover accattivante sulle thumbs. Inutile dire che le proprietà CSS3 transition e box-shadow, come anche la dichiarazione dei gradienti per il background, utilizzati in alcune parti del codice, in virtù del progressive enhancement, sono delle "features aggiuntive" all'esperienza di navigazione fruibili solo con i nuovi browser.

Non rimane che analizzare la parte "interattiva" dello sviluppo.

Pagina successiva

Pagine:

Approfondimenti sul tema

Ultimi articoli CSS

Mostra/nascondi con checkbox e CSS

Bottoni e pulsanti Web più belli con i CSS3

Liste ordinate, formattare i numeri con i CSS

Page curl, usi creativi della proprietà box-shadow

CSS cross-browser per i form con Formalize

Altri articoli

Newsletter @CSS

Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.

Iscriviti alla newsletter

Altre newsletter