Aller au contenu
Support de Zwii et Yocto

Messages recommandés

Le 08/04/2019 à 00:27, debgen a dit :

Bjr @PeterRabbit,

Retour test Zwiiper 201 avec Zwii9015 avec les modifications proposées pour un défilement vertical :

- dans une page seule : OK

- dans une page et renvoi du lien de l'image cliquée à une autre page avec barre latérale et Zwiiper "vertical" OK

Grand merci.

Vu la nouvelle version 2.3.0 : je réaliserai un test avec la 9.0.16 (ou plus récente si disponible au moment de mes essais)

@+, Deb

@PeterRabbit : Confirmation Zwiiper 2.3.0 en mode vertical : OK en local et site hébergé O2Switch en version 9.0.18

 

Comme tu l'expliques précédemment, après mise à jour d'une ancienne version vers la plus récente, il faut corriger le main.php dans core/layout en y ajoutant

- les 2 link vers core/vendor/swiper/swiper.min.css et core/vendor/swiper/swiper.css.php

- et l'include de core/vendor/swiper/swiperjs.min.inc.php

Bonne journée, Deb

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, debgen a dit :

Comme tu l'expliques précédemment, après mise à jour d'une ancienne version vers la plus récente, il faut corriger le main.php dans core/layout en y ajoutant

- les 2 link vers core/vendor/swiper/swiper.min.css et core/vendor/swiper/swiper.css.php

- et l'include de core/vendor/swiper/swiperjs.min.inc.php

 

Oui, forcément : la technique du plugin date du pléistocène. Je n'avais pas jugé bon de mettre un test pour permettre une éventuelle réinstallation propre sans désinstallation préalable. Mais il faut dire que les versions ne se bousculaient pas, à l'époque et que la mise à jour automatique n'est apparue qu'un peu plus tard..

Je vais le faire. 🙄

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Je me permets d'intervenir : la modification de main.php n'est pas du tout la bonne méthode car elle oblige à une réécriture à chaque mise à jour.

 

Pour charger automatique Zwiiper :

 

Dans le dossier vendor, créez un fichier inc.json avec la liste des fichiers à charger :

Exemple :

[
	"simple-lightbox.min.js",
	"simplelightbox.min.css",
	"init.css",
	"init.js"
]

Ensuite on effectue l'initialisation des fonctions dans un fichier init.js

	// Paramètres d'initialisation
	$(document).ready(function() {
		// code jquery
	});

 

Modifié par Frédéric
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

@Frédéric Merci du conseil. Comme j'ai dit, la conception de ce plugin date. A l'époque, je n'avais pas encore découvert cette technique. Depuis, je l'ai appliquée pour Unite Gallery. Pourquoi ne l'ai-je pas fait pour la dernière version de Zwiiper ? Je ne sais plus, peut-être à cause d'échecs dus à mes tâtonnements.

Pour le css, pas de problème. Pour le script, je vais voir si ça fonctionne sur cette base. Sans doute que oui. 😶

 

PS :  Ne faut-il pas aussi déclarer le nouveau "vendor" dans "core/core.php" comme pour SimpleLightbox, l'exemple que tu donnes ? En tout cas, c'est ce que j'ai fait avec Unite Gallery, qui fonctionne.

Modifié par PeterRabbit

Partager ce message


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

PS :  Ne faut-il pas aussi déclarer le nouveau "vendor" dans "core/core.php" comme pour SimpleLightbox, l'exemple que tu donnes ? En tout cas, c'est ce que j'ai fait avec Unite Gallery, qui fonctionne.

 

@Frédéric Je confirme que ça marche, mais à cette condition. En route pour la version 2.4.0 ! Il faudra toutefois éditer "core/core.php" pour que Zwiiper survive aux mises à jour.

Partager ce message


Lien à poster
Partager sur d’autres sites

vraiment tres bien ce zwiiper, je fais les tests pour l'instant et j'en suis tres content. Cependant, j'aimerais savoir comment faire pour réduire la hauteur dans le cadre de la mise en place de la banner.

Autre question, il ne s'agit pas vraiment d'une banner?!? en fait, il faut juste jouer avec l'emplacement du menu pour avoir un effet banner…. est-ce bien cela?

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 38 minutes, schoune a dit :

vraiment tres bien ce zwiiper

Merci @schoune, c'est ce que j'avais pensé quand j'ai proposé Swiper en plugin.

Pour la bannière, je répondrai rapidement que le plus simple, c'est de dimensionner les images pour qu'elles conviennent à ce que tu veux en hauteur et à la largeur de ton site, comme je l'explique — je crois — dans le readme.

 

il y a 38 minutes, schoune a dit :

Autre question, il ne s'agit pas vraiment d'une banner?!? en fait, il faut juste jouer avec l'emplacement du menu pour avoir un effet banner…. est-ce bien cela?

Personne n'a dit le contraire, puisque le slider est compatible avec la "vraie bannière" du site. Il fallait juste trouver un nom pour le module. 🤨

Modifié par PeterRabbit
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

@PeterRabbit ce n'est nullement un reproche!!

 

C'est juste une réflexion,  car en faisant mes tests, je me suis rendu compte que la couleur de fond du corps du site est identique à l'effet banner… et malheureusement, j'aurais voulu éviter cet effet.

Partager ce message


Lien à poster
Partager sur d’autres sites

@schoune Je ne l'ai pas pris pour un reproche. 😉 Mais je n'ai pas dû comprendre ta question.

 

il y a 15 minutes, schoune a dit :

la couleur de fond du corps du site est identique à l'effet banner

Et je ne comprends toujours pas, je dois être bouché. Tu ne pourrais pas poster une copie d'écran, s'il te plaît ?

Je regarderai en détail quand mon ordi sera revenu de réparation — si personne n'a répondu avant moi, bien sûr. 😶

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Donc, je vais essayer de me faire comprendre 😄

 

dans le screen ci-dessous:

- le carré vert est le menu

- le carré orange du haut est l'espace prévus dans la page, dont le fond est identique à la page principal… normal vus qu'il ne s'agit pas d'une banner dans le header

--le carré orange au milieu est bien le corps du site, avec toujours le même fond

-le carré orange du bas avec contour orange, est le fond général du site, vus que le site n'est pas en hauteur définie en 100%

 

En l'état, je ne peux mettre un fond noir uniquement au niveau de la 'banner'

 

793355764_Sanstitre.thumb.png.c377f5e40bc0b472f3d2c26a487f8ef5.png

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 19 heures, schoune a dit :

 

En l'état, je ne peux mettre un fond noir uniquement au niveau de la 'banner'

 

Merci, @schoune j'ai fini par comprendre.

C'est normal, puisque ce n'est pas une "bannière", mais un slider en position de bannière.

Le plus simple, c'est de faire des images plus larges. De mémoire, celles de ma démo font 1240 de large.

🙂

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

@schoune @Frédéric Oops ! Décidément, je ne pense jamais au format smartphone... ☹️ 

Maintenant, je crois que c'est bon.

J'ai corrigé le CSS ci-dessus.

 

smartphone.jpg.c094a2f820c99680d1f90234076df877.jpg

 

 

 

Modifié par PeterRabbit
  • J'aime 2

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