photoswipe

Mattepuffo's logo
Una galleria con jQuery Mobile e PhotoSwipe

Una galleria con jQuery Mobile e PhotoSwipe

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.