Cela fait un moment que je pensais à changer le module LightBox que j'utilise. Jusqu'à présent, c'est Ari ARI Sexy Lightbox lite. Il est vrai qu'il est très beau, très efficace et surtout très complet. Seulement, je ne l'utilise que pour afficher des images. Petit souci, ARI Sexy LightBox ne gère pas le changement d'images au doigt glissé (swipe) sur les téléphones et tablettes. Ce geste étant maintenant d'un commun avéré, il était temps que je mette à jour le site.
Maintenant que Jquery est quasi chargé en standard avec Joomla, on a accès à la vaste galaxie des plug-in Jquery. SwipeBox fait partie du groupe des lightbox qui gère les mouvements de doigts sur l'écran. Cela dit, mis à part le changement d'image il ne fait rien d'autre. Il ne gère pas les zooms, les partages sur les réseaux sociaux etc ... Avantage, il est responsive dans une moindre mesure (ne gère pas la rotation du téléphone en cours de visionnage !!!). Il gère la plupart des OS et navigateurs. Il est donc parfait pour mon petit site. Seul inconvénient, il ne semble pas gérer le zoom.
Problème après une recherche rapide, je n'ai pas trouvé le plugin Joomla qui me sauverait la vie. Comme on est jamais mieux servi que par soi-même, je l'ai codé à la va vite et je vous le propose. Il propose uniquement les 4 options basiques. Je n'ai pas codé pour les options préload et afterload.
Pour la CSS vous la trouverez dans plugins/content/swipebox_geekmps/lib/swipebox.css. J'ai uniquement modifié la ligne de background, pour le rendre un peu transparent.
Le module se pilote soit au doigt, pour tablettes et téléphones, soit aux flèches (du clavier) pour les ordinateurs. Cependant, il est existe un défaut qui se détecte principalement sur les téléphones. Il est impossible de zoomer sur les images.
On notera également qu'il manque le partage sur les réseaux sociaux style Pinterest.
Le site d'origine dit qu'il ne faut pas hésiter à faire des forks pour le rendre Swipebox meilleur.
Exemple de code à intégrer dans l’article Joomla
La gestion des galeries se fait via la balise rel. Une fois le plugin activé, il vous suffira d'inclure dans vos pages des choses comme ci dessous (en mode Code Source).
galeries
<!-- Gallery 1 -->
<a rel="gallery-1" href="/big/image1.jpg" class="swipebox">
<img src="/small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="/big/image2.jpg" class="swipebox">
<img src="/small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="/big/image3.jpg" class="swipebox">
<img src="/small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="/big/image4.jpg" class="swipebox">
<img src="/small/image4.jpg" alt="image">
</a>
Vidéos
Le support des vidéos youtube ce fait ainsi
<a class="swipebox-video" rel="youtube" href="http://www.youtube.com/watch?v=XSGBVzeBUbk">My Videos</a>
Il existe la possibilité de charger que les éléments visibles à l'écran (lazyload). Bien que très intéressante, je n'ai pas implémenté cette solution car elle plante avec certains navigateurs, avec certains modules de Joomla... Peut-être dans le futur je coderais cette petit chose.
Pour passer tout un site de ARI Sexy Lightbox lite c'est ultra simple (enfin dans mon cas).Je récupère la base de données avec le mode replace (dump). Sur le dump, je fais un gros et massif replace rel="gal" class="swipebox" sur le fichier par rel="gal1" class="swipebox" (je ne l'ai pas fait à l'écriture de cet article car je finis de bien tester avant d'adopter swipebox définitivement).
[MAJ : 15/06/2015, j'ai appliqué la mise à jour à tous le site car le plugin d'ARI ne fonctionnait plus correctement sur le site]
Téléchargement du plugin Joomla
Vous pouvez télécharger le plugin pour Joomla 3.2 ici
Vous pouvez télécharger le plugin pour Joomla 3.3 ici
Vous pouvez télécharger le plugin pour Joomla 3.4 ici (mise à jour de lib swipebox)
Site d'orgine de SwipeBox c'est par ici
Images et Captures écrans
Comments powered by CComment