PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 06/12/2016 12:55:47

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#2 06/12/2016 13:11:07

bg62
Membre
Inscription : 18/05/2007
Messages : 1 779
Site Web

Re : MySlippry: jquery responsive image slider

Whaou ... !!!
wink


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#3 06/12/2016 15:52:40

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

Helo Stéphane,
Avec ton nouveau plugin  smile
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

Hors ligne

#4 06/12/2016 16:48:32

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#5 06/12/2016 19:14:51

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

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

Dernière modification par jol5926 (06/12/2016 21:39:03)

Hors ligne

#6 07/12/2016 09:54:32

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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.


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#7 07/12/2016 10:54:54

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

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

Hors ligne

#8 07/12/2016 15:13:55

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

.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

Hors ligne

#9 07/12/2016 18:11:45

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#10 07/12/2016 18:34:20

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

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 ?

Hors ligne

#11 07/12/2016 18:58:39

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#12 08/12/2016 09:38:05

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#13 08/12/2016 10:30:38

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

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 ?

Hors ligne

#14 08/12/2016 11:24:34

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#15 08/12/2016 11:42:02

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

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

Hors ligne

#16 09/12/2016 12:16:29

kamea
Membre
Lieu : Bergerac
Inscription : 24/04/2012
Messages : 61
Site Web

Re : MySlippry: jquery responsive image slider

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


Salutations cybernétiques.

William K.

Site pro : http://www.wk-concept.fr
Site Blablaoo : http://www.blablaoo.com

Hors ligne

#17 09/12/2016 20:27:28

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

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 ?

Hors ligne

#18 13/02/2017 12:46:49

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#19 15/02/2017 12:48:56

cpalo
Membre
Lieu : Franqueville Eure
Inscription : 13/07/2011
Messages : 807

Re : MySlippry: jquery responsive image slider

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

Dernière modification par cpalo (15/02/2017 12:49:34)

Hors ligne

#20 15/02/2017 13:39:00

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#21 15/02/2017 13:52:01

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 313
Site Web

Re : MySlippry: jquery responsive image slider

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

Dernière modification par jol5926 (15/02/2017 13:52:36)

Hors ligne

#22 15/02/2017 14:17:33

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 125
Site Web

Re : MySlippry: jquery responsive image slider

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#23 15/02/2017 16:37:16

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 409
Site Web

Re : MySlippry: jquery responsive image slider

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  tongue


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#24 15/02/2017 19:44:46

cpalo
Membre
Lieu : Franqueville Eure
Inscription : 13/07/2011
Messages : 807

Re : MySlippry: jquery responsive image slider

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

Hors ligne

#25 15/02/2017 19:57:15

cpalo
Membre
Lieu : Franqueville Eure
Inscription : 13/07/2011
Messages : 807

Re : MySlippry: jquery responsive image slider

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

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés