PeterRabbit

[Module] Zwiiper, le retour

Messages recommandés

PeterRabbit    308

Zwiiper, le retour

Voir le fichier

ZWII + SWIPER = ZWIIPER !

Un slider facile à intégrer et à paramétrer.

 

Ce plugin, établi à partir d'une démo de Stu Nicholls, intègrera le slider "Swiper" à votre site ZwiiCMS.

"Swiper" est-il vraiment le most modern mobile touch slider qu'il prétend ? Voyez les démos pour vous faire une opinion... ou installez le plugin pour une démonstration privée grâce à deux jeux de photos "empruntées" à L'internaute Voyage.

 

Réglages par défaut

  • "Swiper" est paramétré pour démarrer automatiquement, tourner en boucle et afficher des titres.
  • On peut passer d'une diapo à l'autre (dans les deux sens) au clavier, à la souris (au clic, au glisser ou à la molette) ou encore au doigt ou au stylet sur les écrans tactiles.
  • Le tout responsivement et sans devoir recourir à jQuery, même si ce dernier est déjà intégré à Zwii pour d'autres raisons.

 

Les utilisateurs désireux de personnaliser leur "Swiper" consulteront avec profit la page API.

 

 

 

Décompressez l'archive. Elle contient deux modules complémentaires :

  • "Swiper", le programme lui-même, qu'il faut impérativement installer en premier et qui permet d'intégrer un carrousel à n'importe quelle page.
  • "Banner", si vous souhaitez un slider dans la partie haute du site.

 

Les deux modules sont compatibles, et on peut installer autant de sliders que l'on veut dans les pages du site.

Chaque module comprend un plugin d'installation ("install") et un plugin de restauration ("restaure"). Ce dernier remettra votre site dans son état initial en toute sécurité, sans aucun écrasement de fichier : le script réécrit les passages modifiés et supprime les répertoires ajoutés à l'installation.


1. Installation de "Swiper"

  •  Ouvrez le dossier "swiper_install" et copiez-en le contenu (le fichier "index.php" et les deux dossiers "core" et "site") à la racine du répertoire d'installation de votre site.
  • Acceptez le remplacement du fichier "index.php".
  • Connectez-vous à votre site ou rafraîchissez la page.

C'est fait.

 

Mise en œuvre

  • Éditez une page de votre site, ou créez-en une.
  • Affichez le code source de la page (bouton "<>" de la barre d'outils de l'éditeur).
  • Collez l'intégralité du code ci-après à l'endroit où vous souhaitez placer le slider, il s'adaptera à votre installation, même dans un sous-répertoire :
<div id="swiper" class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269338-torres-del-paine" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/torres_del_paine.jpg" /></a>
<div class="swiper-text">Patagonie<br />Torres del Paine</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269314-laguna-de-los-tres" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/fitz_roy.jpg" /></a>
<div class="swiper-text">Laguna de los Tres<br />et mont Fitz Roy</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269326-laguna-torre" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/laguna_torre.jpg" /></a>
<div class="swiper-text">Laguna Torre</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269311-canal-beagle" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/canal_beagle.jpg" /></a>
<div class="swiper-text">Canal Beagle</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269315-ile-de-chiloe" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/chiloe.jpg" /></a>
<div class="swiper-text">Ile de Chilo&eacute;</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269321-aysen" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/puerto_aysen.jpg" /></a>
<div class="swiper-text">Puerto Ays&eacute;n</div>
</div>
</div>
<div id="swiper-button-prev" class="swiper-button-prev swiper-button-white">&nbsp;</div>
<div id="swiper-button-next" class="swiper-button-next swiper-button-white">&nbsp;</div>

Enjoy ! :)


Configuration d'un diaporama

  • Préparez vos images pour qu'elles aient des formats et des dimensions identiques (c'est plus esthétique) et qu'elles soient d'un poids raisonnable. Vous pouvez bien sûr utiliser le format .png, pensez seulement à modifier l'extension dans le code. Le diaporama s'adaptant automatiquement à la largeur de votre site, concevez vos images en fonction de ce que vous souhaitez ou des évolutions envisagées : les images fournies pour la démo (1240 pixels) couvrent largement toutes les largeurs.
  • Mettez les images dans l'ordre que vous souhaitez (en les numérotant, le cas échéant) dans un dossier que vous monterez sur le serveur dans le répertoire "site/file/source". Vous pouvez aussi passer par le gestionnaire de fichiers, mais il créera des vignettes inutiles. 
  • Adaptez ensuite le code ci-dessus.

 

L'explication en quatre étapes

  • Une image seule :
<div class="swiper-slide><img src="site/file/source/répertoire/image.jpg"></div>
  • Avec une bulle-titre au survol de la souris :
<div class="swiper-slide"><img src="site/file/source/répertoire/image.jpg" title="Bulle-titre"></div>
  • Avec un titre (éventuellement sur deux lignes) :
<div class="swiper-slide><img src="site/file/source/répertoire/image.jpg" title="L'Internaute Voyage"><div class="swiper-text">Titre sur<br />deux lignes</div></div>
  • La balise complète avec un lien vers la source de l'image (ou ailleurs) s'ouvrant dans un nouvel onglet :
<div class="swiper-slide"><a href="http://adresse complète" target="_blank"><img src="site/file/source/répertoire/image.jpg" title="Bulle-titre"></a><div class="swiper-text">Titre</div></div>

NB : La balise de la première image commence obligatoirement par <div class="swiper-slide swiper-slide-active">.


Désinstallation de "Swiper"

Copiez le contenu du dossier "swiper_restaure" (le dossier "site" et le fichier "index.php") à la racine du répertoire d'installation de votre site, acceptez le remplacement du fichier "index.php" et rafraîchissez la page.


2. Installation de "Banner" 

Procédez de la même façon avec le plugin "banner_install".

  • La position du slider est fonction de celle du menu : avant ou après la bannière, dans le site ou dans le fond du site. Il faut donc cliquer sur la zone du menu dans la page de personnalisation du thème pour procéder à ces ajustements.
  • Le paramétrage du slider se fait de la même façon dans le fichier "core/vendor/swiper/swiperslides.inc.php", à ceci près que les balises des images deviennent :
    <img src="<?php echo helper::baseUrl(false); ?>"site/file/source/répertoire/image.jpg">

Pour la désinstallation, désinstallez toujours "Banner" en premier en utilisant le plugin "banner_restaure" !

 

NB : En cas d'erreur de manipulation, pas de panique ! Remplacez simplement le fichier "core/layout/main.php" par la version d'origine prise dans l'archive de ZwiiCMS.

 

Testé sur une 8.312


 

  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
pascal    1

 Bonjour PeterRabbit
Un grand merci pour ce carrousel super propre et simple a utilisé et aussi un grand merci pour ta pédagogie pour le tuto d'installation 
je suis en plein teste (comme quoi toute arrive ;)

Partager ce message


Lien à poster
Partager sur d’autres sites
Iron    6

Bon et bien , c'est fait j'ai installé Zwipper et ça roule ma poule ! :love:

 

Par contre, je rencontre toujours le même souci que pour Google Maps : quelque soit la dimension que je donne à mes images, celle-ci prennent toute la largeur de mon site, ce qui fait que les images sont trop grandes (comme pour le carte Google Maps).

 

Vous avez une idée pour corriger cela ?

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    308

@Iron La première version de Zwiiper était uniquement destinée à installer le slider dans la bannière. J'avais fini par mettre au point un système qui permette de l'adapter automatiquement à la largeur choisie pour le site, et même en cas de redimensionnement. Ceci explique sans doute cela.

Une solution simple, sans intervention sur le code (mais ce serait possible), consiste à utiliser le modèle "colonnes asymétriques 4-8", par exemple, ce que @CroqueWeb a dû faire pour la copie d'écran ci-dessus : Bouton "+" de la barre d'outils de l'éditeur > Modèle > Thèmes > Colonnes...

 

Colle le code dans la colonne qui te convient, en passant par le code source de la page, bien sûr (bouton "<>"), comme ceci :

<div class="row">
<div class="col4">
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum, neque non vulputate hendrerit, arcu turpis dapibus nisl, id scelerisque metus lectus vitae nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec feugiat dolor et turpis finibus condimentum. Cras sit amet ligula sagittis justo.</p>
</div>
<div class="col8">
<div id="swiper" class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269338-torres-del-paine" target="_blank" rel="noopener"><img style="float: right;" title="L'Internaute Voyage" src="/8.312/site/file/source/patagonia/torres_del_paine.jpg" /></a>
<div class="swiper-text">Patagonie<br />Torres del Paine</div>
</div>

Et voici le résultat, à partir de la même image de 1240px fournie pour la démonstration :: 

 

5b90fab826744_Capturedu2018-09-0611-58-41.jpg.046f59b4d2a714206640b6fa51e18073.jpg

 

-_-

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites
CroqueWeb    99
Il y a 14 heures, Iron a dit :

quelque soit la dimension que je donne à mes images, celle-ci prennent toute la largeur de mon site

Sont-ce les images destinées au carrousel Zwiiper, ou celles que tu affiches dans tes pages ?

 

Modifié par CroqueWeb
fôte !

Partager ce message


Lien à poster
Partager sur d’autres sites
CroqueWeb    99
il y a 18 minutes, PeterRabbit a dit :

Une solution simple, sans intervention sur le code (mais ce serait possible), consiste à utiliser le modèle "colonnes asymétriques 4-8", par exemple, ce que @CroqueWeb a dû faire dans l'exemple ci-dessus

C'est bien ça, je me suis même amusé à l'améliorer :

 

chili.thumb.jpg.78175996d1168ef060cac19739b4417c.jpg

  • Haha 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    308

@Iron Juste une copie d'écran pour te montrer qu'avec des images de la même dimension, on peut obtenir des résultats différents, et qu'on peut multiplier les diaporamas.  o.O

 

5b9116c7109c5_Capturedu2018-09-0613-55-57.thumb.jpg.feca86ff4963309b408b21d6c8fa424b.jpg

 

PS : La petite mention en bas à droite ? C'est la seule contrepartie de la gratuité chez 000Webhost. Mais allez plutôt chez PingFiles, même si ce n'est pas "gratuit" : 1.99€ une fois pour toutes, qu'est-ce que c'est ?

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par PeterRabbit
      ZWII + SWIPER = ZWIIPER !
      Un slider facile à intégrer et à paramétrer.
       
      Ce plugin, établi à partir d'une démo de Stu Nicholls, intègrera le slider "Swiper" à votre site ZwiiCMS.
      "Swiper" est-il vraiment le most modern mobile touch slider qu'il prétend ? Voyez les démos pour vous faire une opinion... ou installez le plugin pour une démonstration privée grâce à deux jeux de photos "empruntées" à L'internaute Voyage.
       
      Réglages par défaut
      "Swiper" est paramétré pour démarrer automatiquement, tourner en boucle et afficher des titres. On peut passer d'une diapo à l'autre (dans les deux sens) au clavier, à la souris (au clic, au glisser ou à la molette) ou encore au doigt ou au stylet sur les écrans tactiles. Le tout responsivement et sans devoir recourir à jQuery, même si ce dernier est déjà intégré à Zwii pour d'autres raisons.  
      Les utilisateurs désireux de personnaliser leur "Swiper" consulteront avec profit la page API.
       
       
       
      Décompressez l'archive. Elle contient deux modules complémentaires :
      "Swiper", le programme lui-même, qu'il faut impérativement installer en premier et qui permet d'intégrer un carrousel à n'importe quelle page. "Banner", si vous souhaitez un slider dans la partie haute du site.  
      Les deux modules sont compatibles, et on peut installer autant de sliders que l'on veut dans les pages du site.
      Chaque module comprend un plugin d'installation ("install") et un plugin de restauration ("restaure"). Ce dernier remettra votre site dans son état initial en toute sécurité, sans aucun écrasement de fichier : le script réécrit les passages modifiés et supprime les répertoires ajoutés à l'installation.

      1. Installation de "Swiper"
       Ouvrez le dossier "swiper_install" et copiez-en le contenu (le fichier "index.php" et les deux dossiers "core" et "site") à la racine du répertoire d'installation de votre site. Acceptez le remplacement du fichier "index.php". Connectez-vous à votre site ou rafraîchissez la page. C'est fait.
       
      Mise en œuvre
      Éditez une page de votre site, ou créez-en une. Affichez le code source de la page (bouton "<>" de la barre d'outils de l'éditeur). Collez l'intégralité du code ci-après à l'endroit où vous souhaitez placer le slider, il s'adaptera à votre installation, même dans un sous-répertoire : <div id="swiper" class="swiper-container swiper-container-horizontal"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-active"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269338-torres-del-paine" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/torres_del_paine.jpg" /></a> <div class="swiper-text">Patagonie<br />Torres del Paine</div> </div> <div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269314-laguna-de-los-tres" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/fitz_roy.jpg" /></a> <div class="swiper-text">Laguna de los Tres<br />et mont Fitz Roy</div> </div> <div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269326-laguna-torre" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/laguna_torre.jpg" /></a> <div class="swiper-text">Laguna Torre</div> </div> <div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269311-canal-beagle" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/canal_beagle.jpg" /></a> <div class="swiper-text">Canal Beagle</div> </div> <div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269315-ile-de-chiloe" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/chiloe.jpg" /></a> <div class="swiper-text">Ile de Chilo&eacute;</div> </div> <div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269321-aysen" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="site/file/source/patagonia/puerto_aysen.jpg" /></a> <div class="swiper-text">Puerto Ays&eacute;n</div> </div> </div> <div id="swiper-button-prev" class="swiper-button-prev swiper-button-white">&nbsp;</div> <div id="swiper-button-next" class="swiper-button-next swiper-button-white">&nbsp;</div> Enjoy ! 

      Configuration d'un diaporama
      Préparez vos images pour qu'elles aient des formats et des dimensions identiques (c'est plus esthétique) et qu'elles soient d'un poids raisonnable. Vous pouvez bien sûr utiliser le format .png, pensez seulement à modifier l'extension dans le code. Le diaporama s'adaptant automatiquement à la largeur de votre site, concevez vos images en fonction de ce que vous souhaitez ou des évolutions envisagées : les images fournies pour la démo (1240 pixels) couvrent largement toutes les largeurs. Mettez les images dans l'ordre que vous souhaitez (en les numérotant, le cas échéant) dans un dossier que vous monterez sur le serveur dans le répertoire "site/file/source". Vous pouvez aussi passer par le gestionnaire de fichiers, mais il créera des vignettes inutiles.  Adaptez ensuite le code ci-dessus.  
      L'explication en quatre étapes
      Une image seule : <div class="swiper-slide><img src="site/file/source/répertoire/image.jpg"></div> Avec une bulle-titre au survol de la souris : <div class="swiper-slide"><img src="site/file/source/répertoire/image.jpg" title="Bulle-titre"></div> Avec un titre (éventuellement sur deux lignes) : <div class="swiper-slide><img src="site/file/source/répertoire/image.jpg" title="L'Internaute Voyage"><div class="swiper-text">Titre sur<br />deux lignes</div></div> La balise complète avec un lien vers la source de l'image (ou ailleurs) s'ouvrant dans un nouvel onglet : <div class="swiper-slide"><a href="http://adresse complète" target="_blank"><img src="site/file/source/répertoire/image.jpg" title="Bulle-titre"></a><div class="swiper-text">Titre</div></div> NB : La balise de la première image commence obligatoirement par <div class="swiper-slide swiper-slide-active">.

      Désinstallation de "Swiper"
      Copiez le contenu du dossier "swiper_restaure" (le dossier "site" et le fichier "index.php") à la racine du répertoire d'installation de votre site, acceptez le remplacement du fichier "index.php" et rafraîchissez la page.

      2. Installation de "Banner" 
      Procédez de la même façon avec le plugin "banner_install".
      La position du slider est fonction de celle du menu : avant ou après la bannière, dans le site ou dans le fond du site. Il faut donc cliquer sur la zone du menu dans la page de personnalisation du thème pour procéder à ces ajustements. Le paramétrage du slider se fait de la même façon dans le fichier "core/vendor/swiper/swiperslides.inc.php", à ceci près que les balises des images deviennent : <img src="<?php echo helper::baseUrl(false); ?>"site/file/source/répertoire/image.jpg"> Pour la désinstallation, désinstallez toujours "Banner" en premier en utilisant le plugin "banner_restaure" !
       
      NB : En cas d'erreur de manipulation, pas de panique ! Remplacez simplement le fichier "core/layout/main.php" par la version d'origine prise dans l'archive de ZwiiCMS.
       
      Testé sur une 8.312