[SPXWUNSLIDER] : Widget slider administrable

je-evrard · juillet 2014

Ce plugin va vous permettre d'administrer l'affichage de un ou plusieurs sliders responsive.

Chaque slide est composé de :

[list=*]
[*]une image[/*]
[*]un titre (optionnel)[/*]
[*]un sous titre (optionnel)[/*]
[*]un bouton lien (optionnel)[/*]
[/list]

Note importante :

Ce plugin, d'un genre nouveau, est utilisé comme widget du plugin spxdatas.

Pour rappel : spxdatas permet la gestion et l'administration de données structurées (widgets).

Vous devrez donc avoir installer au préalable le plugin spxdatas version officielle dans le dossier plugin de pluxml. Pour la configuration de spxdatas, c'est extrèmement simple... voir la configuration simplissime ici.

il est indispensable d'obtenir une version de spxdatas >= 1.60.

Ci dessous voici la configuration des plugins que vous devriez obtenir :

Voici a quoi ressemble l'administration du slider :

Il est préférable de lire la documentation sur le blog offciel. Ici

Caractéristiques :

[list=*]
[*]intègre la librairie unslider[/*]
[*]administration via widget (un ou plusieurs slider)[/*]
[*]configuration complète (text, description, image, boutons)[/*]
[*]possibilité de fixer les droits de lecture, création, modification, suppression selon le niveau d'admin[/*]
[*]une aide soignée[/*]
[*]nécessite le plugin spxdatas version >= 1.60[/*]
[/list]

Niveau d'usage : facile

Compatible : pluxml 5.1.7 - 5.2 - 5.3 - 5.3.1

spxwunslider 1.5 version officielle

Ne pas hésiter si vous avez des questions...

je-evrard · juillet 2014

Mise a jour en version 1.1. (Correction chemin image)

Cristofoto · juillet 2014

salut,
y a-t-il une dimension d'image à ne pas dépasser pour afficher correctement le photos dans le slider ?

joebart · juillet 2014

Hello, peut-on juste s'en servir comme slider texte, sans image ?

je-evrard · juillet 2014

Cristofoto a écrit:

y a-t-il une dimension d'image à ne pas dépasser pour afficher correctement le photos dans le slider ?

Personnellement je prend du 1400 sur 400 en jpg. Au dela ça sert pas a grand chose.

joebart a écrit:

Hello, peut-on juste s'en servir comme slider texte, sans image ?

Non, en fait ce plugin est fait au minimim pour faire slider des images.

Note :

Comme j'ai pas trop de retour du ça marche ça marche pas... J'ai quelques questions.

Le slider fonctionne bien ?
Vous avez installé spxdatas v 1.60 et vous l'avez configuré (tuto du blog spx). Vous avez trouvé ça compliqué à mettre en place ?
Est-il pour vous compliqué à administrer ? Trouvez vous la configuration souple, compliquée... ?

Merci de votre retour.

jerome

Jerry Wham · juillet 2014

Je n'ai pas encore eu à l'utiliser. Donc je ne peux pas te faire de retour dessus pour l'instant.
C'est vrai qu'il faut que je me penche un peu plus sur ta surcouche à pluxml pour vraiment me faire une idée mais je n'ai pas trop eu le temps.

je-evrard · juillet 2014

Pas de soucis Jerry.

chriss · juillet 2014

Bonjour,
j'essaye depuis ce matin ton Plugin, dommage pas responsible

.
Dommage aussi que le titre et sous-titre ne soit pas configurable: couleur, polices (quoique !) , emplacement sur le slider mais aussi mettre un background.

J'ai aussi trouvé des erreurs dans le fichier CSS

ces lignes, les 3 premières:

[== CSS ==]
.spxwunslider { position: relative; overflow: auto; }
    .spxwunslider li { list-style: none; }
        .spxwunslider ul li { float: left; }

sont inutiles puisque repris plus bas.

ensuite " .spxwunslider ul li" ou " .spxwunslider li" pointent vers la même propriété <li>, en regroupant cela permet d'alléger la page de style.
Voilà pour un début, je vais continuer à l'essayer

EDIT: Toujours dans la feuille de styles; tu peut supprimer les lignes avec le vendor -O- Opera utilise maintenant -webkit-
Pour background-size là aussi plus besoin de vendor -webkit- et -moz-

EDIT 2: obliger de supprimer le plugin : 148 Errors, 158 warning(s) :-((

je-evrard · juillet 2014

Merci pour le test et tes commentaires.

chriss · juillet 2014

Re...
je ne comprends pas avec ton plugin avoir 148 erreurs et o erreur en vérifiant le site unslider.com

et pourtant il devrait il y avoir les mêmes erreurs les balises et <hn></hn> dans les balises <li></li>.
Malheureusement pour cause de vacances pas le temps de chercher d'où viennent toutes ces erreurs.

ceci crée des erreurs

[== Indéfini ==]

		<!--|--------------------------------------------------------------------------
		| FLEXSLIDER
		|---------------------------------------------------------------------------->

je le supprimerais ...

je-evrard · juillet 2014

Tu as suivi la procédure d installation ?
Regarde la version de jquery qui est appelé. Le spxwunslider ne load jquery uniquement si ce dernier n'est pas chargé. pour info il charge la version jquery-2.0.3.min.js.

chriss · juillet 2014

je-evrard a écrit:

Tu as suivi la procédure d installation ?
Regarde la version de jquery qui est appelé. Le spxwunslider ne load jquery uniquement si ce dernier n'est pas chargé. pour info il charge la version jquery-2.0.3.min.js.

Oui, J'ai suivi la procédure.
avant la desinstallation du plugin, je n'ai pas vérifié la version, mais sur le site c'est normalement la dernière via le serveur de Jquery.
Avant de partir je vais le réinstaller.

chriss · juillet 2014

chriss a écrit:

Re...

ceci crée des erreurs

[== Indéfini ==]

		<!--|--------------------------------------------------------------------------
		| FLEXSLIDER
		|---------------------------------------------------------------------------->

je le supprimerais ...

en le supprimant je n'ai plus qu'une erreur et 11 warnings.

voir sur W3C: http://bit.ly/1tscyk1

chriss · juillet 2014

et l'erreur serait dû à une balise dans une une balise

[== HTML ==]
<h1></h1><p><p>Des Astuces HTML5 et CSS3</p></p><a class="btn display0" target="_blank" href="#">test</a></li>

chriss · juillet 2014

autre chose.... oui oui je sais.. :cool: , j,ai tout les styles css en double. Cela viendrait que tu charges un fichier site.css dans le dossier CSS, mais aussi les styles qui sont au niveau de l'administration du plugin de Pluxml dans "Code CSS"

je-evrard · juillet 2014

Merci

je vais regarder tout ça pour une prochaine mise à jour. Coté admin ça marche bien sinon (widget).

chriss · juillet 2014

je-evrard a écrit:

Merci je vais regarder tout ça pour une prochaine mise à jour. Coté admin ça marche bien sinon (widget).

je n'ai eu aucun problème,..........pour l 'instant.

Ton plugin, autrement, me plait bien.

je-evrard · juillet 2014

Hum tu me fais plaisir la.

. Le coté admin est le plus important pour moi pour le moment. Si tout baigne à ce niveau, d'autres plugins viendront enrichir les widget.
Ce plugin est le premier de cette sorte, c'est un coup d'essai.

chriss · juillet 2014

je-evrard a écrit:

Hum tu me fais plaisir la. . Le coté admin est le plus important pour moi pour le moment. Si tout baigne à ce niveau, d'autres plugins viendront enrichir les widget.
Ce plugin est le premier de cette sorte, c'est un coup d'essai.

évite de nommer ton fichier CSS "site.css" car il se "telecharge " dans code CSS du plugins

Dudy · juillet 2014

hallo
je viens d'essayer ce plugins, il marche a merveille,la partie admin tres facile à mettre en place bravo jeje

j'ai juste une question ,ou je peu changer les dimensions pour pouvoir le mettre dans la sidebar par exemple?
merci
ciao

chriss · juillet 2014

Dudy a écrit:

hallo
je viens d'essayer ce plugins, il marche a merveille,la partie admin tres facile à mettre en place bravo jeje
j'ai juste une question ,ou je peu changer les dimensions pour pouvoir le mettre dans la sidebar par exemple?
merci
ciao

dans CODE CSS en 1er éfface ce qu'il y a déjà, C'est en double et ensuite copie cette ligne:

[== CSS ==]
.spxwunslider { width: 90% !important;  margin: 0 auto; }

tu peut modifier 90%, bien sûr.

Dudy · juillet 2014

ok merci chriss
ciao

je-evrard · août 2014

Mise à jour version 1.2
***v1.2***
- ne pas lire site.css (deja loadé par pluxml)
- correction javascript
- correction id sur shortcode

Attention pour les gens qui avait vidé le css du plugin il va falloir le remettre. Je parle bien sur du site.css du plugin.

[== CSS ==]
.spxwunslider { position: relative; overflow: auto; }
    .spxwunslider li { list-style: none; }
        .spxwunslider ul li { float: left; }

.spxwunslider {
	position: relative;
	width: 100%;
	overflow: auto;
	
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	
	color: rgba(255,255,255,.6);
	text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
	
	background: #5b4d3d;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
	.spxwunslider ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	
	.spxwunslider ul li {
		display: block;
		float: left;
		width: 33%;
		
		min-height: 350px;
		
/*		-webkit-background-size: 100% 100%;*/
		-moz-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-ms-background-size: 100% 100%;
/*		background-size: 100% 100%;*/
		
		box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
		margin-left: 0px;
	}
	
	.spxwunslider h1, .spxwunslider h2 {
		font-size: 40px;
		line-height: 52px;
		color: #fff;
	}
	
	.spxwunslider .btn {
		display: inline-block;
		margin: 25px 0 0;
		padding: 9px 22px 7px;
		clear: both;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		border: 2px solid rgba(255,255,255,.4);
		border-radius: 5px;
	}
		.spxwunslider .btn:hover {
			background: rgba(255,255,255,.05);
		}
		.spxwunslider .btn:active {
			-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
		}
		
	.spxwunslider .btn, .spxwunslider .dot {
		-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
	}
	
	.spxwunslider .btn.display0 {
		display:none;
	}
	
	.spxwunslider .dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20px;
	}
		.spxwunslider .dots li {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 4px;
			
			text-indent: -999em;
			
			border: 2px solid #fff;
			border-radius: 6px;
			
			cursor: pointer;
			opacity: .4;
			
			-webkit-transition: background .5s, opacity .5s;
			-moz-transition: background .5s, opacity .5s;
			transition: background .5s, opacity .5s;
		}
			.spxwunslider .dots li.active {
				background: #fff;
				opacity: 1;
			}
		


@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
	
	.spxwunslider h1, .spxwunslider h2 {
		font-size: 24px;
		line-height: 30px;
	}
	.spxwunslider ul li {
		padding-top: 100px;
		padding-bottom: 50px;
		height: 240px;
	}
	.spxwunslider p {
		font-size: 15px;
		width: 80%;
		margin: 0 auto;
	}
}

gjoblin · décembre 2014

Bonjour,

Malgré les manipulations citées ci-dessus, j'essaye de modifier la taille du plugin sans succès pourriez-vous m'éclairer s'il vous plait?

Merci d'avance!

G.Joblin

je-evrard · août 2015

Nouvelle version 1.3 disponible pour compatibilité pluxml 5.4

Dudy · août 2015

Bonjour Jerome

merci pour cette mise a jour, mais ça n'as résolu le problème de l' image responsive,

pour les textes c'est bon il se redimensionne, j'ai essayer de utiliser le cover en background, mais sans success
que conseil-tu de faire pour avoir un slider parfait( comme tout le reste de tes Plugins

)

merci bon dimanche

je-evrard · août 2015

Merci dudy. Je regarde ça dès que possible.

A plus

Jeje

Dudy · août 2015

voilà jeje en attendant
j'ai modifié le script dans fichier plugins/site.css pour avoir une image centré, l'image elle ne se redimensionné pas mais au moins elle reste centré et pas de répétition

[== CSS ==]
.spxwunslider ul li { 
display: block;
float: left;
max-width: 100%;
min-height: 583px;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
margin-left: 0px;
}

je-evrard · mai 2016

**** v 1.4. ****
- mod help plugin for pluxml 5.5

je-evrard · juin 2016

**** v 1.5. ****
- issue : fix issue for help

Vous pouvez mettre à jour facilement via le spxplugindowloader

joebart · juillet 2016

Hello

J'ai tenté aussi ce plugin mais je n'ai qu'un slide qui s'affiche (sur 3) , totalement décalé sur mon header (c'est là que j'ai tenté de le placer), sur la gauche...

Jai bien inséré dans mon header les lignes d ecode :

<?php
global $plxShow;
echo ($plxShow->callHook('spxwunslider::getUnsliderID', '001'));
?>

[SPXWUNSLIDER] : Widget slider administrable

Réponses