[plugin] Slideshow avec texte basé sur s3slider

maxime71maxime71 Member
mai 2012 modifié dans Plugins
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)
«1

Réponses

  • bankaibankai Member
    En voici un plugin intéressant, je vais suivre cela avec plaisir :)
  • 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 ;)
  • bankaibankai Member
    Je vais testé cela dans la journée :)
  • bg62bg62 Member
    mai 2012 modifié
    ouais .... :)
    plus qu'intéressant !!!
    et bienvenue sur PluXml ....
  • Alors bankai, tu as testé ? :)
  • merci !! c'est un plugin intéressant
  • Jerry WhamJerry Wham Member
    mai 2012 modifié
    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 WhamJerry Wham Member
    mai 2012 modifié
    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.
  • 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é !
  • 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...
  • 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 WhamJerry Wham Member
    mai 2012 modifié
  • StéphaneStéphane Member, Former PluXml Project Manager
    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.

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • 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 :-/
  • Ok, je pense que le problème a été corrigé :) mais il faudrait que réessaies Jerry s'il te plait :p


    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 xl e . n o x Member
    mai 2012 modifié
    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 ;-) .
    =================================================
  • maxime71 a écrit:
    Ok, je pense que le problème a été corrigé :) mais il faudrait que réessaies Jerry s'il te plait :p


    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...
  • Je viens de corriger la css et les traduction. Si ça vous intéresse, vous pouvez télécharger l'archive sur mon site.
  • 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 WhamJerry Wham Member
    mai 2012 modifié
    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. ;-)
  • 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 ;)
  • Cool
  • maxime71maxime71 Member
    mai 2012 modifié
    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
  • 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.
  • 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
  • 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 ;)
  • Merci bonne continuation Mr Maxime
  • 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 WhamJerry Wham Member
    juin 2012 modifié
    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...
  • bg62bg62 Member
    brar2010 a écrit:
    Merci bonne continuation Mr Maxime
    tu as vu ton site :
    http://www.mywot.com/en/scorecard/yanplus.eb2a.com
    ???
Connectez-vous ou Inscrivez-vous pour répondre.