Comment ajouter un effet popup à une miniature dans ZwiiCMS

Zwii un CMS maintenu par Rémi Jean son auteur, c’est un CMS en français très simple d’emploi destiné à une gamme d’utilisateur variée, de débutants à chevronnés. Les dernières versions sorties début mars 2018 apportent un lot important d’améliorations.  Une série d’articles regroupant ces astuces seront publiés sous cette catégorie.

Pour débuter, les images avec un effet popup, l’idée est de créer  un effet d’affichage lors du clic sur une miniature.
Pour les besoins de la démonstration, j’ai utilisé deux images, une taille réelle (200 pixels de large est un maximum) et une autre en miniature.
Cette démo est basée sur la version 8.2.5 dont l’éditeur de texte par défaut est TINYmce.
Une fois le CMS installé, en FTP, éditez  init.js dans core/vendor/tinymce, recherchez

templates: [
que vous remplacez par :
templates: [
        {
          title:"Image Lightbox",
          url:baseUrl+"core/vendor/tinymce/templates/lightbox.html",
          description:"Une image qui s'ouvre dans une lightbox."
        },

Sauvegardez le fichier.
Dans le dossier Templates, y copiez les fichiers lightbox.html et image_vide.png contenus dans cette archive.
C’est prêt, il n’y a plus qu’à utiliser le plugin, une vidéo valant mieux qu’une longue explication :
[youtube https://www.youtube.com/watch?v=WmgREqKg0Io&w=560&h=315]

Il est aussi possible de se passer de la miniature en réduisant la taille de l’image servant de miniature…

 
 
 
 
 
 

Ce contenu a été publié dans ZwiiCMS, avec comme mot(s)-clé(s) , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *