Aller au contenu
Support de Zwii

augras

Modérateurs
  • Compteur de contenus

    887
  • Inscription

  • Dernière visite

Réputation sur la communauté

265 Excellent

À propos de augras

  • Rang
    Passionné

Informations personnelles

Visiteurs récents du profil

653 visualisations du profil
  1. Bonjour, Plutôt que la faire disparaître à cet endroit plutôt judicieux pour moi, est-ce qu'une fenêtre de confirmation de la suppression ne serait pas préférable ? Je les déteste habituellement mais dans le cas présent on peut effectivement se tromper avec des conséquences fâcheuses, même s'il y a un backup automatique et que en bon élève on a tout en 3 exemplaires... c'est toujours du temps de perdu. philippe
  2. Problème résolu à partir de la version 10.3.00 : à installer de toute urgence !
  3. augras

    Utiliser swiper

    Bon, le soucis est au niveau du css : manifestement le css pour faire défiler le texte sur une image n'a pas été repris à un moment dans le développement de swiper. On peut y remédier en ajoutant le code nécessaire dans custom.css : cf le premier message. Il y a un petit effet rembobinage qui n'existait pas originellement mais le css ayant une forte tendance à me donner des maux de tête je laisse tomber ce point. Si quelqu'un tombé dans le css à la naissance a un peu de temps et veut bien regarder tant mieux et merci à lui.
  4. augras

    Utiliser swiper

    Petit progrès concernant le texte : la superposition est due à l'option effect: 'fade', que je trouvais sympa et avait ajouté ici. Je l'ai retirée des options dans le code ci-dessus. Reste le défilement du texte sur les images qui défile bien en même temps que l'image mais en-dessous : pas certain de trouver une solution mais c'est un moindre mal.
  5. augras

    Utiliser swiper

    Pour ceux qui ont utilisés d'anciennes versions de swiper avec la possibilité de faire défiler du texte sur les images ou bien même tout seul sans image il y a un inconvénient de taille avec cette dernière version (et je suppose pas mal de versions antérieures) : le défilement de texte ne fonctionne plus... tout se superpose et en plus dans le cas du défilement sur une image et bien c'est maintenant sous l'image et le texte des images successives se superpose également. Dans les démos de la dernière version rien ne concerne ce défilement de texte. Bon, on peut certainement faire défiler du texte autrement mais le faire défiler sur les images était plutôt sympa.
  6. Pour les modalités d'utilisation de swiper cf http://forum.zwiicms.com/topic/2098-utiliser-swiper/
  7. augras

    Utiliser swiper

    Bonjour, Swiper est un slider qui possède énormément de possibilités : https://swiperjs.com/. Il n'y a plus de plugin swiper et swiper n'est plus intégré en tant que module : le but n'est pas d'en faire un mais après avoir indiqué dans un autre fil d'utiliser swiper pour mettre une vidéo en bannière je me rends bien compte qu'il faut expliquer comment l'utiliser ! Ce qui suit est à faire en étant connecter en tant qu'administrateur puis clic sur Configurer le site (icône avec les rouages) et enfin rubrique Scripts. Pour une utilisation rapide sans rien installer localement (CDN): -1- Insérer dans head <!--swiper--> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> -2- Insérer dans body <!-- swiper --> <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> $(document).ready(function() { var mySwiper = new Swiper('.swiper-container', { <!--direction: 'vertical',--> speed:1000, centeredSlides:true, spaceBetween: 20, roundLengths:true, loop: true, autoplay: { <!--reverseDirection: true,--> delay: 6000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', type: 'progressbar', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, keyboard: { enabled: true, }, mousewheel: true, }); }); </script> Pour une installation locale : -1- Télécharger la dernière version : https://unpkg.com/browse/swiper@6.2.0/ et déposer le contenu dans le dossier site/include/ de votre zwii. Pour la suite je suppose que toute l'arborescence du téléchargement se trouve dans un dossier swiper -2- Insérer dans head: <!--swiper--> <link rel="stylesheet" href="site/include/swiper/swiper-bundle.css"> <link rel="stylesheet" href="site/include/swiper/swiper-bundle.min.css"> -3- Insérer dans body : <!-- swiper --> <script src="site/include/swiper/swiper-bundle.js"></script> <script src="site/include/swiper/swiper-bundle.min.js"></script> <script> $(document).ready(function() { var mySwiper = new Swiper('.swiper-container', { <!--direction: 'vertical',--> speed:1000, centeredSlides:true, spaceBetween: 20, roundLengths:true, loop: true, autoplay: { <!--reverseDirection: true,--> delay: 6000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', type: 'progressbar', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, keyboard: { enabled: true, }, mousewheel: true, }); }); </script> Les lignes de code ci-dessus sont adaptées à la dernière version stable de swiper, la 6.2.0, à la date de rédaction de ce message : elles seront éventuellement à adapter suivant les modifications dans les versions futures. Usage d'un CDN ou installation locale Swiper est maintenant presque prêt à être utilisé. Le code css nécessaire au défilement du texte n'est apparemment plus présent et il faut donc l'ajouter au fichier custom.css : il faut ce connecter en administrateur, cliquer sur Personnaliser les thème (icône petit pinceau) puis sur Editeur CSS. Ajouter dans l'éditeur le code suivant : /*Swiper*/ .swiper-text { display:inline-block; padding:10px; background:rgba(0,0,0,0.5); border-radius:8px; color:#fff; font:300 25px/30px 'Lato', sans-serif; position:absolute; left:-1000%; top:-10px; transition:1s 1s; } .swiper-slide-active .swiper-text { top:30px; left:20px; } @media only screen and (max-width: 800px) { /* make thumbnails wrap to two rows on tablets */ .swiper-slide .swiper-text { font:300 20px/25px 'Lato', sans-serif; } } @media only screen and (max-width: 480px) { /* make thumbnails wrap to three rows on mobiles */ .swiper-slide .swiper-text { font:300 15px/18px 'Lato', sans-serif; top:10px; padding:5px; } .swiper-slide-active .swiper-text { left:5px; } } Et ne pas oublier d'enregistrer. Vous pouvez maintenant insérer le code suivant dans une page pour voir le résultat (les images sont fournis avec les exemples de zwii et tout devrait fonctionner tel quel... si vous les avez installés, et sous réserve de remplacer "zwii91dev59" par votre propre dossier d'installation de zwii) : <div id="swiper" class="swiper-container swiper-container-horizontal"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/space/cosmos.jpg" target="_blank" rel="noopener" data-lity=""><img title="Cosmos" src="/zwii91dev59/site/file/source/galerie/space/cosmos.jpg" /></a> <div class="swiper-text">Le cosmos</div> </div> <div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/space/nebula.jpg" target="_blank" rel="noopener" data-lity=""><img title="Nebula" src="/zwii91dev59/site/file/source/galerie/space/nebula.jpg" /></a> <div class="swiper-text">Une nébuleuse</div> </div> <div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/landscape/iceberg.jpg" target="_blank" rel="noopener" data-lity=""><img title="Iceberg" src="/zwii91dev59/site/file/source/galerie/landscape/iceberg.jpg" /></a> <div class="swiper-text">GlaGla</div> </div> <div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/landscape/meadow.jpg" target="_blank" rel="noopener" data-lity=""><img title="Meadow" src="/zwii91dev59/site/file/source/galerie/landscape/meadow.jpg" /></a> <div class="swiper-text">Super !</div> </div> </div> <div class="swiper-pagination"></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> Nous avons ainsi l'usage classique de Swiper avec définition des options dans le 3ème script placer dans body (cf le site de swiper pour les nombreuses possibilités offertes : https://swiperjs.com/). Maintenant il s'agit d'expliquer comment intégrer un diaporama swiper en bannière. Avant tout il faut savoir que le fichier main.php a besoin d'être modifié : cela implique qu'à chaque mise à jour de zwii il faudra refaire cette modification puisque le fichier sera écrasé par la mise à jour. Mais pas de panique puisque cette modification est quasi automatique : il suffit d'exécuter un script. Le coeur du diaporama en bannière est le fichier swiperslides.inc.php placé dans site/include/swiper/ : c'est lui qu'il faut modifier pour changer les images du diaporama, ou mettre une vidéo en bannière. Vous pouvez utiliser celui joint ici pour vous rendre compte immédiatement du rendu. Maintenant il faut dire à zwii d'utiliser le fichier swiperslides.inc.php dans la bannière, quelle que soit la position de cette bannière : il s'agit d'exécuter le script install_swiper_banniere.php joint . Avant toute chose faite une copie de votre fichier main.php afin de prévenir tout incident (situé dans le dossier /core/layout/main.php). Placer le fichier install_swiper_banniere.php à la racine de votre site et exécuter le en saisissant dans la barre d'adresse de votre navigateur http://votre_site/install_swiper_banniere.php Renommez ensuite le fichier du script ou déplacez le afin d'éviter qu'une personne mal intentionnée ne l'exécute à de multiples reprises : ou tout simplement donnez lui un nom que vous serez le seul à connaître. Pour modifier votre bannière il suffit maintenant de modifier le fichier swiperslides.inc.php. Par exemple pour mettre une vidéo supprimer tout le contenu du fichier et le remplacer par : <video width="100%" height="auto" autoplay loop> <source src="https://augras.eu/zwii91dev59/site/file/source/bellaciaoCasa.mp4" type="video/mp4" /></video> Pensez à exécuter le script "d'installation" à chaque mise à jour : sinon la bannière ne sera tout simplement pas présente. Pour faciliter la vie de ceux qui veulent mettre plein d'images dans leurs diaporamas @sylvainlelievre a développé plusieurs scripts pour automatiser la création du code à placer dans le fichier swiperslides.inc.php : tout est dans le fichier swiper_automatisation_V3.zip joint qu'il faut décompresser et toutes les explications sont dans les scripts. Vraiment super pratique : MERCI @sylvainlelievre. swiperslides.inc.php install_swiper_banniere.php swiper_automatisation_V3.zip
  8. Bonjour, Pour mettre une vidéo en bannière j'ai utilisé swiper et surtout l'adaptation qui permet de l'utiliser en bannière. J'ai simplement modifié le contenu du fichier swiperslides.inc.php en supprimant tout son contenu et en le remplaçant par <video width="100%" height="auto" autoplay loop> <source src="/zwii91dev59/site/file/source/bellaciaoCasa.mp4" type="video/mp4" /></video> Le résultat est là : https://augras.eu/zwii91dev59/ c'est pour l'exemple avec la vidéo sous le coude et il y a une autre bannière au-dessus sur ce site de test mais qui évidemment ne sera pas là dans ton cas. La vidéo n'est pas adaptée mais c'est juste pour montrer que ça fonctionne relativement facilement. Je laisse la vidéo le temps que le sujet avance mais par la suite je remettrai le défilement des photos. Philippe
  9. Bonjour, je fusionne car question déjà abordée. @bernards2r peux-tu indiquer [RESOLU] au début du sujet s'il te plaît ? Merci, Philippe
  10. Bonjour, @Thispy peux-tu indiquer [RESOLU] au début de ton sujet s'il te plaît ? Merci, Philippe
  11. Tu as fait quoi comme correction finalement ? Bon week-end également : le soleil est de retour ! Philippe
  12. Bonjour, En place sur 6 sites. Le chemin pour les log est bon 🙂
  13. Peut-être passé inaperçu et inutile mais au cas où :
  14. Est-ce que ça ne serait pas ../site au lieu de ./site pour remonter un niveau au-dessus et faire sauter la page stats du chemin ?
  15. Comme dit dans notre échange privé j'ai tout reversé et tout semble ok maintenant : désolé pour la fausse alerte... on va attendre un peu pour voir ce que ça donne mais c'est bien parti. Le soucis avec les logs est que le chemin n'est pas bon. Je prends en exemple mon site augras.eu avec une page statistiques qui s'appelle "stats" : le chemin généré pour visualisé le fichier est augras.eu/stats/site/file/statislite/fichier.json alors que ce chemin n'existe pas et devrait être augras.eu/site/file/statislite/fichier.json. Philippe
×
×
  • Créer...