[plugin] Slideshow avec texte basé sur s3slider

maxime71

Bonsoir, voici mon premier plugin il a surement encore quelques bugs (dont 2 connus) mais j'arrête de bosser pour ce soir !

Ce plugin permet de réaliser un slideshow qui peut afficher le titre ainsi qu'une description de l'image si vous le souhaitez. Dans cette description vous pouvez également ajouter des liens html pour par exemple afficher un 'Lire la suite'... Les images peuvent très bien venir de sources externes à votre site car il suffit dans l'administration du plugin d'indiquer son URL.



Version : 0.1b (beta)
Bug connus :
- Taille du bloc texte gauche (et surement droit) quand c'est trop grand
- Admin : la position du texte est écrit en anglais.
Version : 1.0b (beta)
Changelog ici (#24)
Pour la prochaine version je compte ajouter un lien vers la page des medias


Pour en savoir plus
La démonstration en ligne
Téléchargeable ici (version 1.0b)

bankai

En voici un plugin intéressant, je vais suivre cela avec plaisir

maxime71

Yop, voilà je viens de mettre une page de démo pour ceux qui veulent avoir un aperçu -> http://www.milletmaxime.net/pluxml/index.php?static1/slideshow-pluxml

Mais j'aimerais bien aussi avoir un petit test de quelqu'un pour voir si ça marche ailleurs que chez moi

bankai

Je vais testé cela dans la journée

bg62

ouais ....
plus qu'intéressant !!!
et bienvenue sur PluXml ....

maxime71

Alors bankai, tu as testé ?

brar2010

merci !! c'est un plugin intéressant

Jerry Wham

Je vais tester mais j'ai déjà une remarque : le code javascript est placé en haut de page dans le header, ce qui n'est pas très judicieux car cela peut ralentir le temps de chargement de la page. Il vaut mieux le placer en bas de page.


Je modifierais donc la fonction sliderHeaders pour la scinder en deux : une nouvelle sliderHeaders uniquement pour la css et une sliderFooters pour le javascript.


Sinon, bonne idée que de laisser la possibilité de mettre le js dans un fichier ou directement dans la page.

Plugin à suivre !


Autre remarque, je ne pense pas qu'il soit nécessaire de mettre plxShow en global. Stéphane pourrait-il nous le confirmer ?

Jerry Wham

Je viens de tester et il y a en effet un bug avec l'affichage des textes. Le premier s'affiche correctement (en haut) par contre si on place le deuxième en bas, on ne voit que le haut du bandeau. Si on place ce même texte à droite, le bloc ne s'affiche qu'à moitié (à gauche ça s'affiche bien). Je tiens à préciser que le texte n'est pas long (j'ai mis "dfgkjklfd jgkl kjkjl").


Après plusieurs tests :
Aucun bloc ne s'affiche en bas (si on les met tous en bas ou si on n'en met que quelques uns). Juste un petit bout apparait.


Pour les blocs de droite, ça s'affiche mais le bloc ne va pas jusqu'en haut. Je n'ai pas modifié les paramètres par défaut.


Autre remarque, il aurait été bien d'avoir un lien vers la page médias pour pouvoir sélectionner plus facilement les images.

maxime71

Salut, merci pour ton test ! Je vais voir ça demain

Pour le global effectivement je me pose la même question mais il me semble avoir vu ça dans la doc :-/

Pour le footer effectivement c'est une bonne idée, moi qui est toujours à l'affut du temps de chargement je n'y avais pas pensé.

Pour la position des blocs de textes si tu n'as pas modifié la hauteur et la largeur je vois pas trop où est le pb... tu pourrais me donner un lien que je puisse voir ce que ça fait ? (en MP si tu préfères)

Pour la page media c'est noté !

Jerry Wham

Désolé mais j'ai testé en local. J'utilise la version 5.1.6 avec le theme plxBoostrap.
Je viens de tester avec le thème par défaut et bizarrement ça ne fonctionne pas (en ayant bien sûr mis un lien vers jquery).


J'essaierai de voir ce qui se passe mais là je vais me coucher...

maxime71

Alors si tu pourrais me faire un screen avec ce theme se serait cool car je vois pas trop ce que ça fait, le cadre du texte ne prend pas toute la taille du slide ?

Ton lien vers jQuery doit être placé avant le plugin est-ce le cas ?

De toute façon je regarde ça demain car je vais aussi me coucher

Jerry Wham

Voici les screenshots demandés :


Bloc de droite trop cour et Bloc du bas qui ne s'affiche quasiment pas

Stéphane

pour avoir fait mumuse il y a quelque temps avec s3slider, c'est surtout un [del]prise de tête[/del] problème css qu'il faut rendre compatible pour tous les navigateurs.

maxime71

Yep ça vient du css pour la taille des blocs ça je le savais déjà mais pour le bloc du bas j'ai pas été confronté à ça. Je regarderais des que je peux parce que mes vacances sont terminées :-/

maxime71

Ok, je pense que le problème a été corrigé mais il faudrait que réessaies Jerry s'il te plait


Voilà le nouveau css :
http://www.milletmaxime.net/css-s3slider-pluxml.css

Il faut mettre son contenu dans /slider/s3slider.css.php

l e . n o x

Merci maxime71 pour ce plugin ;O)

Pour les utilisateurs non avancé, quand vous dites qu'il faut coller ceci dans la "page" vous parlez du "nouveau article" ou des "pages statiques" ?


Avec plugin plxEditor - Version 1.2 (20/10/2011) cela semble ne pas fonctionner dans les 2 cas...


Coquille de frappe :
un plugin JQueryest même disponible sur le site de pluxml. >>> un plugin JQuery est même disponible sur le site de pluxml.

Merci encore pour le partage ;O)

==============================================
Aide pour l'utilisation du slider

/!\ Pour le fonctionnement du plugin, vous devez installer JQuery sur votre site (>1.4), un plugin JQueryest même disponible sur le site de pluxml.


Après avoir activé le plugin vous devez insérer le code suivant dans les pages où vous souhaitez afficher le slide :


<?php
global $plxShow;
eval($plxShow->callHook('slideHTML'));
?>


Il vous reste ensuite à insérer les images grâce au nouveau menu "Slider" qui vient d'apparaitre sur la gauche ;-) .
=================================================

Jerry Wham

maxime71 a écrit:

Ok, je pense que le problème a été corrigé mais il faudrait que réessaies Jerry s'il te plait


Voilà le nouveau css :
http://www.milletmaxime.net/css-s3slider-pluxml.css

Il faut mettre son contenu dans /slider/s3slider.css.php

Toujours le même problème à droite et en bas le bloc n'apparait plus...

Jerry Wham

Je viens de corriger la css et les traduction. Si ça vous intéresse, vous pouvez télécharger l'archive sur mon site.

maxime71

Bonsoir, alors j'ai testé sur plusieurs thèmes et il n'y a qu'avec plxBoostrap que je rencontre des problèmes :-/ C'est surement du à l'héritage des propriétés d'un autre élément mais je n'ai pas le temps de m'y attarder pour le moment comme je ne suis plus en vacance.

Par traduction tu parles de la position des fichiers ? Sinon est-ce que je peux proposer le fichier css que tu proposes dans ma future version si jamais des utilisateurs ont le même soucis que toi ?

Si d'autres ont fait des tests et qu'il y a un problème avec le texte si vous pouviez me le signaler ce serait top . Donc demain nouvelle version avec quelques modifications.

Jerry Wham

Mes modifications fonctionnent avec plxBoostrap et le thème par défaut.
Elles portent sur les points suivants (ajouts):

#sliderContent{
	height:<?php echo (int)$_GET['h']; ?>px;
}
.bottom{
	bottom:4px;
}
.left{
	top:-4px;
	height:95%;
}
.right{
	bottom:4px;
	height:95%;
}

Quand je parle de traduction, je veux dire que j'ai écrit un fichier fr.php et que j'ai remplacé le texte français en dur par la méthode $plxPlugin->getLang() dans les fichiers admin et config. J'ai aussi supprimé ta méthode adminHtml() qui ne permettait pas d'utiliser getLang().


Tu peux bien entendu utiliser mes modifications sans problème. Je ne les aurais pas partagées sinon. ;-)

maxime71

Ok merci bien Jerry, j'ai utilisé tes modifications ! Et pour le css je prends aussi !

La prochaine version arrive dans 2 ou 3h, il y a que des modifications mineures comme le JS en bas de page c'est au choix mais activé par défaut et quelques autres bricoles

Jerry Wham

Cool

maxime71

Donc voilà :
@l e . n o x : le code PHP ne passe pas (il est traité comme du html) ou il y a rien ? sinon j'ai mis à jour le fichier d'aide.


Changelog 1.0b
* Correction des bugs CSS par Cyril (Jerry Wham j'ai pas osé mettre ton nom en public, je peux le faire ?)
* Utilisation d'un fichier langue (merci Cyril)
* Ajout de la coloration des liens
* Choix de la place du code JS (en bas ou en haut)
* Corrections mineures

Téléchargeable ici (version 1.0b)
Démo ici

Jerry Wham

Cool.

Pour les blocs de droite et de gauche, le décalage de 4px que j'ai mis n'est pas forcément à mettre tout le temps. Il doit être modifié en fonction du thème. Et chaque bloc doit avoir un décalage indépendant.

J'ai adapté de wordpress le thème compositio (que je partagerai bientôt) et le bloc de droite ne nécessite pas de décalage.

Ca serait bien de pouvoir le paramètrer...


PS : Je préfère que tu utilises mon pseudo sur le forum.

brar2010

good plugin!!! mais il faut trouver de truc pour eviter la supprission des parametres & les titres deja ajoutés lors de la transition de version a l'autre

maxime71

Merci brar et désolé si ça a supprimé tes paramètres et tes images, comme c'est une archive "générale" je n'ai pas pensé à ceux qui avaient déjà installé le plugin :-/

@Jerry : Ok ok pas de problème

brar2010

Merci bonne continuation Mr Maxime

maxime71

Sorry pour le Up! mais je voudrais savoir si certains ont testés sur d'autres thèmes et si ils ont rencontrés des problèmes.

Jerry Wham

J'ai trouvé ce qui cloche dans l'affichage des descriptions. Il faut en fait que les images aient la même dimension que le cadre du slider car les descriptions se basent sur ces dimensions pour s'afficher.
Donc pour qu'il n'y ait plus de problème quelles que soient les dimensions choisies, il faut modifier le fichier s3slider.css.php ainsi :

<?php header("Content-type: text/css"); ?>
#slider {
width:<?php echo (int)$_GET['w']; ?>px;
height:<?php echo (int)$_GET['h']; ?>px;
position:relative;
overflow:hidden;
margin-bottom:15px;
margin-left:auto;
margin-right:auto;}
#sliderContent{
width:720px;
height:<?php echo (int)$_GET['h']; ?>px;
position:absolute;
top:0;
margin-left:0;}
.sliderImage{
width:<?php echo (int)$_GET['w']; ?>px;
height:<?php echo (int)$_GET['h']; ?>px;
float:left;
position:relative;
display:none;}
.sliderImage span {
position:absolute;
font:10px/15px Arial, Helvetica, sans-serif;
padding:10px 13px;
width:<?php echo $_GET['w']; ?>px;
background-color:<?php echo $_GET['bc']; ?>;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:<?php echo $_GET['tc']; ?>;
display:none;}
.sliderImage span a {
color:<?php echo $_GET['lc']; ?>;
}
.clear {clear:both;}
.sliderImage span strong{
font-size:14px;}
.top{
top:0;
left:0;}
.bottom{
bottom:0;
left:0;}
.left{
top:0;
left:0;
width:120px !important;
height:95%;}
.right{
right:0;
bottom:0;
width:120px !important;
height:95%;}

La modification est au niveau de la classe .sliderImage et des classes .top, .bottom, .left et .right.

J'ai par contre un petit souci supplémentaire que je n'arrive pas à corriger : la dernière image du slider ne s'affiche pas. Elle est présente dans le code html, mais le javascript la squizze systématiquement.

Si quelqu'un a une idée...

bg62

brar2010 a écrit:

Merci bonne continuation Mr Maxime

tu as vu ton site :
http://www.mywot.com/en/scorecard/yanplus.eb2a.com
???