Aller au contenu
Support de Zwii

2 captures d’écran

À propos de ce fichier

 

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 :

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 est maintenant paramétrable.

 

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.

 

parametrage_diaporama.thumb.jpg.6ca3bba172fb48914b8783acd4c64fe5.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,
  • 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).

 

 

 


Quoi de neuf dans la version 3.1 ?   Voir le journal des modifications

Publiée

v3.1

  • Compatibilité avec Zwii version 10.1, la compatibilité avec Zwii 9.2 et 10.0 est conservée.

 

v3.0

  • Ajout du tri aléatoire des diapositives

 

v2.9

  • Modifications liées à la séparation des styles entre l'administration et le site
  • Choix du type de tri des images du diaporama

 

v2.8 mineure

  • Amélioration de l'affichage de l'image à l'ouverture de la page
  • Prise en compte du redimensionnement de la fenêtre

 

 

v2.7

  • Paramétrage du type de boutons

 

v2.6

  • Paramétrage de la visibilité de la légende
  • Paramétrage de la position de la légende
  • Paramétrage du temps d'apparition de la légende et des boutons (au survol de l'image)

v2.5

  • correction d'un bug qui rendait les puces invisibles lors de la sélection largeur slider à 100%
  • nettoyage du fichier index.css

v2.4 mineure

  • Corrections dans le CSS (index.css)
  • Version compatible 9.2.09  et pour les expérimentateurs dev10.0.52

V2.3 mineure

  • Apparition progressive de la légende et des boutons
  • Compatibilité avec la dev10.0.35  pour l'affichage des légendes

V2.2 mineure

  • Dans la page de paramétrage du diaporama le nom et le dossier cible deviennent readonly

V2.1 mineure

  • Effacement automatique de l'ancien dossier cible lors de la sélection d'un nouveau (amélioration de l'ergonomie)
  • Valeurs par défaut des paramètres après sélection du dossier cible.

V2.0  majeure

  • Simplification de l'utilisation : la configuration de 5 paramètres se fait maintenant dans Zwii. Plus besoin de modifier des fichiers php ou js !
  • Choix du type de navigation manuelle par boutons ou zones de l'image,
  • Réglage de la largeur maximale du diaporama,
  • Visibilité ou non des puces de navigation (pager),
  • Durée de la transition entre diapositives (fading),
  • Durée d'affichage d'une diapositive (timeout).
  • Possibilité d'utiliser plusieurs diaporamas dans un site avec pour chacun des réglages différents.



Retour utilisateur

Join the conversation

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

Invité

omega

Signaler ·

  

téléchargé et mis en application ce jour sur V10.1.00 , merci pour ce slider parfaitement intégré à zwii

(dommage qu'il soit limité à un slider par page)

Thanks @sylvainlelievre

  • Merci 1

Partager cet avis


Lien vers l’avis
wjojo

Signaler ·

  

super module

  • Merci 1

Partager cet avis


Lien vers l’avis
augras

Signaler ·

  

MERCI @sylvainlelievre pour ce module qui s'approche de la perfection, et tout ça via une interface graphique.

Et surtout MERCI pour ta grande patience,

Philippe

Réponse de l’auteur :

Merci, mais la perfection est-elle de ce monde ?

Le slider a encore bien des marges de progression !

A suivre...

Partager cet avis


Lien vers l’avis
Seb

Signaler ·

  

Pratique et facile à mettre en place. Top !

Partager cet avis


Lien vers l’avis
×
×
  • Créer...