Una galleria con jQuery Mobile e PhotoSwipe

Mattepuffo's logo
Una galleria con jQuery Mobile e PhotoSwipe

Una galleria con jQuery Mobile e PhotoSwipe

Programmazione, Javascript - AJAX 2 Commenti

Ad oggi è sempre più indispensabile avere gallerire fotografiche sul web sensibili al touch.

In giro già si trovano diverse gallerie in grado di farlo.

Io mi sono buttato su PhotoSwipe.

La galleria l'ho poi integrata con jQuery Mobile in modo da avere il tutto in una singola applicazione e in modo che la galleria posso interagire con altre pagine.

La libreria PhotoSwipe è abbastanza semplice da usare ed ha parecchie opzioni al suo interno.

Prima di tutto creiamo una pagina in stile jQuery Mobile:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link type="text/css" rel="stylesheet" href="css/style_collection.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/photoswipe.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div data-role="page" id="adv" data-theme="a" data-add-back-btn="true" class="gallery-page">
<div data-role="header" data-position="fixed">
<h1>Gallery</h1>
</div>
<div data-role="content">
LE FOTO
</div>
</div>

Ci sono tre fogli di stile, di cui il primo è quello di JQM e gli altri di due della galleria (che avete scaricato nella pagina insieme ai file JS).

Poi ho incluso cinque file JS:

  • jQuery
  • jQuery Mobile
  • klass e photoswipe per la galleria
  • script dove ci sono i miei script personali (potete mettere il codice anche nell'head della pagina, a vostra preferenza)

Poi ho messo una singola pagina, preparata però per essere messa in una struttura multi-page.

Guardate questa riga (quella di inizio pagina):

<div data-role="page" id="adv" data-theme="a" data-add-back-btn="true" class="gallery-page">

L'unica opzione obbligatoria per la galleria è la class gallery-page.

Io poi ho messo l'opzione per il back-button e impostato un tema.

Poi c'è un header fisso e infine il contenuto.

Io il contenuto me lo vado a prendere con PHP in maniera autmatica (così vediamo anche come sia facile interagire con linguaggi lato server); ovviamene la pagina deve avere estensione PHP.

Quindi il content sarà una cosa del genere:

<div data-role="content">
<ul class="gallery">
<?php

$dirname = "../IMMAGINI/small/";

$dirnameBig = "../IMMAGINI/big/";
$images = scandir($dirname);
sort($images);
foreach ($images as $file) {
if ((substr($file, -5) == ".jpeg") || (substr($file, -4) == ".jpg") || (substr($file, -5) == ".JPEG") || (substr($file, -4) == ".JPG")) {
echo '<li><a href="' . $dirnameBig . $file . '" rel="external" /><img src="' . $dirname . $file . '" alt="" /></a></li>';
}
}
?>
</ul>
</div>

Abbiamo due directory che contengono le immagini grandi e quelle piccole (io perndo solo le immagini in jpeg/jpg).

Sotto scandagliamo una directory (se le immagini hanno lo stesso nome basta scandagliarne una sola) e le mettiamo nella lista.

Il tag <a> serve per aprire la singola immagine in overlay; guardate che ha l'attributo rel="external".

Infine nel file script.js ho il codice per avviare la galleria:

(function(window, $, PhotoSwipe){
$(document).ready(function(){
$('div.gallery-page').live('pageshow', function(e){
var currentPage = $(e.target), options = {}, photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
}).live('pagehide', function(e){
var currentPage = $(e.target),photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));

Il codice non è di facilissima comprensione.

Quello che ci interessa maggiormente è vedere che ci sono i richiami alle nostre classi gallery-page e gallery (qua poi va a prendersi tutti i tag <a>).

Fate qualche prova, magari guardando anche alle altre opzioni.

La cosa più complicata secondo me è trovare la giusta dimensione per le foto.

Enjoy!

Condividi

2 Commenti

  • fermat

    ciao roberto!<br /><br />mi pare strana come limitazione (anche se non conosco altervista).<br /><br />hai provato a fare un var_dump($images) e vedere che esce fuori?

    09/04/2013
  • Roberto

    ciao Matteo,<br />grazie e complimenti per la guida, è proprio quello che cercavo!<br />Ho provato ad utilizzarla su una app, ma non mi funziona. Penso che i problemi mi derivino dal fatto che impostando $dirname e $dirnameBig, il comando scandir($dirname) non riesca a "spazzolare" le cartelle per limitazioni del server. Utilizzo Altervista e non sono molto pratico..hai qualche consiglio da darmi?

    09/04/2013

Commentami!