Aller au contenu
Support de Zwii et Yocto

Messages recommandés

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é</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én</div>
</div>
</div>
<div id="swiper-button-prev" class="swiper-button-prev swiper-button-white"> </div>
<div id="swiper-button-next" class="swiper-button-next swiper-button-white"> </div>
</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">.

 

 

Adaptation aux barres latérales de ZwiiCMS 9

Le code du diaporama du module "Swiper" peut se placer dans celui d'une barre latérale, mais il faut supprimer les lignes correspondant aux titres...

    <div class="swiper-text">Patagonie<br />Torres del Paine</div>

... et aux fléches de navigation :

    <div id="swiper-button-prev" class="swiper-button-prev swiper-button-white"> </div>
    <div id="swiper-button-next" class="swiper-button-next swiper-button-white"> </div>

 

Défilement vertical

  • Pour une utilisation dans une page, remplacez "horizontal" par "vertical" dans la première ligne du diaporama ci-dessus.
  • Pour une utilisation dans une barre latérale, remplacez cette première ligne par celle-ci, qui fixera aussi la hauteur du diaporama à 150 px (hauteur à affiner le cas échéant) :
    <div id="swiper" class="swiper-container swiper-container-vertical" style="height: 150px;">
  • Pour une utilisation dans la bannière, remplacez "horizontal" par "vertical" à la ligne 2 de "core/vendor/swiper/swiperslides.inc.php".
  • Dans tous les cas, éditez ensuite "core/vendor/swiper/swiperjs.min.inc.php" et décommentez la 16 :
    direction: 'vertical',

 

Inversion du sens de défilement (horizontal ou vertical)

Décommentez la ligne 22 de "core/vendor/swiper/swiperjs.min.inc.php" :

    reverseDirection: true,

NB : Il n'est pas prévu que "Swiper" et "Banner" puissent fonctionner dans des formats et des sens de défilement différents.
 

 

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.

 

3. Restauration après une mise à jour automatique de ZwiiCMS

Ne réinstallez pas "Swiper" ou "Banner", vous risqueriez d'écraser le fichier de configuration de votre bannière.

  • Éditez "core/core.php".
  • CRTL-F 'zwiico' (avec les guillemets simples) vous conduira à l'endroit voulu.
  • Ajoutez 'swiper' à la ligne suivante (pour le bon fonctionnement du script de désinstallation) sans oublier la virgule, comme ceci :
			'zwiico',
			'swiper',

 

 

 

 


 

  • J'aime 1
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

 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

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

@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
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
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

@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

Bonjour,

C'est bien des images mais on peut ne vouloir faire défiler que du texte.
Mais swiper veut absolument une image : il suffit de lui mettre une image transparente de la taille voulue (plus le texte est long plus l'image devra être grande) et ça fonctionne parfaitement.
Pour 3 lignes de texte une image de 100x200 suffit.

Philippe

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Non, @augras, Swiper ne veut pas absolument une image : les démos du site le montrent, et le code source le confirme, pas besoin d'image du tout :

 

swiper.png.15f10b154a117cb66d0395eaef77d130.png

 

Avec un peu de css ce serait mieux... 😶

Mais à l'époque, il y avait des demandes pour un slider. Ceci explique cela. 🙂

 

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

@PeterRabbit tu penses à l'exemple scroll container ?

Quand je l'ai vu je n'ai pas pensé qu'il faisait défiler du texte comme les photos mais juste que l'on pouvait afficher un pavé de texte que l'on fait défiler avec la roulette de la souris.

Je regarde d'abord la dev18 et ensuite scroll container.

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, augras a dit :

@PeterRabbit tu penses à l'exemple scroll container ?

 

Non non. Suis le lien ci-dessus et regarde le source comme je t'y encourageais. Copie les divs du <body> dans "swiperslides.inc.php". Pas besoin d'images pour faire défiler du texte.

Partager ce message


Lien à poster
Partager sur d’autres sites

ok, je me suis mal exprimé : j'a indiqué banière texte et donc tu as traduit par Banner et non swiper.
En fait ce que je cherche est un swiper avec seulement du texte : avec swiper je place ça où je veux, alors qu'avec Banner c'est uniquement en bannière en haut du site.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 1 heure, augras a dit :

ok, je me suis mal exprimé : j'a indiqué banière texte et donc tu as traduit par Banner et non swiper.
En fait ce que je cherche est un swiper avec seulement du texte : avec swiper je place ça où je veux, alors qu'avec Banner c'est uniquement en bannière en haut du site.

 

@augras "Banner" ? Mon plugin peut s'installer en bannière ou dans une page, même si j'ai largement eu le temps de l'oublier. Sur mon site d'essais, il est en bannière, c'est tout.

J'ai bien traduit "Swiper", d'autant que je sais qu'il te plaît. Je réponds dans ton sens depuis le début et je suis en phase avec les barres latérales,

 

Je réexplique. Remplace le contenu de  "swiperslides.inc.php" par celui-ci, et essaie : tu pourras revenir en arrière.

<div class="swiper-container swiper-container-horizontal" id="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>

Je l'ai essayé pour te faire une copie d'écran. Avec un peu de css, ça peut faire un joli bandeau défilant sans aucun besoin d'image. Et sans flèches de navigation. Il suffit de remplacer "Slide x" par le texte que tu veux avec éventuellement des <br> pour passer à la ligne.

Ça je n'ai pas essayé, mais je compte sur toi maintenant. 😄

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Ce qui me perturbe c'est que le fichier swipperslides.inc.php n'existe pas si on installe seulement swiper, il faut installer banner pour l'avoir !

J'ai bien compris que banner utilise swiper,mais est positionné uniquement en bannière.

Mais le code que tu donnes fonctionne directement avec une page ou une barre latérale quand on le colle via l'éditeur : j'ai juste eu à ajouter <div> avant et </div> après.

Merci une fois de plus @PeterRabbit.

Partager ce message


Lien à poster
Partager sur d’autres sites

@augras, je crois que tu connais mieux ce plugin que moi : quand je ne suis plus dans les choses, je les oublie très vite (mon boulot m'a fait une mémoire LIFO).

 

Je viens de survoler mon mode d'emploi et je comprends maintenant pourquoi tu parles de "Banner" : ça me semblait clair à l'époque, mais au temps pour moi... C'est le même Swiper, c'est seulement la position qui change.

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Eh bien moi, je ne m'en sors pas... 😞

 

Question de gros bleu...

Le 04/09/2018 à 18:38, PeterRabbit a dit :
  • 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".

Les dossiers "core" et "site", on les fusionne j'imagine ? Sinon, on écrase son site ?

 

Et quid du fichier "index.php" après une mise à jour ?

 

Merci !

Partager ce message


Lien à poster
Partager sur d’autres sites

Meuh non, @Xav7800 ! 🙄

Fais-moi confiance et suis l'explication sans te poser de questions.

Ou alors explore l'archive et tu comprendras : elle reconstitue l'arborescence de Zwii pour placer les nouveaux fichiers qu'il faut là où il faut. Pour achever de te rassurer, édite "index.php" et compares-en le contenu avec celui de "tmp/index_distrib".

Ou alors, reprends mes trois ateliers.

Ou pour terminer, fais-ça sur un site d'essai.

Partager ce message


Lien à poster
Partager sur d’autres sites

Honnêtement, @Xav7800, c'est la première fois qu'on me pose autant de questions inquiètes ! Tu seras donc mon saint Thomas... 

Il n'y a rien à comprendre, juste à faire confiance et à faire : je l'ai essayé et réessayé : 

 

swiper.thumb.jpg.5466d87ce45bd35ddb8b1ea8cb51b926.jpg

 

Sinon, tu peux aussi demander à @augras : lui, présentement, Zwiiper grand gourou ! 😊

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • 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é</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én</div> </div> </div> <div id="swiper-button-prev" class="swiper-button-prev swiper-button-white"> </div> <div id="swiper-button-next" class="swiper-button-next swiper-button-white"> </div> </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">.
       
       
      Adaptation aux barres latérales de ZwiiCMS 9
      Le code du diaporama du module "Swiper" peut se placer dans celui d'une barre latérale, mais il faut supprimer les lignes correspondant aux titres...
      <div class="swiper-text">Patagonie<br />Torres del Paine</div> ... et aux fléches de navigation :
      <div id="swiper-button-prev" class="swiper-button-prev swiper-button-white"> </div> <div id="swiper-button-next" class="swiper-button-next swiper-button-white"> </div>  
      Défilement vertical
      Pour une utilisation dans une page, remplacez "horizontal" par "vertical" dans la première ligne du diaporama ci-dessus. Pour une utilisation dans une barre latérale, remplacez cette première ligne par celle-ci, qui fixera aussi la hauteur du diaporama à 150 px (hauteur à affiner le cas échéant) :     <div id="swiper" class="swiper-container swiper-container-vertical" style="height: 150px;"> Pour une utilisation dans la bannière, remplacez "horizontal" par "vertical" à la ligne 2 de "core/vendor/swiper/swiperslides.inc.php". Dans tous les cas, éditez ensuite "core/vendor/swiper/swiperjs.min.inc.php" et décommentez la 16 :     direction: 'vertical',  
      Inversion du sens de défilement (horizontal ou vertical)
      Décommentez la ligne 22 de "core/vendor/swiper/swiperjs.min.inc.php" :
          reverseDirection: true, NB : Il n'est pas prévu que "Swiper" et "Banner" puissent fonctionner dans des formats et des sens de défilement différents.
       
       
      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.
       
      3. Restauration après une mise à jour automatique de ZwiiCMS
      Ne réinstallez pas "Swiper" ou "Banner", vous risqueriez d'écraser le fichier de configuration de votre bannière.
      Éditez "core/core.php". CRTL-F 'zwiico' (avec les guillemets simples) vous conduira à l'endroit voulu. Ajoutez 'swiper' à la ligne suivante (pour le bon fonctionnement du script de désinstallation) sans oublier la virgule, comme ceci : 'zwiico', 'swiper',  
       
       
       
×
×
  • Créer...