Publicité

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

Storio 2 img 001 Storio 2 img 002 Storio 2 img 003 Storio 2 img 004 Storio 2 img 005 


Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :


Commentaires (7)

  • Invité - John

    Bonjour,<br /><br />En effet je n'ai pas trouvé l'icone pour l'éditeur de code.<br />J'ai juste utiliser le bout de code conseillé :<br /><br />- lien en < a > avec class swipebox et à l'interieur l'image.<br /><br />Doit il y avoir un code sur la page pour activer le plugin ou la simple association de la class swipebox avec le < a > pour que cela marche ?<br /><br />MErci de votre réponse j'ai beau fouiller je n'ai pas de pistes de correction ;/.

  • Invité - Jerome BAPTISTE

    Invité - John

    John <br />Lorsque vous éditez votre article vous basculez bien en "code source", le bouton sur l'éditeur ressemble à ça . Il est à côté du bouton insérer image. Lorsque vous cliquez dessus, vous devez avoir une fenêtre qui apparaît juste avec le code source HTML.<br /><br />Sinon en bas à droite à côté du bouton "lire la suite" il doit y avoir un bouton "basculer l'éditeur". Lorsque vous cliquez, tous les boutons de l'éditeur de texte disparaissent, vous pouvez entrer le code pour les images.<br /><br />Personnellement, pour repérer l'endroit où je dois insérer le code jécris testjba en mode normal. Une fois basculé en "code source" je recherche testjba, je le sélection et je copie-colle le code.<br /><br />En espérant avoir été plus clair.

  • Invité - John

    Invité - Jerome BAPTISTE

    Ahhhh d'accord !! Car je cherchais à l'ajouter dans ma view directement ( c'est pour un projet professionnel ). Il y a t'il la possibilité de l'utiliser dans n'importe lequel des composants ou d'une vue ?<br /><br /><br />Je viens de tester directement dans l'article, cela fonctionne bien. Cependant de mon côté je souhaitais l'utiliser dans un de mes composants.<br /><br />Connaissez vous les appels que je devrais effectuer ?

  • Invité - Jerome BAPTISTE

    Invité - John

    J'avoue que j'ai créé ce plugin pour ma propre utilisation sans optimisation ni rien. Pour l'intégration dans une view etc je n'ai rien testé.<br />Je pense que si le composant génère le bon code html qui va bien, couplé avec le plugin ça pourrait fonctionner. <br />Le plugin se contente d'appeler uniquement la lib (js et css) de swipebox. C'est dont juste une facilité

  • Invité - John

    Mhh je ne vois pas l'éditeur de code :/. Cela dit j'ai utiliser le même code que celui conseillé dans votre page, rajouter la classe swipebox à un "< a >" et l' < img > à l'interieur.

  • Invité - John

    Bonjour, j'aurais aimé faire fonctionner ce plugin sur mon site seulement je l'ai installé, activé le plugin et mis le code ci dessous pour tester:<br /><br /><br /><br /><br /><br /><br /><br /><br />Cependant swipebox ne fonctionne pas. Ai-je oublier quelque chose ? (comme une activation de plugin sur la page ou autre)<br /><br />Merci d'avance

  • Invité - Jerome BAPTISTE

    Invité - John

    Bonjour John<br /><br />Le code que vous avez essayé de m'envoyer n'est pas passé. Avez vous bien vidé votre cache si activé, avez vous bien placé le code en mode éditeur de code () <br /><br />Jérôme

Poster un commentaire en tant qu'invité

0