Usare Swiper in Vue.js
Swiper è una galleria pensata principalmente per essere responsive e touch.
In questo articolo vediamo come usarla in Vue.js.
Mattepuffo
swipe
Mattepuffo
Usare Swiper in Angular
Swiper è una galleria pensata principalmente per essere responsive e touch.
In questo articolo vediamo come usarla in Angular.
Mattepuffo
Galleria 360 con jQuery touchSwipe
Oggi vediamo come implementare una galleria a 360° con jQuery touchSwipe.
In questo modo la gallery sarà utilizzabile anche sui dispositivi mobile.
Mattepuffo
Usare SwipeRefreshLayout in Kotlin
SwipeRefreshLayout è un "componente" per Android per aggiornare i dati quando si fa il classico swipe-down.
Oggi vediamo un esempio usando Kotlin.
Mattepuffo
Intercettare lo swipe su una UITableView in Swift
In questo articolo abbiamo visto come rempire una UITableView da JSON.
Poi abbiamo aggiunto anche un loading dialog, ma non è fondamentale per lo scopo di oggi.
Qui vediamo come intercettare lo swipe su una riga della UITableView, usando sempre Swift come linguaggio.
Mattepuffo
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.