Aller au contenu
Support de Zwii
augras

[Modification et astuce] UniteGallery_plugin.zip

Messages recommandés

UniteGallery_plugin.zip

Voir le fichier

Bonjour,

Dans l'attente du gestionnaire de plugins qui propose le plugin UniteGallery je me suis pris par la main afin de pouvoir tout de même utiliser ce plugin sans le gestionnaire.

Aucune gloire pour moi (enfin, une petite gloire personnelle tout de même d'arriver à quelque chose 🙂 ce plugin a été réalisé par @PeterRabbit et adapté par @EBS01 pour son gestionnaire). Je n'ai fait que du copier/coller, mais ça me va très bien.

Testé et fonctionnel sur les versions à partir de 9.1.0.

Philippe


 

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Suite à un manque de compréhension du fonctionnement du forum j'ai ouvert un sujet similaire, le temps de la mise au point du plugin et du tutoriel,  maintenant clos pour que désormais tous les échanges sur l'utilisation du plugin soient ici. Le fil fermé :

 

Philippe

Modifié par augras

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 Gilux
      Module Gallery 2.0
      Voir le fichier module-gallery-2.0
       
      Remplacement des images en pleine résolution, réduites visuellement et cropées, trop lourdes, voir impossibles, à charger, par des vignettes légères créées à la volée et mises en cache.
       
      Au premier affichage de la galerie, le script corrige éventuellement le nom, l'orientation et la dimension des images puis créé les vignettes et les affiche, le traitement des photos peut être assez long, le temps d’exécution du script dépend du nombre de photo à traiter, de leur poids et du nombre d'opération à effectuer, durant ce temps l'affichage est interrompu et la page se recharge plusieurs fois, patientez, le script fait son boulot jusqu'au bout.
      Dès le second affichage les vignettes sont simplement affichées depuis le cache
       
      Les photos qui intègrent la balise GPS sont géo-localisables sur une carte Open Street Map
       

       

       
      Les vignettes s’affichent désormais en tant que telles, non plus en image de fond
      La galerie s’intègre dans la charte graphique de ZwiiCMS, l'affichage par défaut est sobre, il est facile de le modifier pour l’harmoniser avec votre site, en s'inspirant des données CSS ci-dessous, à ajouter au fichier "custom.css" depuis l'interface de ZwiiCMS, après les avoir modifiées selon votre besoin
       
      Index de la galerie :

       
      Page interne de la galerie :

       
      Le fonctionnement est identique à celui de la galerie d'origine
       
      Les couleurs de fond et de texte peuvent s'harmoniser avec votre site en modifiant et en ajoutant le css ci-dessous dans votre custom.css :
      /* !important Le style de la galerie est prioritaire sur le custom.css, pour que vos changements de style soit appliqués vous devez ajouter l'attribut !important à vos éléments */ /* Cases contenant les vignettes */ .galleryPicture, .galleryGalleryPicture { /*exemple*/ background-color: gray !important; } .galleryPicture:hover, .galleryGalleryPicture:hover { /*exemple*/ background-color: silver !important; } /* Nom ou légende de l'image */ .galleryName, .galleryGalleryName { /*exemple*/ color: white !important; } .galleryName:hover, .galleryGalleryName:hover { /*exemple*/ color: black !important; } /* Nom ou légende des images redimensionnées */ .picResized { /*exemple*/ color: yellow !important; } .picResized:hover{ /*exemple*/ color: purple !important; } Exemple avec couleur sombre et effet hover sur les vignettes :

       
      Exemple avec couleurs et effet hover sur les vignettes :

       
      Utilisation :
      Décompressez l’archive module-gallery-2.0.zip, elle contient un dossier module contenant un sous-dossier gallery, puis envoyez par FTP le dossier module à la racine de votre site sous ZwiiCMS, ceci aura pour effet de remplacer la galerie 1.2 d’origine.
      Si vous souhaitez juste la tester puis revenir à l’utilisation de la galerie par défaut, grâce à votre logiciel client FTP, renommez le dossier gallery présent dans le dossier module de votre site en ligne avant d’envoyer par FTP la nouvelle galerie, vous pourrez ensuite la supprimer et renommer en gallery le dossier de la galerie par défaut préalablement renommé
       
       
      Contributeur Gilux Soumis 05/09/2019 Catégorie Galeries  
    • Par Gilux
      module-gallery-2.0
       
      Remplacement des images en pleine résolution, réduites visuellement et cropées, trop lourdes, voir impossibles, à charger, par des vignettes légères créées à la volée et mises en cache.
       
      Au premier affichage de la galerie, le script corrige éventuellement le nom, l'orientation et la dimension des images puis créé les vignettes et les affiche, le traitement des photos peut être assez long, le temps d’exécution du script dépend du nombre de photo à traiter, de leur poids et du nombre d'opération à effectuer, durant ce temps l'affichage est interrompu et la page se recharge plusieurs fois, patientez, le script fait son boulot jusqu'au bout.
      Dès le second affichage les vignettes sont simplement affichées depuis le cache
       
      Les photos qui intègrent la balise GPS sont géo-localisables sur une carte Open Street Map
       

       

       
      Les vignettes s’affichent désormais en tant que telles, non plus en image de fond
      La galerie s’intègre dans la charte graphique de ZwiiCMS, l'affichage par défaut est sobre, il est facile de le modifier pour l’harmoniser avec votre site, en s'inspirant des données CSS ci-dessous, à ajouter au fichier "custom.css" depuis l'interface de ZwiiCMS, après les avoir modifiées selon votre besoin
       
      Index de la galerie :

       
      Page interne de la galerie :

       
      Le fonctionnement est identique à celui de la galerie d'origine écrite par @Rémi améliorée et augmentée par @Fred
       
      Les couleurs de fond et de texte peuvent s'harmoniser avec votre site en modifiant et en ajoutant le css ci-dessous dans votre custom.css :
      /* !important Le style de la galerie est prioritaire sur le custom.css, pour que vos changements de style soit appliqués vous devez ajouter l'attribut !important à vos éléments */ /* Cases contenant les vignettes */ .galleryPicture, .galleryGalleryPicture { /*exemple*/ background-color: gray !important; } .galleryPicture:hover, .galleryGalleryPicture:hover { /*exemple*/ background-color: silver !important; } /* Nom ou légende de l'image */ .galleryName, .galleryGalleryName { /*exemple*/ color: white !important; } .galleryName:hover, .galleryGalleryName:hover { /*exemple*/ color: black !important; } /* Nom ou légende des images redimensionnées */ .picResized { /*exemple*/ color: yellow !important; } .picResized:hover{ /*exemple*/ color: purple !important; } Exemple avec couleur sombre et effet hover sur les vignettes :

       
      Exemple avec couleurs et effet hover sur les vignettes :

       
      Utilisation :
      Décompressez l’archive module-gallery-2.0.zip, elle contient un dossier module contenant un sous-dossier gallery, puis envoyez par FTP le dossier module à la racine de votre site sous ZwiiCMS, ceci aura pour effet de remplacer la galerie 1.2 d’origine.
      Si vous souhaitez juste la tester puis revenir à l’utilisation de la galerie par défaut, grâce à votre logiciel client FTP, renommez le dossier gallery présent dans le dossier module de votre site en ligne avant d’envoyer par FTP la nouvelle galerie, vous pourrez ensuite la supprimer et renommer en gallery le dossier de la galerie par défaut préalablement renommé
       
    • Par sylvainlelievre
      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 :

      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).
       
       
       
      Contributeur sylvainlelievre Soumis 25/09/2019 Catégorie Modules  
×
×
  • Créer...