[Plugin] plxResponsiveSlidesJs.1.2.lazy

Sudwebdesign · octobre 2013

J'ai adapté MyPlxCoinSlider avec responsiveslides.com ce qui donne plxResponsiveSlidesJs que vous pouvez télé-charger a cette adresse : plxResponsiveSlidesJs.1.0

Le plugin est mis a jour pour la version 5.5 de PluXml.
[del]Il est a télécharger ici : plxResponsiveSlidesJs.1.1[/del]
Voici quelques améliorations incluse :
-Réglages des dimensions amélioré avec maintenant la possibilité de modifié les unités de mesure,
-Un mode arrière plan (background:url(),
-Le thème "bouton centré" a été revu
-Choix du nom de menu et de sa position
-Suppression de TimThumb
-Et bien plus
Pour le savoir, ouvrir le change.log ou le code

[édit 06/10/2018]
Le plugin est mis a jour pour la version 5.6 de PluXml et passe en v1.2.lazy et bien d'ot choses

.
Il est a télécharger sur cette page : plxResponsiveSlidesJs.1.2.lazy

Merci à Stéphane et à responsiveslides.com ainsi qu'a toute la communauté, tout est bienfait.
Thomas

Stéphane · octobre 2013

Bonjour Thomas
Merci pour le partage de ce plugin. Il va plaire à beaucoup de monde

joebart · octobre 2013

Bonjour

Je vais jeter un oeil mais question, peut-on s'en servir avec du texte ? Merci

Sudwebdesign · octobre 2013

@joebart
Oui, il est possible de lié un lien et une description par image, c'est le même fonctionnement que le plugin de Stéphane

PluXml est Merveilleux de simplicité :cool:

joebart · octobre 2013

OK, car en fait j'en recherche 1 pour mettre que du texte, avec des liens par exemple mais merci pour le travail

cpalo · octobre 2013

Bonjour

j'en utilise un: EasySlider
il est en fonctionnement sur le site www.francashautenormandie.fr
il affiche les quatre derniers articles de la catégorie formation.

Je vais mettre un lien sur mon site ( www.cahue.net) pour que tu puisses le télécharger. Je mettrai un autre post pour te dire quand c'est dispo.

Cordialement

joebart · octobre 2013

OK, merci CPALO

Frédéric · octobre 2013

Mon préféré et unslider, configurable a souhait et «responsive»
Merci Sudwebdesign pour ce plugin

Braddy · mars 2014

Bah voilà! enfin un slider responsive pour pluxml!
Il mériterait bien sa place dans les plugins non officiels, voir officiels

car je pense que c'est le seul du genre sur pluxml.

cpalo · avril 2014

Bonjour

@Frédéric

a-priori tu as utilisé unslider
J'ai la liste qui s'affiche bien dans la <div class=banner"> mais pas sous forme de slider.

j'ai ressayé avec juste une page html (sans pluxml), et soit avec les scripts en local soit en les appelant à distance.
Mais ça ne change rien

Le code que j'ai mis dans le head:

[== PHP ==]
<script src="<?php $plxShow->urlRewrite(); ?>/common/js/jquery.min.js"></script>
<script src="<?php $plxShow->template(); ?>/js/unslider.js"></script>
<script>
    $(function() {
    $('.banner').unslider();
    });
</script>

Y aurait-il une astuce qui m'aurait échappé car su rle site du plugin je n'ai pas quoi que ce soit

Cordialement

bg62 · avril 2014

bonjour

Il n'y a apparemment pas de balise "alt" intégrée, ce qui provoque des erreurs sur le W3C, comment y remédier ?

bg62 · avril 2014

re ... je viens d'essayer ceci :
dans " plxResponsiveSlidesJs.php ", remplacer ( ligne 62 ):

[== PHP ==]
					echo '<li><a href="'.plxUtils::strCheck($onclick).'"><img src="'.plxUtils::strCheck($slide['url']).'" title="'.plxUtils::strCheck($slide['title']).'" /><p class="caption">'.strip_tags($slide['description'], '<strong><b><em><br>')."</p></a></li>\n";

par :

[== PHP ==]
					echo '<li><a href="'.plxUtils::strCheck($onclick).'"><img src="'.plxUtils::strCheck($slide['url']).'" title="'.plxUtils::strCheck($slide['title']).'" alt="'.strip_tags($slide['description']).'" /><p class="caption">'.strip_tags($slide['description'], '<strong><b><em><br>')."</p></a></li>\n";

ce qui place en 'alt' la description entrée dans l'admin du plugin.
ça passe au W3C
qu'en pensez-vous ?
@+
Edit : maintenant, pour ajouter la balise 'title' sur le lien, j'en suis ici :

[== PHP ==]
					echo '<li><a href="'.plxUtils::strCheck($onclick).'" title="'.plxUtils::strCheck($slide['title']).'"><img src="'.plxUtils::strCheck($slide['url']).'" title="'.plxUtils::strCheck($slide['title']).'" alt="'.strip_tags($slide['description']).'" /><p class="caption">'.strip_tags($slide['description'], '<strong><b><em><br>')."</p></a></li>\n";

MAIS les deux codes inclus avec "title" me donnent comme balises" nom-de-mon-image.jpg " = comment réussir à n'avoir que "nom de mon image" , sans les '-' ou '_' et sans l'extension".jpg" (ou autre ... ) ???
SOS

Kyodev · avril 2014

[h][bug] Appel jQuery[/h]
jQuery n'est pas dans l'archive, contrairement à ce qui est programmé.
comme lors de mon test, sur un pluXml fraîchement installé, sans chargement de jQuery par ailleurs, on obtient une erreur 404 mais aussi un non-fonctionnement, l'appel de jQuery étant mal placé.

j'ai modifié la fonction ThemeEndBody pour le bon fonctionnement, en utilisant un cdn pour le chargement éventuel de jQuery. cette fonction est à la fin du fichier plugins/plxResponsiveSlidesJs/plxResponsiveSlidesJs.php.

[== PHP ==]
	public function ThemeEndBody() {
		echo '<script type="text/javascript">'."\n".
			"\t".'if (typeof jQuery == \'undefined\') { document.write(\'<script src="//cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js"><\/script>\'); }'."\n".
			"</script>\n";
		echo '<script type="text/javascript" src="'.PLX_PLUGINS.'plxResponsiveSlidesJs/responsiveslides/responsiveslides.min.js"></script>'."\n";
		$keys = array('speed','pager','timeout','prevText','nextText','auto','namespace','nav','random','pause','pauseControls');
		$parms = $this->getParams();
		$array= array();
		foreach($parms as $key => $value) {
			if(in_array($key, $keys) AND ($value['value']!='' OR $value['value']==1)) {
				if(in_array($key, array('nav','random','pause')))
					$array[] = $key.':'.($value['value']==1?'true':'false');
				elseif($value['type']=='numeric')
					$array[] = $key.':'.$value['value'];
				else
					$array[] = $key.":'".$value['value']."'";
			}
		}
		$string = $array ? implode(',',$array) : '';
		echo '<script type="text/javascript">'."\n".
			"\t".'$(document).ready(function() { $(\'#responsiveslides\').responsiveSlides({ '.$string.' }); });'."\n".
			"</script>\n";
	}

bg62 · avril 2014

tu veux donc dire :
- qu'il faut modifier ( tu n'as pas modifié le fichier en téléchargement quand même ? )
- que si jQuery est déjà appelé ( par 'son' plugin dédié ) il n'y aura pas de double appel
- que si le plugin jQuery n'est pas présent ou activé, du coup celui-ci ira le chercher, mais rien que pour lui ...
j'ai bien tout compris là ?
@+

Kyodev · avril 2014

> - qu'il faut modifier ( tu n'as pas modifié le fichier en téléchargement quand même ? )
oui il faut modifier le fichier une fois extrait, je n'ai pas les capacités de modifier l'archive à télécharger

> - que si jQuery est déjà appelé ( par 'son' plugin dédié ) il n'y aura pas de double appel
oui

> - que si le plugin jQuery n'est pas présent ou activé, du coup celui-ci ira le chercher, mais rien que pour lui ...
oui, ou autres scripts en ayant besoin APRES ce chargement

> j'ai bien tout compris là ?
il me semble

Kyodev · avril 2014

bg62 a écrit:

maintenant, pour ajouter la balise 'title' sur le lien

si j'ai bien compris ta demande je te propose de remplacer la ligne originale:

echo '<li><a href="'.plxUtils::strCheck($onclick).'"><img src="'.plxUtils::strCheck($slide['url']).'" title="'.plxUtils::strCheck($slide['title']).'" /><p class="caption">'.strip_tags($slide['description'], '<strong><b><em><br>')."</p></a></li>\n";

par ce bloc:

[== PHP ==]
					$nomFichier =  pathinfo(plxUtils::strCheck($slide['title']), PATHINFO_FILENAME);	//on récupère le nom du fichier sans extension
					$joliNomFichier = str_replace(array("-","_"), ' ',$nomFichier);		//on remplace les '-'' et '_'' par des espaces
					$imgAlt=strip_tags($slide['description']);		//par défaut, la description renseignée manuellement dans ResponsiveSlidesJs
					if ( $imgAlt == '' ) $imgAlt='image '.pathinfo(plxUtils::strCheck($slide['url']), PATHINFO_BASENAME);	//si vide, on récupère le nom de fichier
					echo "\t<li>".
					'<a href="'.plxUtils::strCheck($onclick).'" title="'.$joliNomFichier.'">'.
						'<img src="'.plxUtils::strCheck($slide['url']).'" title="'.$joliNomFichier.'" alt="'.$imgAlt.'" />'.
					'</a>'.		//en html5, pas obligatoire de déplcer cette fermeture, mais çame fait mal aux yeux sinon
					'<p class="caption">'.strip_tags($slide['description'], '<strong><b><em><br />').'</p>'.
					"</li>\n";

j'ai ajouté le cas où si la description n'était pas renseignée, l'attribut alt de l'image serait sous la forme "image nomComplet.extension"

bg62 · avril 2014

+100

tout simplement super !
Ce plugin est non seulement 'responsive', mais maintenant avec ces modifications, les balises 'alt' et 'title' sont elles aussi renseignées, cela pourra en aider plus d'un pour placer un slider sur son site, merci

à espérer que son auteur 'originel' passera par ici et pourra faire une mise à jour du zip proposé en téléchargement.

nota : il reste un atre bug, semble-t-il : le nombre d'images semble limité à 5 , et lorsque l'on change une image dans l'admin du plugin on perd quelques données, bon, mais c'est une toute autre chose là ....
- la limite à 5 images, limite aussi laa 'consommation' du script ..., donc, ...
- on finit toujours par s'y retrouver lorsque l'on change ls images, même si une erreur se produit

encore bravo !

Kyodev · avril 2014

> le nombre d'images semble limité à 5...
curieux, j'ai testé sur six, je viens de mettre neuf images sans problème. tu es sûr que toutes tes image sont actives?

Kyodev · avril 2014

[h]bug responsive[/h]
une règle superflue qui nuit au comportement responsive, en chagrinant l'affichage, est 'max-height: hauteurImages px'.
sauf exception (mais je vois pas laquelle, le scroll de la fenêtre étant là pour ça), seule max-width peut être utile (et encore si certains veulent étirer plus que la taille initiale, ils peuvent commenter cette règle)
dans plugins/plxResponsiveSlidesJs/plxResponsiveSlidesJs.php :

[== PHP ==]
	public function ThemeEndHead() {
		echo '<link rel="stylesheet" type="text/css" href="'.PLX_PLUGINS.'plxResponsiveSlidesJs/responsiveslides/responsiveslides-styles.css" media="screen" />'."\n";
		echo '<style type="text/css">'."\n".
			"\t".'.rslides_container { max-width: '.$this->getParam('maxwidth').'px; /* max-height: '.$this->getParam('maxheight').'px; */ }'."\n".
			"</style>\n";
	}

pour le reste, seules les css sont à adapter selon les besoins

Rohirrim · septembre 2014

Bonjour,

A partir de ce slider, comment puis-je faire pour :
- que les images du slider soient des images "distantes" (image provenant d'un autre site web par exemple) sans être obligé de les uploader
- que le slider puisse intgerer du html (voir fasse apparaitre le chapo d'un article du site)
- mettre la "description de l'image" en haut (et pas en bas, comme ce l'est actuellement - dans quel fichier dois-je bidouiller

merci d'avance à ceux qui sauraient...

Rohirrim · septembre 2014

Je réponds en partie sur certains points

que les images du slider soient des images "distantes" (image provenant d'un autre site web par exemple) sans être obligé de les uploader

ça fonctionne > il suffit, dans l'espace d'administration du slider, d'inscrire le lien de l'image distante (à la place du lien "attendu" vers une image de son répertoire "image"... en fait le slider "va chercher" un lien vers une image, quelle qu'elle soit (pas forcément limitée au répertoire image de pluxml)

-sinon, il n'y a pas, à priori de limite au nombre de slides (j'en ai 8 en ce moment, après en avoir eu 5, puis 3...), mais si on "remplace" une image par une autre, on supprime, on recrée, etc... depuis le répertoire média de pluxml, ça créé des comportements inattendus...

Il vaut mieux "effacer et recommencer" quand on veut mettre à jour ses slides - plus long, mais plus sùr...

noogaty · octobre 2014

Bonjour,
Merci pour ce plugin !

Mais j'ai un petit soucis, en effet, les deux flèches à droite et à gauche ne sont pas responvises ...

Avec un mobile, on se retrouve avec ces deux "boutons" non redimensionnés à la taille d'un mobile, donc énormes ...
Une solution pour qu'ils s'adaptent eux aussi au mobile ?
J'ai essayé de jouer avec le height et width en les mettant à 100% et une taille max mais cela ne fonctionne pas ...

.centered-btns_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height:100%;
  max-height: 61px;
  width:100%;
  max-width: 38px;
  background: transparent url("themes.gif") no-repeat left top;
  margin-top: -45px;
  }

J'ai déjà rendu responsive le petit commentaire qui était fixé sur une taille, si ça peut servir à d'autre ...

(font-size: 1.4em; )

[== Indéfini ==]
.large-btns .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 1.4em;
  text-shadow: none;
  color: #fff;
  background: #222;
  background: rgba(0,0,0, .6);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20px;
  margin: 0;/*0 38px;*/
  max-width: none;
  font-family: galo;
  opacity: 0.6;
  }

Merci pour l'aide, pour ces deux boutons !

Jerry Wham · novembre 2014

Quel est le type de display de ces éléments (inline, block...) ?

S'ils sont de type inline, tu auras beau mettre un width ou un height, ils ne le prendront pas en compte vu qu'ils prendront ceux de leur parent.
Si c'est le cas (type inline), un moyen est de le transformer en inline-block.

noogaty · novembre 2014

Salut Jerry Wham, et merci pour ta réponse !

Mais je n'arrive pas à trouver le display de ces éléments ...

La feuille de style est un peu compliqué (pour moi).
J'ai trouvé quelques "display" que j'ai mis en "inline-block", mais toujours pareil ...

Une idée ? :8

Jerry Wham · novembre 2014

Le mieux est de nous mettre un lien vers une démo que l'on puisse débugguer...

noogaty · novembre 2014

Je me permets de t'envoyer le lien en MP, il est vraiment en développement, et je ne veux pas le voir référencé sur le web ...

Jerry Wham · novembre 2014

Les boutons sont une image en background (sprite). Tu ne pourras donc pas les redimensionner via le css.

noogaty · novembre 2014

Ok, merci beaucoup de t'être penché sur mon problème !

Je pense que je vais supprimer ces deux flèches alors ...

bg62 · novembre 2014

personnellement, ce plugin = adopté

et plus que super ... va quand même falloir que je fasse la mise à jour avec les derniers changements;)

Dudy · juillet 2015

Bonjour
j'aimerais adapter ce plugin avec la dernier version de Pluxml 5.4

j'ai modifier le chemin des images dans le fichier class.plx.responslidesjs.php à la ligne 92

[== PHP ==]
$root = $plxAdmin->aConf['medias'];

mais ne marche pas

je crois qu il faudrait une petite explication de comment mettre a jour les plugins avec la nouvelle version, pour moi que je suis null en programmation, ça serait utile

merci

bg62 · août 2015

lut;)
Je suis dans le même cas : pas moyen de le faire fonctionner avec PluXml5.4
quelqu'un aurait-il la solution ?
merci

[Plugin] plxResponsiveSlidesJs.1.2.lazy

Réponses