MySlippry: jquery responsive image slider

StéphaneStéphane Member, Former PluXml Project Manager
MySlippry: diaporama responsive utilisant jquery basé sur Slippry et adapté pour PluXml

Demo: http://slippry.com/

Téléchargement http://pluxopolis.net/myplugins

Activation du plugin
- aller dans le menu Paramètres > Plugins
- cocher le plugin MySlippry et dans le déroulant "Pour la sélection", sélectionner le menu "Activer"

Configuration du diaporama MySlippry
- Aller dans le menu Paramètres > Plugins, et cliquer sur le lien Configuration du plugin MySlippry

Pour ajouter des images au diaporama
- aller dans le gestionnaire des médias
- cocher les images à ajouter dans le diaporama
- dans le déroulant "Pour la sélection", sélectionner le menu MySlippry > Ajouter au diaporama

Activation et personnalisation des images du diaporama
- allez dans le menu MySlippry (dans le bandeau des menus de l'administration)
- renseigner les champs titre et description des images
- activer l'affichage en choisissant la valeur "Oui" dans la colonne "Active"
- cliquer sur le bouton "Modifier la liste des images" pour enregistrer les modifications

Affichage du diaporama sur la page d'accueil de son site
- éditer le fichier header.php de son theme
- ajouter la ligne suivante à l'endroit où vous souhaitez afficher le diaporama
<?php eval($plxShow->callHook("MySlippry")) ?>

Affichage du diaporama dans une page statique
- éditer le contenu d'une page statique et allant dans la gestion des pages statiques: menu "Pages statiques" dans l'administration
- ajouter les lignes suivantes à l'endroit où vous souhaitez afficher le diaporama
<?php
global $plxShow;
eval($plxShow->callHook("MySlippry"));
?>

NB: remplace le plugin MyCoinSlider qui n'est pas responsive et qui ne sera plus maintenu

Historique
## Version 1.2.1 (10/04/2017) ##
BUG tableau PLX_MYMULTILINGUE non géré avec php 5.x+

## Version 1.2 (30/03/2017) ##
[+] Compatibilité avec le plugin plxMyMultiLingue pour avoir un diaporama différent par langue

## Version 1.1 (13/02/2017) ##
BUG Compatibilité PluXml 5.6
BUG Compatibilité avec le plugin MyMultiLingue
BUG Mauvaise clé de traduction dans la version anglaise

## Version 1.01 (08/12/2016) ##
BUG Mauvais gestion du paramètre "Ouvrir les liens des images du diaporama dans une nouvelle fenêtre"

## Version 1.0 (06/12/2016) ##
version initiale

Consultant PluXml

Ancien responsable du projet (2010 à 2018)

«1

Réponses

  • Helo Stéphane,
    Avec ton nouveau plugin :)
    J'ai la même question qu'avec l'ancien :
    Peut-on modifier la couleur du fond, la police (couleur, style) et l'opacité du bandeau avec le texte ?

    Merci

    Jol
  • StéphaneStéphane Member, Former PluXml Project Manager
    @jol5926: oui c'est la classe sy-caption qui contient les elements css à modier
    dans le fichier de ton theme tu peux rajouter
    .sy-caption {
      color: #ff0000 !important;
      background-color: #ddd !important;
    }
    

    pour l'opacité utilise une couleur rgba plutôt que #couleur

    exemple: background-color: rgba(117, 21, 21, 0.54);

    le 4ieme paramètre c'est la valeur de l'opacité (valeur entre 0 et 1)
    les autres paramètres sont les couleurs r, g, b (entre 0 et 255)

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • jol5926jol5926 Member
    décembre 2016 modifié
    Hello,
    Avec le nouveau plugin qui est responsive, s'adapte donc à l'image.
    Avec plusieurs images, la/les pages du site bouge (nt) en fonction des dimensions des images, ce qui n'est pas très agréable.
    Y-a-t'il un moyen pour éviter ce désagrément ?

    l'ajout de

    .sy-caption {
    color: #ff0000 !important;
    background-color: #ddd !important;
    }

    sur le thème de mon site ne fonctionne pas.

    On n'a pas le choix que d'ouvrir des liens vers une nouvelle fenêtre, sur mon site j'ai des liens que j'aimerais ouvrir sur la même fenêtre ?

    Merci
  • StéphaneStéphane Member, Former PluXml Project Manager
    Salut jol5926
    jol5926 a écrit:
    Hello,
    Avec le nouveau plugin qui est responsive, s'adapte donc à l'image.
    Avec plusieurs images, la/les pages du site bouge (nt) en fonction des dimensions des images, ce qui n'est pas très agréable.
    Y-a-t'il un moyen pour éviter ce désagrément ?

    A toi de préparer tes images pour qu'elles aient les mêmes dimensions.
    jol5926 a écrit:
    .sy-caption {
    color: #ff0000 !important;
    background-color: #ddd !important;
    }
    sur le thème de mon site ne fonctionne pas.

    Testé en dynamique sur ton site et ça fonctionne chez moi.

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • @ Stéphane

    Ok, je teste et te tiens au courant:

    Pour les liens qui renvoient vers une page du site: comment les ouvrir dans la même fenêtre ?
  • .sy-caption {
    color: #ff0000 !important;
    background-color: #ddd !important;
    }
    sur le thème de mon site ne fonctionne pas.

    Testé en dynamique sur ton site et ça fonctionne chez moi.

    Ok, je viens de tester, ça fonctionne.

    Comment faire pour ouvrir les liens des images sur la même fenêtre ?

    Jol5926
  • StéphaneStéphane Member, Former PluXml Project Manager
    Dans l'admin du plugin: Ouvrir les liens des images du diaporama dans une nouvelle fenêtre (oui/non)

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Stéphane a écrit:
    Dans l'admin du plugin: Ouvrir les liens des images du diaporama dans une nouvelle fenêtre (oui/non)

    J'ai bien vu ce paramétrage mais quand je sélectionne "non", le lien ne fonctionne pas ?
  • StéphaneStéphane Member, Former PluXml Project Manager
    ha ok, je regarde demain alors, y a peut etre un petit bug :p

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 1.01 (08/12/2016) ##
    BUG Mauvais gestion du paramètre "Ouvrir les liens des images du diaporama dans une nouvelle fenêtre"

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Stéphane a écrit:
    ## Version 1.01 (08/12/2016) ##
    BUG Mauvais gestion du paramètre "Ouvrir les liens des images du diaporama dans une nouvelle fenêtre"

    Hello,

    C'est ok avec la nouvelle version.

    Je reviens vers le réglage des images. J'ai adapté la hauteur des images à 200 px mais j'ai toujours le même souci, la page du site est en mouvement en fonction de l'image affichée alors que j'ai ajusté la taille en hauteur à 200 px pour toutes les images.
    Y-a-t'il quelque chose que je ne fais pas correctement ?
  • StéphaneStéphane Member, Former PluXml Project Manager
    peux-tu essayer avec des images de meme dimension : hauteur et largeur
    je me demande si y a pas un ratio qui est appliqué en fonction de largeur, ce qui donnerait une hauteur différente à l'affichage

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Stéphane a écrit:
    peux-tu essayer avec des images de meme dimension : hauteur et largeur
    je me demande si y a pas un ratio qui est appliqué en fonction de largeur, ce qui donnerait une hauteur différente à l'affichage

    Oui, c'est bien ça.
    Le souci, certaines images sont déformées puisque je les redimensionne en ne respectant pas le ratio hauteur x largeur.
    Y-a-t'il une solution à ce petit souci ?

    Merci
  • Génial, génial, génial .... que dire d'autre .. a oui, merci Stéphane :)
  • jol5926 a écrit:
    Stéphane a écrit:
    peux-tu essayer avec des images de meme dimension : hauteur et largeur
    je me demande si y a pas un ratio qui est appliqué en fonction de largeur, ce qui donnerait une hauteur différente à l'affichage

    Oui, c'est bien ça.
    Le souci, certaines images sont déformées puisque je les redimensionne en ne respectant pas le ratio hauteur x largeur.
    Y-a-t'il une solution à ce petit souci ?

    Merci

    Hello Stéphane,

    As-tu une solution ?
  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 1.1 (13/02/2017) ##
    BUG Compatibilité PluXml 5.6
    BUG Compatibilité avec le plugin MyMultiLingue
    BUG Mauvaise clé de traduction dans la version anglaise

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • cpalocpalo Member
    février 2017 modifié
    Bonjour,

    Super ce plugin!
    Mais quelques retours :
    ( j'utilise PluXml 5.6.1.a )
    1) Dans l'aide, il est indiqué pour une page statique de copier le code via le panneau d'administration. Mais avec CKEditor je n'y suis pas arrivé. J'ai donc créé un template static-slippry.
    2) Pour avoir une personnalisation plus fine, j'aurai souhaité modifié les parametres de base ; mais le plugin utilise la version minifié slippry.min.js. Pas de problème pour récuperer la version non minifiée.Mais que dois-je modifier dans le plugin pour que ce soit slippry.js qui soit pris en compte.
    3)Ayant déjà jquery, lorsque j'indique ne pas utiliser la bibliothèque interne jquery du plugin, celui-ci ne fonctionne plus ( affichage seulement des images)
    Ci-dessous mon footer appelant jquery :
    [== PHP ==]
    </footer>
    	<script>
    		if(typeof(jQuery) === "undefined") 
    		document.write(\'<script  type="text/javascript" src="common/libs/jquery-3.1.1.js"><\/script>\');
    	</script>
    	<script src="common/components/prism/prism.js"></script>
    </body>
    

    Cordialement
  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour
    1) ne jamais utilisé ckeditor pour ajouter du code dans une page statique, car le texte est converti par l'éditeur en équivalent html qui n'est plus interprétable niveau php
    2) renomme le fichier slippry.js en slippry.min.js
    bien que le nom du fichier soit celui minifié ça fonctionnera meme si son contenu n'est pas minifié mais celui de slippry.js
    3) peut-etre un problème de version de jquery utilisé ?

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • jol5926jol5926 Member
    février 2017 modifié
    Stéphane a écrit:
    Bonjour
    1) ne jamais utilisé ckeditor pour ajouter du code dans une page statique, car le texte est converti par l'éditeur en équivalent html qui n'est plus interprétable niveau php

    Bonjour,
    Quel éditeur à utiliser pour les pages statiques ?
    Peut-on avoir 2 éditeurs :
    1 pour les pages statiques et
    ckeditor pour le reste

    Jol5926
  • StéphaneStéphane Member, Former PluXml Project Manager
    @jol5926: quand je dis "code" c'est du code php. on peut tres bien utilisé ckeditor sur les pages statiques, mais... à condition de ne pas y mettre du php par exemple.

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • jol5926 a écrit:
    jol5926 a écrit:
    Stéphane a écrit:
    peux-tu essayer avec des images de meme dimension : hauteur et largeur
    je me demande si y a pas un ratio qui est appliqué en fonction de largeur, ce qui donnerait une hauteur différente à l'affichage

    Oui, c'est bien ça.
    Le souci, certaines images sont déformées puisque je les redimensionne en ne respectant pas le ratio hauteur x largeur.
    Y-a-t'il une solution à ce petit souci ?

    Merci

    Hello Stéphane,

    As-tu une solution ?

    Si tu ne veux pas déformer tes images, tu prends ton éditeur d'images préféré (Gimp bien sûr) et tu crées une image au dimension que tu souhaites avec un calque transparent. Ensuite, tu importes l'image que tu veux afficher sur ton site en tant que calque et tu la centres sur le premier calque. Tu enregistres l'ensemble comme une nouvelle image en png pour conserver la transparence. Et c'est cette nouvelle image que tu importeras et affichera sur ton site.

    Au final, toutes tes images auront les mêmes dimensions et ne seront plus déformées.

    Si c'est pas clair, relis lentement ce que je viens d'écrire :P
  • par rapport à slipry.min.js , j'avais bien pensé à cette astuce effectivement. Mais en plus je viens de trouver la ligne où il y est fait appel dans plxMySlippry.php .
    Pour la version de jquery, j'utilise bien la 3..1.1 qui est celle utilisée en interne par le plugin.
    Dans le fichier plxMySlippry.php, on a le code:
    [== PHP ==]
    public function ThemeEndBody() {
    
    		if($this->getParam('jquery')) {
    			echo "\n".'<script>if (typeof jQuery == "undefined") {	document.write(\'<script src="'.PLX_PLUGINS.'plxMySlippry\/slippry\/jquery-3.1.1.min.js"><\/script>\'); }</script>';
    		}
    
    Dans mon footer, j'appelle jquery de cette manière:
    [== PHP ==]
    <script>
    		if(typeof(jQuery) === "undefined") 
    		document.write(\'<script  type="text/javascript" src="common/libs/jquery-3.1.1.js"><\/script>\');
    	</script>
    
    Le dossier common est à la racine de pluxml
    - common
    - core
    - data
    - plugins
    - themes
    themes
  • Je viens de modifier mon footeren remplaçant simplement mon code précédent par :
    [== PHP ==]
    <script src="common/libs/jquery-3.1.1.js"></script>
    
    et là c'est ok.. C'est donc le code que j'utilisais précédemment qui est incorrect
  • Bonjour,
    Problème résolu. A priori une erreur de syntaxe dans l'appel de mon jquery.
    Le code correct:
    <script>
        if (typeof jQuery == "undefined") {	
            document.write('<script src="./common/libs/jquery-3.1.1.js"><\/script>');
        }
    </script>
    
  • bg62bg62 Member
    superbes effets, MAIS je reste coincé à la limite de 4 images maximum ...
    ne peut-on augmenter cela ?
    @+
  • StéphaneStéphane Member, Former PluXml Project Manager
    bg62 a écrit:
    superbes effets, MAIS je reste coincé à la limite de 4 images maximum ...
    ne peut-on augmenter cela ?
    @+

    Il n'y a pas de limite.
    Testé avec 9 images. Diaporama affiché sans problème.

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • bg62bg62 Member
    mars 2017 modifié
    effectivement je viens de refaire un nouveau test sur un PluXml tout neuf .+.. et no soucis, je ne le rencontre que sur un autre dans lequel c'est déjà installé ... donc apparemment le bug viendrait d'ailleurs ;)
    @+
    il reste quand même autre chose : lorsque l'on utilise " CookieMessage - Version 1.1 (19/08/2015) " si l'on accepte ou pas d'utiliser "Activer jQuery 2.1.3 ?" les problèmes apparaissent ...
    exemple : j'accepte > MySlippry est cassé de chez cassé, si je 'refuse' les deux fonctionnent ....
  • StéphaneStéphane Member, Former PluXml Project Manager
    S'il y a 2 plugins qui chargent/utilisent jquery, il y a surement des conflits et comme MySlippry fonctionne avec la 3.1.1
    Voir peut etre aussi quelle version traine dans le cache de ton navigateur quand tu changes les paramètres des plugins

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • bg62bg62 Member
    Stéphane a écrit:
    S'il y a 2 plugins qui chargent/utilisent jquery, il y a surement des conflits et comme MySlippry fonctionne avec la 3.1.1
    Voir peut etre aussi quelle version traine dans le cache de ton navigateur quand tu changes les paramètres des plugins
    je m'en doutais un peu, mais je pense qu'à l'avenir pour les plugins il faudrait toujours laisser le choix d'activer ou non le js 'incorporé' ...
    je pense que lorsque 'un seul' plugin active la version la plus récente cela doit permettre aux autres de fonctionner ... oui ou non, finalement je ne sais pas ?
    ;)
Connectez-vous ou Inscrivez-vous pour répondre.