MySlippry: jquery responsive image slider

Stéphane · décembre 2016

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

bg62 · décembre 2016

Whaou ... !!!

jol5926 · décembre 2016

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éphane · décembre 2016

@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)

jol5926 · décembre 2016

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éphane · décembre 2016

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.

jol5926 · décembre 2016

@ 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 ?

jol5926 · décembre 2016

.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éphane · décembre 2016

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

jol5926 · décembre 2016

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éphane · décembre 2016

ha ok, je regarde demain alors, y a peut etre un petit bug

Stéphane · décembre 2016

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

jol5926 · décembre 2016

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éphane · décembre 2016

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

jol5926 · décembre 2016

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

kamea · décembre 2016

Génial, génial, génial .... que dire d'autre .. a oui, merci Stéphane

jol5926 · décembre 2016

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éphane · février 2017

## 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

cpalo · février 2017

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éphane · février 2017

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é ?

jol5926 · février 2017

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éphane · février 2017

@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.

Jerry Wham · février 2017

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

cpalo · février 2017

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

cpalo · février 2017

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

cpalo · février 2017

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>

bg62 · mars 2017

superbes effets, MAIS je reste coincé à la limite de 4 images maximum ...
ne peut-on augmenter cela ?
@+

Stéphane · mars 2017

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.

bg62 · mars 2017

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éphane · mars 2017

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

bg62 · mars 2017

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 ?

MySlippry: jquery responsive image slider

Réponses