Slideshow pour les news en page d'accueil.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Slideshow pour les news en page d'accueil.

Message par Lycaon. le Sam 6 Aoû 2011 - 22:07

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


Dernière édition par Lycaon. le Jeu 25 Aoû 2011 - 1:37, édité 1 fois

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Dim 7 Aoû 2011 - 15:50

Up ! ^^

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Lun 8 Aoû 2011 - 13:17

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mar 9 Aoû 2011 - 3:08

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mer 10 Aoû 2011 - 15:50

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Invité le Mer 10 Aoû 2011 - 17:10

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é Sad

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Jeu 11 Aoû 2011 - 4:31

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

Uo !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Ven 12 Aoû 2011 - 0:52

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Sam 13 Aoû 2011 - 1:02

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Dim 14 Aoû 2011 - 0:25

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Lun 15 Aoû 2011 - 2:50

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mar 16 Aoû 2011 - 0:09

Up...

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mer 17 Aoû 2011 - 0:00

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Ryan-G le Mer 17 Aoû 2011 - 0:25

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.

Ryan-G
**

Masculin
Messages : 83
Inscrit(e) le : 16/08/2006

http://www.cassie-ecole.com/
Ryan-G a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mer 17 Aoû 2011 - 11:42

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à => http://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.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Jeu 18 Aoû 2011 - 0:37

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Sam 20 Aoû 2011 - 3:32

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Dim 21 Aoû 2011 - 19:12

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

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Invité le Dim 21 Aoû 2011 - 21:22

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mar 23 Aoû 2011 - 17:02

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 !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Invité le Mar 23 Aoû 2011 - 17:31

Bonjour,

J'ai réaliser un test avec le code de démo sur mon forum test et cela fonctionne plutot bien scratch .
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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mar 23 Aoû 2011 - 17:53

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.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Mer 24 Aoû 2011 - 3:03

Up !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Invité le Mer 24 Aoû 2011 - 21:53

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow pour les news en page d'accueil.

Message par Lycaon. le Jeu 25 Aoû 2011 - 1:27

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

Merci encore !

Lycaon.
Nouveau membre

Messages : 20
Inscrit(e) le : 18/08/2010

http://crea-games.forumactif.com/index.htm
Lycaon. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum