Slideshow pour les news en page d'accueil.

[Lycaon.]

Voilà, je voudrais un petit slideshow qui affiche une image de fond, et une description, surtout pas un slideshow pour photos.

J'ai bien essayé, mais je n'y connais absolument rien en code.

http://www.lafermeduweb.net/billet/barackslideshow-un-slideshow-mootools-leger-et-efficace-392.html

Ce slideshow me parait intéressant !

Si vous en avez un autre à proposer, n'hésitez pas...

Je voudrais savoir la marche à suivre pour avoir un slideshow sur sa Page d'accueil, et le configurer...Merci ! ^^


EDIT : Celui là me plait bien aussi => http://www.landofcoder.com/demo/jquery/lofslidernews/index6.html

[Lycaon.]

Up ! ^^

[Lycaon.]

Up !

[Lycaon.]

Up !

[Lycaon.]

Up !

[Invité]

J'ai un peu regardé sa semble simple pour les images tu pourrait faire des images directement avec le texte dessus car là je pourrait surement pas faire mieux, je vais voir...

Edit : j'y suis pas arrivé désolé

[Lycaon.]

Arf c'est pas grave ! Merci quand même !

Uo !

[Lycaon.]

Up !

[Lycaon.]

Up !

[Lycaon.]

Up !

[Lycaon.]

Up !

[Lycaon.]

Up...

[Lycaon.]

Up !

[Ryan-G]

Salut,
je vois que tu as fait pas mal de up!

Déjà, merci car je cherche depuis un moment un tutoriel pour créer un slideshow (je ne connaissais même pas ce nom) et tes liens m'ont l'air intéressants. Je vais essayer de configurer le slideshow de ton 1er lien sur ma page d'accueil (le 2è je n'y arriverai pas). Je te tiens au courant si j'y arrive.

Dans le cas où je réussis à le configurer : pour ce qui est de la description, je vais voir ce que je peux faire. Sinon comme Snipeur l'a indiqué plus haut, tu as toujours la solution de mettre la description comme partie intégrante de l'image.

[Lycaon.]

Merde, je croyais t'avoir répondu mec...tant pis...En gros, je disais, merci à toi de répondre au topic, j'me suis dit que j'allais tester avec celui là => https://forum.forumactif.com/t311741-pour-avoir-une-pa-accordeon

Résultat... http://creepypasta.forumactif.com/ T_T

Mais bon on va y arriver hein? Tu peux essayer d'installer celui ci?

[Lycaon.]

Up !

[Lycaon.]

Up !

[Lycaon.]

Up...J'ai plus trop d'espoir m'enfin...

[Invité]

Bonsoir,

Une proposition:
Dans panneau d'admin' > modules > gestion de codes javascript, placez ce code:

Code:

var fadeSlideShow_descpanel={controls:[["x.png",7,7],["restore.png",10,11],["loading.gif",54,55]],fontStyle:"normal 11px Verdana",slidespeed:200};jQuery.noConflict();
function fadeSlideShow(b){this.setting=b;b=null;b=this.setting;b.fadeduration=b.fadeduration?parseInt(b.fadeduration):500;b.curimage=b.persist?fadeSlideShow.routines.getCookie("gallery-"+b.wrapperid):0;b.curimage=b.curimage||0;b.currentstep=0;b.totalsteps=b.imagearray.length*(b.displaymode.cycles>0?b.displaymode.cycles:Infinity);b.fglayer=0;b.bglayer=1;b.oninit=b.oninit||function(){};b.onslide=b.onslide||function(){};b.displaymode.randomize&&b.imagearray.sort(function(){return 0.5-Math.random()});
var c=[];b.longestdesc="";for(var a=0;a<b.imagearray.length;a++)if(c[a]=new Image,c[a].src=b.imagearray[a][0],b.imagearray[a][3]&&b.imagearray[a][3].length>b.longestdesc.length)b.longestdesc=b.imagearray[a][3];c=fadeSlideShow_descpanel.controls[0];b.closebutton=b.descreveal=="always"?'<img class="close" src="'+c[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+c[1]+"px;height:"+c[2]+'px;margin-left:2px" title="Hide Description" />':"";var d=this;jQuery(document).ready(function(b){var a=
d.setting,c=fadeSlideShow.routines.getFullHTML(a.imagearray);a.$wrapperdiv=b("#"+a.wrapperid).css({position:"relative",visibility:"visible",background:"black",overflow:"hidden",width:a.dimensions[0],height:a.dimensions[1]}).empty();if(a.$wrapperdiv.length==0)alert('Error: DIV with ID "'+a.wrapperid+'" not found on page.');else{a.$gallerylayers=b('<div class="gallerylayer"></div><div class="gallerylayer"></div>').css({position:"absolute",left:0,top:0,width:"100%",height:"100%",background:"black"}).appendTo(a.$wrapperdiv);
var g=b('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+";height:"+fadeSlideShow_descpanel.controls[2][2]+'" />').css({left:a.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2,top:a.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}).appendTo(a.$wrapperdiv),c=a.$gallerylayers.html(c).find("img").hide().eq(a.curimage);a.longestdesc!=""&&a.descreveal!="none"&&(fadeSlideShow.routines.adddescpanel(b,a),a.descreveal==
"always"?(a.$descpanel.css({top:a.dimensions[1]-a.panelheight}),a.$descinner.click(function(a){a.target.className=="close"&&d.showhidedescpanel("hide")}),a.$restorebutton.click(function(){d.showhidedescpanel("show");b(this).css({visibility:"hidden"})})):a.descreveal=="ondemand"&&(a.$wrapperdiv.bind("mouseenter",function(){d.showhidedescpanel("show")}),a.$wrapperdiv.bind("mouseleave",function(){d.showhidedescpanel("hide")})));a.$wrapperdiv.bind("mouseenter",function(){a.ismouseover=!0});a.$wrapperdiv.bind("mouseleave",
function(){a.ismouseover=!1});c.get(0).complete?(g.hide(),d.paginateinit(b),d.showslide(a.curimage)):(g.hide(),d.paginateinit(b),c.bind("load",function(){d.showslide(a.curimage)}));a.oninit.call(d);b(window).bind("unload",function(){d.setting.persist&&fadeSlideShow.routines.setCookie("gallery-"+a.wrapperid,a.curimage);jQuery.each(d.setting,function(a){if(d.setting[a]instanceof Array)for(var b=0;b<d.setting[a].length;b++){if(d.setting[a][b].tagName=="DIV")d.setting[a][b].innerHTML=null;d.setting[a][b]=
null}});d=d.setting=null})}})}
fadeSlideShow.prototype={navigate:function(b){var c=this.setting;clearTimeout(c.playtimer);if(c.displaymode.type=="auto")c.displaymode.type="manual",c.displaymode.wraparound=!0;isNaN(parseInt(b))?/(prev)|(next)/i.test(b)&&this.showslide(b.toLowerCase()):this.showslide(parseInt(b))},showslide:function(b){var c=this,a=c.setting;if(a.displaymode.type=="auto"&&a.ismouseover&&a.currentstep<=a.totalsteps)a.playtimer=setTimeout(function(){c.showslide("next")},a.displaymode.pause);else{var d=a.imagearray.length,
b=b=="next"?a.curimage<d-1?a.curimage+1:0:b=="prev"?a.curimage>0?a.curimage-1:d-1:Math.min(b,d-1),e=a.$gallerylayers.eq(a.bglayer).find("img").hide().eq(b).show(),f=[e.width(),e.height()];e.css({marginLeft:f[0]>0&&f[0]<a.dimensions[0]?a.dimensions[0]/2-f[0]/2:0});e.css({marginTop:f[1]>0&&f[1]<a.dimensions[1]?a.dimensions[1]/2-f[1]/2:0});a.descreveal=="peekaboo"&&a.longestdesc!=""&&(clearTimeout(a.hidedesctimer),c.showhidedescpanel("hide",0));a.$gallerylayers.eq(a.bglayer).css({zIndex:1E3,opacity:0}).stop().css({opacity:0}).animate({opacity:1},
a.fadeduration,function(){clearTimeout(a.playtimer);try{a.onslide.call(c,a.$gallerylayers.eq(a.fglayer).get(0),a.curimage)}catch(b){alert('Fade In Slideshow error: An error has occured somwhere in your code attached to the "onslide" event: '+b)}if(a.descreveal=="peekaboo"&&a.longestdesc!="")c.showhidedescpanel("show"),a.hidedesctimer=setTimeout(function(){c.showhidedescpanel("hide")},a.displaymode.pause-fadeSlideShow_descpanel.slidespeed);a.currentstep+=1;if(a.displaymode.type=="auto"&&(a.currentstep<=
a.totalsteps||a.displaymode.cycles==0))a.playtimer=setTimeout(function(){c.showslide("next")},a.displaymode.pause)});a.$gallerylayers.eq(a.fglayer).css({zIndex:999});a.fglayer=a.bglayer;a.bglayer=a.bglayer==0?1:0;a.curimage=b;a.$descpanel&&(a.$descpanel.css({visibility:a.imagearray[b][3]?"visible":"hidden"}),a.imagearray[b][3]&&a.$descinner.empty().html(a.closebutton+a.imagearray[b][3]));a.displaymode.type=="manual"&&!a.displaymode.wraparound&&this.paginatecontrol();a.$status&&a.$status.html(a.curimage+
1+"/"+d)}},showhidedescpanel:function(b,c){var a=this.setting,d=b=="show"?a.dimensions[1]-a.panelheight:this.setting.dimensions[1];a.$descpanel.stop().animate({top:d},typeof c!="undefined"?c:fadeSlideShow_descpanel.slidespeed,function(){a.descreveal=="always"&&b=="hide"&&a.$restorebutton.css({visibility:"visible"})})},paginateinit:function(b){var c=this,a=this.setting;if(a.togglerid)a.$togglerdiv=b("#"+a.togglerid),a.$prev=a.$togglerdiv.find(".prev").data("action","prev"),a.$next=a.$togglerdiv.find(".next").data("action",
"next"),a.$prev.add(a.$next).click(function(a){var e=b(this);c.navigate(e.data("action"));a.preventDefault()}),a.$status=a.$togglerdiv.find(".status")},paginatecontrol:function(){var b=this.setting;b.$prev.css({opacity:b.curimage==0?0.4:1}).data("action",b.curimage==0?"none":"prev");b.$next.css({opacity:b.curimage==b.imagearray.length-1?0.4:1}).data("action",b.curimage==b.imagearray.length-1?"none":"next");document.documentMode==8&&(b.$prev.find("img:eq(0)").css({opacity:b.curimage==0?0.4:1}),b.$next.find("img:eq(0)").css({opacity:b.curimage==
b.imagearray.length-1?0.4:1}))}};
fadeSlideShow.routines={getSlideHTML:function(b){var c=b[1]?'<a href="'+b[1]+'" target="'+b[2]+'">\n':"";c+='<img src="'+b[0]+'" style="border-width:0;" />\n';c+=b[1]?"</a>\n":"";return c},getFullHTML:function(b){for(var c="",a=0;a<b.length;a++)c+=this.getSlideHTML(b[a]);return c},adddescpanel:function(b,c){c.$descpanel=b('<div class="fadeslidedescdiv"></div>').css({position:"absolute",visibility:"hidden",width:"100%",left:0,top:c.dimensions[1],font:fadeSlideShow_descpanel.fontStyle,zIndex:"1001"}).appendTo(c.$wrapperdiv);
b('<div class="descpanelbg"></div><div class="descpanelfg"></div>').css({position:"absolute",left:0,top:0,width:c.$descpanel.width()-8,padding:"4px"}).eq(0).css({background:"black",opacity:0.7}).end().eq(1).css({color:"white"}).html(c.closebutton+c.longestdesc).end().appendTo(c.$descpanel);c.$descinner=c.$descpanel.find("div.descpanelfg");c.panelheight=c.$descinner.outerHeight();c.$descpanel.css({height:c.panelheight}).find("div").css({height:"100%"});if(c.descreveal=="always")c.$restorebutton=b('<img class="restore" title="Restore Description" src="'+
fadeSlideShow_descpanel.controls[1][0]+'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+"px;height:"+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />').appendTo(c.$wrapperdiv)},getCookie:function(b){b=RegExp(b+"=[^;]+","i");return document·cookie.match(b)?document·cookie.match(b)[0].split("=")[1]:null},setCookie:function(b,c){document·cookie=b+"="+c+";path=/"}};




var mygallery=new fadeSlideShow({wrapperid:"fadeshow1",
dimensions:[250,180],
imagearray:[["http://i26.tinypic.com/11l7ls0.jpg","","","Texte 1"],
["http://i29.tinypic.com/xp3hns.jpg","http://en.wikipedia.org/wiki/Cave","_new","Texte 2"],
["http://i30.tinypic.com/531q3n.jpg","","","Texte 3"],["http://i31.tinypic.com/119w28m.jpg","","","Texte4"]],
displaymode:{type:"auto",
pause:2000,
cycles:0,
wraparound:!1},
persist:!1,
fadeduration:1000,
descreveal:"peekaboo",
togglerid:""});

La partie modifiable est celle-ci, il ne faut pas toucher le reste:

Code:

var mygallery=new fadeSlideShow({wrapperid:"fadeshow1",
dimensions:[250,180],
imagearray:[["http://i26.tinypic.com/11l7ls0.jpg","","","Texte 1"],
["http://i29.tinypic.com/xp3hns.jpg","http://en.wikipedia.org/wiki/Cave","_new","Texte 2"],
["http://i30.tinypic.com/531q3n.jpg","","","Texte 3"],
["http://i31.tinypic.com/119w28m.jpg","","","Texte4"]],
displaymode:{type:"auto",
pause:2000,
cycles:0,
wraparound:!1},
persist:!1,
fadeduration:1000,
descreveal:"peekaboo",
togglerid:""});

Dans dimension, vous devez mettre la largeur et la hauteur de votre plus grande image.
Les images et les textes se placent dans la partie imagearray.
Si vous remplacez peekaboo par always, la légende sera toujours affichée, si vous le remplacez par ondemand, elle s'affichera au passage de la souris.
Pour le reste je vous laisse tester.

Ensuite placez ceci dans votre message d'accueil:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code*/
//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/</script><div id="fadeshow1"></div>

Oui, je sais, c'est long, mais il est important de respecter les crédits des créateurs du script. Normalement , vous n'avez rien à toucher dans cette partie.

Cordialement.

[Lycaon.]

Alors, j'ai fait ce que vous m'avez demandé, mais ça ne marche toujours pas =>

mes codes javascripts =>

J'ai testé avec et sans le CSS fourni =>

Et mon message d'accueil =>

Et merci beaucoup pour votre réponse !

[Invité]

Bonjour,

J'ai réaliser un test avec le code de démo sur mon forum test et cela fonctionne plutot bien .
J'ai simplement installé ceci dans les codes javascript:

Code:

var fadeSlideShow_descpanel={controls:[["x.png",7,7],["restore.png",10,11],["loading.gif",54,55]],fontStyle:"normal 11px Verdana",slidespeed:200};jQuery.noConflict();
function fadeSlideShow(b){this.setting=b;b=null;b=this.setting;b.fadeduration=b.fadeduration?parseInt(b.fadeduration):500;b.curimage=b.persist?fadeSlideShow.routines.getCookie("gallery-"+b.wrapperid):0;b.curimage=b.curimage||0;b.currentstep=0;b.totalsteps=b.imagearray.length*(b.displaymode.cycles>0?b.displaymode.cycles:Infinity);b.fglayer=0;b.bglayer=1;b.oninit=b.oninit||function(){};b.onslide=b.onslide||function(){};b.displaymode.randomize&&b.imagearray.sort(function(){return 0.5-Math.random()});
var c=[];b.longestdesc="";for(var a=0;a<b.imagearray.length;a++)if(c[a]=new Image,c[a].src=b.imagearray[a][0],b.imagearray[a][3]&&b.imagearray[a][3].length>b.longestdesc.length)b.longestdesc=b.imagearray[a][3];c=fadeSlideShow_descpanel.controls[0];b.closebutton=b.descreveal=="always"?'<img class="close" src="'+c[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+c[1]+"px;height:"+c[2]+'px;margin-left:2px" title="Hide Description" />':"";var d=this;jQuery(document).ready(function(b){var a=
d.setting,c=fadeSlideShow.routines.getFullHTML(a.imagearray);a.$wrapperdiv=b("#"+a.wrapperid).css({position:"relative",visibility:"visible",background:"black",overflow:"hidden",width:a.dimensions[0],height:a.dimensions[1]}).empty();if(a.$wrapperdiv.length==0)alert('Error: DIV with ID "'+a.wrapperid+'" not found on page.');else{a.$gallerylayers=b('<div class="gallerylayer"></div><div class="gallerylayer"></div>').css({position:"absolute",left:0,top:0,width:"100%",height:"100%",background:"black"}).appendTo(a.$wrapperdiv);
var g=b('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+";height:"+fadeSlideShow_descpanel.controls[2][2]+'" />').css({left:a.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2,top:a.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}).appendTo(a.$wrapperdiv),c=a.$gallerylayers.html(c).find("img").hide().eq(a.curimage);a.longestdesc!=""&&a.descreveal!="none"&&(fadeSlideShow.routines.adddescpanel(b,a),a.descreveal==
"always"?(a.$descpanel.css({top:a.dimensions[1]-a.panelheight}),a.$descinner.click(function(a){a.target.className=="close"&&d.showhidedescpanel("hide")}),a.$restorebutton.click(function(){d.showhidedescpanel("show");b(this).css({visibility:"hidden"})})):a.descreveal=="ondemand"&&(a.$wrapperdiv.bind("mouseenter",function(){d.showhidedescpanel("show")}),a.$wrapperdiv.bind("mouseleave",function(){d.showhidedescpanel("hide")})));a.$wrapperdiv.bind("mouseenter",function(){a.ismouseover=!0});a.$wrapperdiv.bind("mouseleave",
function(){a.ismouseover=!1});c.get(0).complete?(g.hide(),d.paginateinit(b),d.showslide(a.curimage)):(g.hide(),d.paginateinit(b),c.bind("load",function(){d.showslide(a.curimage)}));a.oninit.call(d);b(window).bind("unload",function(){d.setting.persist&&fadeSlideShow.routines.setCookie("gallery-"+a.wrapperid,a.curimage);jQuery.each(d.setting,function(a){if(d.setting[a]instanceof Array)for(var b=0;b<d.setting[a].length;b++){if(d.setting[a][b].tagName=="DIV")d.setting[a][b].innerHTML=null;d.setting[a][b]=
null}});d=d.setting=null})}})}
fadeSlideShow.prototype={navigate:function(b){var c=this.setting;clearTimeout(c.playtimer);if(c.displaymode.type=="auto")c.displaymode.type="manual",c.displaymode.wraparound=!0;isNaN(parseInt(b))?/(prev)|(next)/i.test(b)&&this.showslide(b.toLowerCase()):this.showslide(parseInt(b))},showslide:function(b){var c=this,a=c.setting;if(a.displaymode.type=="auto"&&a.ismouseover&&a.currentstep<=a.totalsteps)a.playtimer=setTimeout(function(){c.showslide("next")},a.displaymode.pause);else{var d=a.imagearray.length,
b=b=="next"?a.curimage<d-1?a.curimage+1:0:b=="prev"?a.curimage>0?a.curimage-1:d-1:Math.min(b,d-1),e=a.$gallerylayers.eq(a.bglayer).find("img").hide().eq(b).show(),f=[e.width(),e.height()];e.css({marginLeft:f[0]>0&&f[0]<a.dimensions[0]?a.dimensions[0]/2-f[0]/2:0});e.css({marginTop:f[1]>0&&f[1]<a.dimensions[1]?a.dimensions[1]/2-f[1]/2:0});a.descreveal=="peekaboo"&&a.longestdesc!=""&&(clearTimeout(a.hidedesctimer),c.showhidedescpanel("hide",0));a.$gallerylayers.eq(a.bglayer).css({zIndex:1E3,opacity:0}).stop().css({opacity:0}).animate({opacity:1},
a.fadeduration,function(){clearTimeout(a.playtimer);try{a.onslide.call(c,a.$gallerylayers.eq(a.fglayer).get(0),a.curimage)}catch(b){alert('Fade In Slideshow error: An error has occured somwhere in your code attached to the "onslide" event: '+b)}if(a.descreveal=="peekaboo"&&a.longestdesc!="")c.showhidedescpanel("show"),a.hidedesctimer=setTimeout(function(){c.showhidedescpanel("hide")},a.displaymode.pause-fadeSlideShow_descpanel.slidespeed);a.currentstep+=1;if(a.displaymode.type=="auto"&&(a.currentstep<=
a.totalsteps||a.displaymode.cycles==0))a.playtimer=setTimeout(function(){c.showslide("next")},a.displaymode.pause)});a.$gallerylayers.eq(a.fglayer).css({zIndex:999});a.fglayer=a.bglayer;a.bglayer=a.bglayer==0?1:0;a.curimage=b;a.$descpanel&&(a.$descpanel.css({visibility:a.imagearray[b][3]?"visible":"hidden"}),a.imagearray[b][3]&&a.$descinner.empty().html(a.closebutton+a.imagearray[b][3]));a.displaymode.type=="manual"&&!a.displaymode.wraparound&&this.paginatecontrol();a.$status&&a.$status.html(a.curimage+
1+"/"+d)}},showhidedescpanel:function(b,c){var a=this.setting,d=b=="show"?a.dimensions[1]-a.panelheight:this.setting.dimensions[1];a.$descpanel.stop().animate({top:d},typeof c!="undefined"?c:fadeSlideShow_descpanel.slidespeed,function(){a.descreveal=="always"&&b=="hide"&&a.$restorebutton.css({visibility:"visible"})})},paginateinit:function(b){var c=this,a=this.setting;if(a.togglerid)a.$togglerdiv=b("#"+a.togglerid),a.$prev=a.$togglerdiv.find(".prev").data("action","prev"),a.$next=a.$togglerdiv.find(".next").data("action",
"next"),a.$prev.add(a.$next).click(function(a){var e=b(this);c.navigate(e.data("action"));a.preventDefault()}),a.$status=a.$togglerdiv.find(".status")},paginatecontrol:function(){var b=this.setting;b.$prev.css({opacity:b.curimage==0?0.4:1}).data("action",b.curimage==0?"none":"prev");b.$next.css({opacity:b.curimage==b.imagearray.length-1?0.4:1}).data("action",b.curimage==b.imagearray.length-1?"none":"next");document.documentMode==8&&(b.$prev.find("img:eq(0)").css({opacity:b.curimage==0?0.4:1}),b.$next.find("img:eq(0)").css({opacity:b.curimage==
b.imagearray.length-1?0.4:1}))}};
fadeSlideShow.routines={getSlideHTML:function(b){var c=b[1]?'<a href="'+b[1]+'" target="'+b[2]+'">\n':"";c+='<img src="'+b[0]+'" style="border-width:0;" />\n';c+=b[1]?"</a>\n":"";return c},getFullHTML:function(b){for(var c="",a=0;a<b.length;a++)c+=this.getSlideHTML(b[a]);return c},adddescpanel:function(b,c){c.$descpanel=b('<div class="fadeslidedescdiv"></div>').css({position:"absolute",visibility:"hidden",width:"100%",left:0,top:c.dimensions[1],font:fadeSlideShow_descpanel.fontStyle,zIndex:"1001"}).appendTo(c.$wrapperdiv);
b('<div class="descpanelbg"></div><div class="descpanelfg"></div>').css({position:"absolute",left:0,top:0,width:c.$descpanel.width()-8,padding:"4px"}).eq(0).css({background:"black",opacity:0.7}).end().eq(1).css({color:"white"}).html(c.closebutton+c.longestdesc).end().appendTo(c.$descpanel);c.$descinner=c.$descpanel.find("div.descpanelfg");c.panelheight=c.$descinner.outerHeight();c.$descpanel.css({height:c.panelheight}).find("div").css({height:"100%"});if(c.descreveal=="always")c.$restorebutton=b('<img class="restore" title="Restore Description" src="'+
fadeSlideShow_descpanel.controls[1][0]+'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+"px;height:"+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />').appendTo(c.$wrapperdiv)},getCookie:function(b){b=RegExp(b+"=[^;]+","i");return document·cookie.match(b)?document·cookie.match(b)[0].split("=")[1]:null},setCookie:function(b,c){document·cookie=b+"="+c+";path=/"}};
 
 
 
 
var mygallery=new fadeSlideShow({wrapperid:"fadeshow1",
dimensions:[250,180],
imagearray:[["http://i26.tinypic.com/11l7ls0.jpg","","","Texte 1"],
["http://i29.tinypic.com/xp3hns.jpg","http://en.wikipedia.org/wiki/Cave","_new","Texte 2"],
["http://i30.tinypic.com/531q3n.jpg","","","Texte 3"],["http://i31.tinypic.com/119w28m.jpg","","","Texte4"]],
displaymode:{type:"auto",
pause:2000,
cycles:0,
wraparound:!1},
persist:!1,
fadeduration:1000,
descreveal:"peekaboo",
togglerid:""});

Et ceci dans mon message d'accueil:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code*/
//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/</script>
<div id="fadeshow1"></div>

Vous me présentez un screen qui montre le code d'un menu accordéon, et je ne vois pas le rapport avec le message d'origine,donc soit j'ai dû louper un épisode soit je n'ai pas compris votre demande...

Cordialement.

[Lycaon.]

Oh veuillez m'excuser, j'suis con, je voulais parler de celui ci => http://nicolahibbert.com/demo/liteAccordion/

Vous pouvez essayer avec celui ci bien sûr => http://www.lafermeduweb.net/billet/barackslideshow-un-slideshow-mootools-leger-et-efficace-392.html

Je suis vraiment désolé de vous avoir fait perdre votre temps...><

Vous pensez pouvoir faire quelque chose? J'ai testé toutes les combinaisons possibles...Pourriez vous me faire un petit tuto pas à pas?

[Lycaon.]

Up !

[Invité]

Bonsoir,

Alors, c'est parti pour le menu accordéon.
Etape 1:
Le code Javascript, à placez dans panneau d'admin' > modules > gestion des codes javascript, cochez: sur l'index:

Code:

(function(f){f.fn.liteAccordion=function(e){var a=f.extend({},{containerWidth:960,containerHeight:320,headerWidth:48,firstSlide:1,onActivate:function(){},slideSpeed:800,slideCallback:function(){},autoPlay:!1,pauseOnHover:!1,cycleSpeed:6E3,theme:"basic",rounded:!1,enumerateSlides:!1},e),e=this.find("li"),k=e.length,i=a.containerWidth-k*a.headerWidth,b=e.children("h2"),c={getGroup:function(g,d){if(this.offsetLeft===g.left){return b.slice(d+1,k).filter(function(){return this.offsetLeft===b.index(this)*a.headerWidth})}else{if(this.offsetLeft===g.right){return b.slice(0,d+1).filter(function(){return this.offsetLeft===i+b.index(this)*a.headerWidth})}}},nextSlide:function(b){var d=b+1||a.firstSlide;return function(){return d++%k}},play:function(g){var d=c.nextSlide(g?g:"");c.playing=setInterval(function(){b.eq(d()).click()},a.cycleSpeed)},pause:function(){clearInterval(c.playing)},playing:0,sentinel:!1};this.height(a.containerHeight).width(a.containerWidth).addClass(a.theme).addClass(a.rounded&&"rounded");b.width(a.containerHeight).height(a.headerWidth).eq(a.firstSlide-1).addClass("selected");if(f.browser.msie){if(f.browser.version.substr(0,1)>8){b.css("filter","none")}else{if(f.browser.version.substr(0,1)<7){return!1}}}b.each(function(b){var d=f(this),c=b*a.headerWidth;b>=a.firstSlide&&(c+=i);d.css("left",c).next().width(i).css({left:c,paddingLeft:a.headerWidth});a.enumerateSlides&&d.append("<b>"+(b+1)+"</b>")});b.click(function(g){var d=f(this),j=b.index(d),e=d.next(),h={left:j*a.headerWidth,right:j*a.headerWidth+i,newPos:0},j=c.getGroup.call(this,h,j);if(this.offsetLeft===h.left){h.newPos=i}else{if(this.offsetLeft===h.right){h.newPos=-i}}if(!b.is(":animated")){if(g.originalEvent){if(c.sentinel===this){return!1}a.onActivate.call(e);c.sentinel=this}else{a.onActivate.call(e),c.sentinel=!1}b.removeClass("selected").filter(d).addClass("selected");j.animate({left:"+="+h.newPos},a.slideSpeed,function(){a.slideCallback.call(e)}).next().animate({left:"+="+h.newPos},a.slideSpeed)}});a.pauseOnHover&&this.hover(function(){c.pause()},function(){c.play(b.index(b.filter(".selected")))});a.autoPlay&&c.play();return this}})(jQuery);

La partie message d'accueil, à personnaliser, entre les balises span on met les titres entre les balises div on met le contenu:

Code:

<div class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>
<script>
    jQuery('.accordion').liteAccordion();
</script>

Enfin, la partie CSS à placer dans panneau d'admin' > affichage > couleurs > feuille de style CSS:

Code:

@charset 'utf-8';
/*************************************************
*
*   project:     liteAccordion - horizontal accordion plugin for jQuery
*   author:     Nicola Hibbert
*   url:        http://nicolahibbert.com/horizontal-accordion-jquery-plugin
*   demo:        http://www.nicolahibbert.com/demo/liteAccordion
*
/*************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; }
.accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
.accordion li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top;
   -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }

/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }

/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
   box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535\9; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #030303; margin-left: 5px; }

/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/***************************************** Light */
/**************************************** Stitch */

Une fois ces 3 codes installés où il faut, normalement ça devrait fonctionner.

Cordialement.

[Lycaon.]

Tout marche parfaitement ! Merci beaucoup !
Vous pouvez voir le résultat ici !
http://creepypasta.forumactif.com/

Merci encore !