Aller au contenu
Support de Zwii

Rechercher dans la communauté

Affichage des résultats pour les étiquettes 'slider'.



Plus d’options de recherche

  • Rechercher par étiquettes

    Saisir les étiquettes en les séparant par une virgule.
  • Rechercher par auteur

Type du contenu


Forums

  • Support de Zwii
    • Informations et nouveautés
    • Ateliers de développement
    • Un bug découvert ?
    • Questions sur l'installation et l'utilisation
    • Trucs et astuces
    • Support des téléchargements
  • Communauté
    • Votre site

Catégories

  • Modules
    • Modules officiels
    • Galeries
    • Le cimetière des scripts
  • Modifications et astuces
  • Thèmes
  • Tutoriels

Rechercher les résultats dans…

Rechercher les résultats qui contiennent…


Date de création

  • Début

    Fin


Dernière mise à jour

  • Début

    Fin


Filtrer par nombre de…

Inscription

  • Début

    Fin


Groupe


À propos de moi


Site internet

4 résultats trouvés

  1. Voir le fichier Diaporama Slider Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii. Voir ce module en situation, expérimenter ce module ! Version 3.1 testée avec Zwii 9.2.28, Zwii 10.0.092 et Zwii 10.1 Par configuration vous pourrez obtenir cet aspect : La navigation se fait en cliquant sur la zone droite ou gauche de l'image. Le texte apparaît de façon progressive au survol de l'image. Arrêt du défilement automatique au survol de l'image. Celui là : Navigation par boutons discrets. Le texte et les boutons apparaissent de façon progressive au survol de l'image. Arrêt du défilement automatique au survol de l'image. Ou encore cette version avec légende en haut et boutons de navigation rectangulaires : Une version sans les puces de navigations : Le module Slider peut être utilisé dans une page avec gabarit Le diaporama est basé sur responsiveslides.com, le module Zwii slider est basé sur le module Zwii gallery de @Rémi. Merci à @Gilux et à @roger pour leurs contributions dans le CSS et à @Fred pour ses conseils et la mise à jour du fichier edit.js.php. #Installation 1- Dézipper l'archive slider_vxx.zip Elle contient le dossier slider et 1 autre fichier dont nous verrons l'utilité plus loin (edit.js.php). Si vous avez déjà fait l'installation d'une ancienne version du module slider, il est préférable de la supprimer avant de poursuivre. Si la version précédemment installée était >= 2.3 vous pourrez réutiliser votre diaporama après avoir procédé à nouveau à son paramétrage, pour une version plus ancienne il faudra le recréer. 2 - Avec votre logiciel FTP transférer le dossier slider dans le dossier module de votre site (attention module, pas core/module) Résultat obtenu pour le site dev9test slider/vendor/js/ contient le fichier javascript nécessaire au fonctionnement du module. slider/view/index/ contient 4 fichiers : index.php responsable de l'affichage du diaporama, index.css qui regroupe tous le CSS du diaporama et themes.gif, themes.svg pour les 2 boutons proposés. slider/view/config/ et slider/view/edit/ proviennent du module gallery et sont utilisés pour le paramétrage du diaporama. Ils sont légèrement modifiés. #mode d'emploi 1 - Créer une nouvelle page, modifier cette page 2 - Sélectionner le module Slider et choisir la position du module dans la page A partir de la version 9.2.07 de Zwii l'option "Position du module dans la page" apparaît. Elle vous permet de choisir où le diaporama va s'afficher dans la page. La position "libre" vous permet d'insérer du contenu avant et après le diaporama en saisissant [MODULE] à l'endroit voulu dans votre page. Avec des versions 9 de Zwii plus anciennes vous pouvez remplacer par FTP le fichier core/module/page/view/edit/edit.js.php par celui contenu dans l'archive et dont on a parlé plus haut. Si non votre diaporama s'affichera uniquement en bas de page. Cliquez sur l'icone "roue dentée", positionnée à côté du choix de module, pour passer à l'étape 3. 3 - Choisir le dossier contenant les images Vous aurez au préalable chargé les images du diaporama dans un dossier à l'intérieur de site/file/source/ (par FTP ou par le gestionnaire de fichiers intégré à Zwii). A ce propos 3 remarques : * Le diaporama va s'adapter automatiquement au format (16/9, 4/3,...) ou à l'orientation des images mais je trouve que le meilleur résultat visuel sera obtenu avec des images de même format et de même orientation. Mais ce n'est qu'une opinion personnelle, vous êtes libre de mixer différentes images. * Le diaporama va afficher l'image dans le même conteneur quelque soit sa taille, une image trop petite va être dilatée, une image trop grande va augmenter le temps de chargement du diaporama. Je vous conseille des images de largeur minimum 800px si votre paramétrage de la " Largeur maxi du diaporama " est à 800px. * L'ordre de passage est maintenant paramétrable. Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci : Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama". 4 - Paramétrage du diaporama. Sur cette page de paramétrage, après un rappel du nom et du dossier cible des images, vous avez accès aux réglages suivants : Choix du type de navigation manuelle par boutons ou par zones droite ou gauche de l'image, Choix du type de boutons, flèche dans un rectangle noir ou dans un cercle blanc. Visibilité des puces de navigation ou pager, Largeur maxi du diaporama en pixels, le réglage "100%" correspond à la largeur du site définie en configuration - 40 pixels, La durée de la transition, en secondes ou en millisecondes, entre diapositives (fading) , La durée totale d'affichage, en secondes ou en millisecondes, d'une image (fading compris, au minimum durée de la transition + 100ms), La visibilité de la légende uniquement au survol de l'image, toujours visible ou jamais visible, La position de la légende en bas ou en haut de l'image, Le temps d'apparition de la légende et des boutons, Le choix du type de tri des images, La saisie des légendes. N'oubliez pas d'enregistrer. # C'est possible Dans un même site Zwii vous pouvez insérer plusieurs diaporamas avec pour chacun des paramétrages différents. # C'est pas possible Dans une page Zwii vous ne pouvez insérer qu'un seul diaporama. Avec Zwii ce n'est pas possible d'insérer plus d'un module par page, vous ne pourrez donc pas insérer un diaporama (module slider) dans une page de blog (module blog) ou dans un formulaire (module form). Contributeur sylvainlelievre Soumis 25/09/2019 Catégorie Galeries  
  2. Version 3.1

    89 téléchargements

    Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii. Voir ce module en situation, expérimenter ce module ! Version 3.1 testée avec Zwii 9.2.28, Zwii 10.0.092 et Zwii 10.1 Par configuration vous pourrez obtenir cet aspect : La navigation se fait en cliquant sur la zone droite ou gauche de l'image. Le texte apparaît de façon progressive au survol de l'image. Arrêt du défilement automatique au survol de l'image. Celui là : Navigation par boutons discrets. Le texte et les boutons apparaissent de façon progressive au survol de l'image. Arrêt du défilement automatique au survol de l'image. Ou encore cette version avec légende en haut et boutons de navigation rectangulaires : Une version sans les puces de navigations : Le module Slider peut être utilisé dans une page avec gabarit Le diaporama est basé sur responsiveslides.com, le module Zwii slider est basé sur le module Zwii gallery de @Rémi. Merci à @Gilux et à @roger pour leurs contributions dans le CSS et à @Fred pour ses conseils et la mise à jour du fichier edit.js.php. #Installation 1- Dézipper l'archive slider_vxx.zip Elle contient le dossier slider et 1 autre fichier dont nous verrons l'utilité plus loin (edit.js.php). Si vous avez déjà fait l'installation d'une ancienne version du module slider, il est préférable de la supprimer avant de poursuivre. Si la version précédemment installée était >= 2.3 vous pourrez réutiliser votre diaporama après avoir procédé à nouveau à son paramétrage, pour une version plus ancienne il faudra le recréer. 2 - Avec votre logiciel FTP transférer le dossier slider dans le dossier module de votre site (attention module, pas core/module) Résultat obtenu pour le site dev9test slider/vendor/js/ contient le fichier javascript nécessaire au fonctionnement du module. slider/view/index/ contient 4 fichiers : index.php responsable de l'affichage du diaporama, index.css qui regroupe tous le CSS du diaporama et themes.gif, themes.svg pour les 2 boutons proposés. slider/view/config/ et slider/view/edit/ proviennent du module gallery et sont utilisés pour le paramétrage du diaporama. Ils sont légèrement modifiés. #mode d'emploi 1 - Créer une nouvelle page, modifier cette page 2 - Sélectionner le module Slider et choisir la position du module dans la page A partir de la version 9.2.07 de Zwii l'option "Position du module dans la page" apparaît. Elle vous permet de choisir où le diaporama va s'afficher dans la page. La position "libre" vous permet d'insérer du contenu avant et après le diaporama en saisissant [MODULE] à l'endroit voulu dans votre page. Avec des versions 9 de Zwii plus anciennes vous pouvez remplacer par FTP le fichier core/module/page/view/edit/edit.js.php par celui contenu dans l'archive et dont on a parlé plus haut. Si non votre diaporama s'affichera uniquement en bas de page. Cliquez sur l'icone "roue dentée", positionnée à côté du choix de module, pour passer à l'étape 3. 3 - Choisir le dossier contenant les images Vous aurez au préalable chargé les images du diaporama dans un dossier à l'intérieur de site/file/source/ (par FTP ou par le gestionnaire de fichiers intégré à Zwii). A ce propos 3 remarques : * Le diaporama va s'adapter automatiquement au format (16/9, 4/3,...) ou à l'orientation des images mais je trouve que le meilleur résultat visuel sera obtenu avec des images de même format et de même orientation. Mais ce n'est qu'une opinion personnelle, vous êtes libre de mixer différentes images. * Le diaporama va afficher l'image dans le même conteneur quelque soit sa taille, une image trop petite va être dilatée, une image trop grande va augmenter le temps de chargement du diaporama. Je vous conseille des images de largeur minimum 800px si votre paramétrage de la " Largeur maxi du diaporama " est à 800px. * L'ordre de passage est maintenant paramétrable. Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci : Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama". 4 - Paramétrage du diaporama. Sur cette page de paramétrage, après un rappel du nom et du dossier cible des images, vous avez accès aux réglages suivants : Choix du type de navigation manuelle par boutons ou par zones droite ou gauche de l'image, Choix du type de boutons, flèche dans un rectangle noir ou dans un cercle blanc. Visibilité des puces de navigation ou pager, Largeur maxi du diaporama en pixels, le réglage "100%" correspond à la largeur du site définie en configuration - 40 pixels, La durée de la transition, en secondes ou en millisecondes, entre diapositives (fading) , La durée totale d'affichage, en secondes ou en millisecondes, d'une image (fading compris, au minimum durée de la transition + 100ms), La visibilité de la légende uniquement au survol de l'image, toujours visible ou jamais visible, La position de la légende en bas ou en haut de l'image, Le temps d'apparition de la légende et des boutons, Le choix du type de tri des images, La saisie des légendes. N'oubliez pas d'enregistrer. # C'est possible Dans un même site Zwii vous pouvez insérer plusieurs diaporamas avec pour chacun des paramétrages différents. # C'est pas possible Dans une page Zwii vous ne pouvez insérer qu'un seul diaporama. Avec Zwii ce n'est pas possible d'insérer plus d'un module par page, vous ne pourrez donc pas insérer un diaporama (module slider) dans une page de blog (module blog) ou dans un formulaire (module form).
  3. Voir le fichier Zwiiper, le retour 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', Contributeur McGregor Soumis 04/09/2018 Catégorie Galeries  
  4. McGregor

    Zwiiper, le retour

    Version 2.4.0

    145 téléchargements

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