Aller au contenu
Support de Zwii

Messages recommandés

Diaporama Slider

Voir le fichier

 

Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii.

 

Par configuration vous pourrez obtenir cet aspect :

slider_2.jpg.62b7c757dc83c1187070d48a20cc50b9.jpg

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à :

legendeenbas.jpg.64b1ebbd0aef941d1a140669360aae91.jpg

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 :

legendeenhaut.jpg.ed9968c9346d9bf86d01224fbe292f48.jpg

 

Une version sans les puces de navigations :

sans_puce.jpg.6d69dcf5d846ffe2dc77cab404cac4b5.jpg

 

 

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)

 

fichiers.jpg.ca1fd54e612e4068ade4fce326280f24.jpg

 

 

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

page_edit.jpg.6dada95e1eb019be3466c92f491a9918.jpg

 

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.

 

8.jpg.abe2b9da1708915b59359b8ca217e0b5.jpg

 

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 des images est l'ordre lexicographique.

 

dossier_1.jpg.5a93f9a0e5d91bb960e3b4ac2c34b403.jpg

 

 

Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci :

 

dossier_3.jpg.da84a16f259874e98ddac9cc0fbbcde3.jpg

 

 

Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama".

 

4 - Paramétrage du diaporama.

 

 

parametres.jpg.77906e21bb5effcd722e6ec67d95ad24.jpg

 

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,
  • 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).

 

 

 


 

Modifié par sylvainlelievre
  • Merci 2

Partager ce message


Lien à poster
Partager sur d’autres sites

Hélas je n'ai pas réussi à adapter le slider à la taille de mes images (3 images de dimensions identiques 920x230).

J'ai appliqué le réglage "auto" aux lignes indiquées et commenter le bloc lignes 54 à 63.

Pendant une demie seconde l'image du slider s'affiche à la bonne taille puis revient au format de réglage standard. Apparemment, je rate quelque chose 😞

Sinon super facile à utiliser, j'ai apprécié la rapidité de mise en œuvre.

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Seb,

 

Merci de ton retour.

Les lignes 54 à 63 sont là uniquement pour augmenter la taille du slider sur les petits écrans, c'est une couche supplémentaire par rapport au projet responsiveslides initial. Elles ont pour objet de calculer "au mieux" la largeur du wrapper en fonction de la fenêtre client tout en respectant la maxwidth.

Si tu veux t'en passer il faudra écrire en dur le width du wrapper en haut du fichier slider/view/index/index.css

#wrapper {
  display: block;
  margin-right: auto;
  margin-left: auto;
  /* la largeur est adaptée à maxwidth et à la fenêtre client dans init.js*/
  
  /* ajouter width: tonchoix_en_%;*/
  
  margin-bottom: 10px;
 }

 

Le réglage "auto" (original) permet apparemment d'adapter la largeur du diaporama à la fenêtre du client (il étire les images basse définition...bof).

 

Si tu veux un diaporama dans une dimension "fixe" de 920 pixels, tu peux fixer maxwidth à 920 comme indiqué dans mes options avancées, tout en conservant les lignes 54 à 63 (sauf si tu préfères un autre réglage).

 

A suivre

 

Sylvain

Modifié par sylvainlelievre

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci @sylvainlelievre,

 

Je viens de faire des tests en suivant ton conseil hélas j'ai toujours les diapositives qui sont rétrécies. Je vais essayer avec des images d'une autre dimension pour voir si ça va mieux. (pas tout de suite, peut-être demain)

Partager ce message


Lien à poster
Partager sur d’autres sites

@Seb,

ça me serait utile de connaître la largeur de la fenêtre de ton navigateur et la taille de tes images rétrécies à l'écran.

 

Avec 920 dans init.js (aux 2 endroits), la largeur du Wrapper qui contient tes images est calculé par 100 x 920 / (largeur de ta fenêtre client) avec un maximum de 90 %.

Exemple si ta fenêtre fait 920 pixels le calcul donne 100% donc largeur wrapper limité ( images rétrécies) à 90%.

A partir de 1022 pixels pour ta fenêtre client utile, les images devraient apparaître dans leur format... (un peu plus de 1022 pour tenir compte des marges par ci par là).

Dans le meilleur des mondes !

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

 

il y a 33 minutes, sylvainlelievre a dit :

ça me serait utile de connaître la largeur de la fenêtre de ton navigateur et la taille de tes images rétrécies à l'écran

 

Le mercredi est une journée familialement et professionnellement compliquée 😄 mais je vais essayer de clarifier cette question demain ! Merci Sylvain !

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Seb,

 

J'ai constaté le problème et je pense avoir compris son origine.

 

Tout d'abord maxwidth est une taille limite maximale du diaporama, elle ne garantit pas qu'il va s'afficher à cette taille ... puisqu'il est avant tout responsif donc avec des largeurs définies en %.

 

Pour pallier au manque de visibilité du diaporama sur des petits écrans j'ai bricolé les lignes de script "54 à 63". Mais je n'ai pris comme paramètre de calcul que la largeur de la fenêtre client (et maxwidth) ce qui pose problème sur les écrans larges ou assez larges.

 

En effet le wrapper ne s'affiche pas dans l'écran utilisateur mais dans la largeur du site définie en configuration (sans compter les marges). Ce qui est pénalisant et qui a pour effet de rétrécir les images (en restant responsives).

 

Le choix initial du créateur de responsiveslides a été de rendre constante la largeur du wrapper : 100% (mais avec un body fixe en pixel...).

 

Je vais donc modifier les lignes "54 à 63" pour tenir compte de la largeur de la section aussi.

 

A suivre

 

Sylvain

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

 @Seb,

 

remplace le fichier slider/vendor/js/init.js par celui-ci

Et adapte les valeurs numériques :

maxwidth lignes 20 ou 37 et 65

largeur_section ligne 58

 

Explications dans le fichier

 

Si c'est la bonne piste j'essaierai de rendre automatique l'affectation de largeur_section.

 

Bonne journée

 

Sylvain

 

init.js

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci @sylvainlelievre

 

Test effectué ce matin : mes images ont légèrement agrandi mais restent petites (451x113 au lieu de 920x230).

Mon site est en mode 960 de largeur.

Il est possible que j'oublie quelque chose ? J'ai fixé les maxwidth à "920" et j'ai mis 960 à largeur_section.

 

Merci d'avance pour ta réponse.

Partager ce message


Lien à poster
Partager sur d’autres sites

@Seb,

 

Merci pour ces tests ça permet de faire avancer le module.

 

j'ai monté un site de test en 960, j'ai fait les réglages suivant dans mon ... js/init.js (pièce jointe)

et j'obtiens ça :

 

https://www.vivreenborddebaie.fr/dev9test/?slider1span

 

Mes images originales sont en 800x600 elles sont donc étirées.

 

Tu n'as pas rajouté un width dans la partie wrapper de slider/view/index/index.css ? parce qu'un si gros écart entre la limite max attendue de 920 et le 451 obtenu c'est bizarre.

 

Dans le fichier joint tu verras que j'ai monté la valeur maxi du width wrapper à 100%, mais c'est du détail par rapport à tes écarts....

 

A suivre

 

Sylvain

 

init.js

Partager ce message


Lien à poster
Partager sur d’autres sites

 

il y a 11 minutes, sylvainlelievre a dit :

Tu n'as pas rajouté un width dans la partie wrapper de slider/view/index/index.css ?

ah peut-être bien, j'aurais dû réinitialiser mon module... je vais vérifier tout à l'heure

 

merci !

 

Seb

 

Partager ce message


Lien à poster
Partager sur d’autres sites

@sylvainlelievre en effet j'avais modifié l'index.css, bien vu 😉 merci

 

Donc j'obtiens un résultat satisfaisant mais encore étrange : que je modifie les valeurs à 920, 960 ou "auto" (dans les slideshow), rien de change, j'ai le slider qui est compacté dans un format 828x207... là encore je dois déconner quelque part 😄

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Seb,

 

Mais non tu ne déconnes pas !

 

C'est en grande partie à cause de : "  if(largeur_pour_cent > 90) { largeur_pour_cent=90;}  " dans init.js (j'avais mis cette limite pour faire bô )

 

Si tu remplaces 90 par 100 ça sera plus proche de 920, mais dans une page de 960 le contenu ne peut pas dépasser 920 à cause du padding de "section". Donc rien d’étrange.

 

Je vais commencer à voir comment récupérer dans javascript la largeur du site sans être obligé de la saisir (ça fait tâche).

 

Bonne journée

 

Sylvain

Modifié par sylvainlelievre

Partager ce message


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

C'est en grande partie à cause de : "  if(largeur_pour_cent > 90) { largeur_pour_cent=90;}  " dans init.js (j'avais mis cette limite pour faire bô )

 

Si tu remplaces 90 par 100 ça sera plus proche de 920, mais dans une page de 960 le contenu ne peut pas dépasser 920 à cause du padding de "section". Donc rien d’étrange.

ok je comprends mieux 🙂 merci

 

Il y a 1 heure, sylvainlelievre a dit :

Ah au fait @Seb

 

, superbe site, vraiment.

 

merci, on fait ce qu'on peut !

Partager ce message


Lien à poster
Partager sur d’autres sites

@Seb,

 

Si tu places le fichier ci-joint dans slider/vendor/js , ça devrait être pas mal. Il adapte la largeur du wrapper en fonction de la largeur de la fenêtre client ET de la largeur du site.

Je mettrai le téléchargement à jour après des essais complémentaires.

 

init.js

Modifié par sylvainlelievre

Partager ce message


Lien à poster
Partager sur d’autres sites

@sylvainlelievre un grand merci ça marche nickel 🙂

 

par contre le tout dernier réglage auquel j'avais procédé sur tes conseils marchait bien (contrairement à ce que j'ai dit dans le dernier post), je m'en suis aperçu ce midi (j'avais sans doute oublié de vider le cache pour ma dernière modif)

 

en tout cas c'est parfait ! et simple à mettre en œuvre, dans l'esprit de Zwii, bravo !

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci @Seb,

Il me reste un petit problème à régler de compatibilité avec Opera pour l'option slider1 (avec boutons) puis je ferai la MAJ sur téléchargements.

Je n'ai pas testé avec IE ou son successeur, si tu as l'occasion un de ces jours...

Cordialement

Sylvain

Partager ce message


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

Je n'ai pas testé avec IE ou son successeur, si tu as l'occasion un de ces jours...

oui je peux regarder ça en fin de semaine 😉

Partager ce message


Lien à poster
Partager sur d’autres sites

@sylvainlelievre testé sur IE et Edge : rendu impeccable.

Je vais prochainement faire d'autres sliders avec des dimensions et ratios différents pour voir comment ça rend. Comme ça je pourrai faire un retour.

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @roger, @Seb, @augras, @Gilux

 

Nouvelle version v2.6 du slider avec 3 nouveaux paramétrages :

Visibilité de la légende (au survol, jamais, toujours)

Position de la légende (en haut ou en bas de l'image)

Temps d'apparition de la légende et des boutons...

 

Testé sur 9.2.09, 9.2.10dev et 10.0.52dev

 

A suivre

Modifié par sylvainlelievre
  • Merci 1

Partager ce message


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

Nouvelle version v2.6 du slider avec 3 nouveaux paramétrages

Vais la télécharger et l'installer sur une dev72 ssortie normalement des cartons par fred.

Juste une question :

 

👉 Hier j'ai téléchargé la 2;5 et me suis retrouvé dans 'archive avec le fameux fichier 

😉 je te cite "Elle contient le dossier slider et 1 autre fichier dont nous verrons l'utilité plus loin (edit.js.php)"

 

Mais si on lit de bout en bout ton tuto pour pouvoir utiliser le module, de long en large tu as justement oublié dans celui ci de parler de l'utilité de ce fichier et où le mettre dans les zwii.

Tout est dit dans cette capture d'écran de la V2.6 dézippée (encadré en orange , texte de même couleur)

 

slider.thumb.png.9d4ebf5c4d592090182a08a06ba882bb.png

Modifié par roger

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 sylvainlelievre
      Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii.
       
      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 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 des images est l'ordre lexicographique.
       

       
       
      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, 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).
       
       
       
×
×
  • Créer...