comment je peut faire un slide sur mon forum

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

Résolu comment je peut faire un slide sur mon forum

Message par devil92140 le Sam 23 Avr 2011 - 20:59

tout est dans le titre je fournie le lien du forum qui ma plue ^^ et mon forum ainsi qu'une photo

le forum en question

mon forum




devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par SoraNoHime le Sam 23 Avr 2011 - 21:04

Bonsoir,

il vous faudra du courage, une bonne dose de patience...

Le tuto est ici

vous aurez a remplacé onmouseover par onclick et faire les modifications dont vous aurez besoin.

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Sam 23 Avr 2011 - 21:13

question: ^^

je le mets ou est mercie pour le tuto mais en as-tu un en français ce qui vas beaucoup m'aider ^^

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Sam 23 Avr 2011 - 21:50

svp quelque aurai le script pour un forum de forumactif

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par tupac le Dim 24 Avr 2011 - 14:25

Bonjour Devil

Je vous fourni les codes et la démarche a suivre pour installer cet accordéon.

Donc dans un premier temps il vous faut placer les deux codes suivant sur votre bloc-note ou Wordpad puis les enregistrer au format .js c'est a dire donner un nom a votre fichier sans oublier d'y inscrire a la fin .js puis enregistrer,n'oubliez pas le point avant .js très important.

Premier fichier a placer dans votre bloc-note
Spoiler:
Code:
/*
   Kwicks for jQuery (version 1.5.1)
   Copyright (c) 2008 Jeremy Martin
   http://www.jeremymartin.name/projects.php?project=kwicks
   
   Licensed under the MIT license:
      http://www.opensource.org/licenses/mit-license.php

   Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);

Deuxième fichier toujours a placer dans votre bloc-note.
Spoiler:
Code:
jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},easeInBounce:function(x,t,b,c,d){return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b;}});

Une fois cela fait,héberger vos fichiers par exemple sur Harchive-Host (inscription gratuite) ou le votre si vous en avez un,ensuite récupérer les deux liens principal de vos fichiers et incorporez-les dans ce script.

Ici le premier script et placez y le premier lien principal.
Code:
<script type="text/javascript" src=" lien principal ici "></script>
Ici votre deuxième script et placez y le deuxième lien principal.
Code:
<script type="text/javascript" src=" lien principal ici "></script>
Une fois cela fait placer vos deux scripts avec les liens a l'intérieur dans le template Overall_header juste avant la balise </head> puis valider le template.

EDIT:il y a aussi ce code a placer aussi dans le template ovrall_header toujours avant la balise </head>
Code:
<script type="text/javascript">
$().ready(function() {
   $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
   });
</script>

Passons aux codes CSS et html.

Placer ce code dans votre page d'accueil.
Spoiler:
Code:
<div class="jimgMenu">
  <ul>
    <li id="landscapes"><a href="#">Première page</a></li>
    <li id="people"><a href="#">Deuxième page</a></li>
    <li id="nature"><a href="#">Troisième page</a></li>
    <li id="abstract"><a href="#">Quatrième page</a></li>
    <li id="urban"><a href="#">Cinquième page</a></li>
  </ul>
</div>

et celui-la dans votre feuille de style css
A vous d'y placer vos images a l'endroit indiqué.
Spoiler:
Code:
.jimgMenu {
    position:relative;
    margin: 0px 0px 0px 50px;
    padding: 0px;
    width:475px;
    height:200px;
    overflow: hidden;
}
.jimgMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 200px;
    position: relative;
}
.jimgMenu ul li {
    width: 95px;
    float: left;
    display: block;
    overflow: hidden;
}
.jimgMenu ul li a {
    text-indent: -1000px;
    background:#fff repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow: hidden;
    height: 200px;
}
.jimgMenu ul li#landscapes a {
    background: url(images/landscapes.jpg) repeat scroll 0%;
  }
.jimgMenu ul li#people a {
    background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li#nature a {
    background: url(images/nature.jpg) repeat scroll 0%;
  }
.jimgMenu ul li#abstract a {
    background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
    background: url(images/urban.jpg) repeat scroll 0%;
  border-right-style: none;
}
.clear {
    clear: both;
}

N'hésitez pas si vous avez des questions.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Lun 25 Avr 2011 - 23:26

j'ai passer 2 heurs mais je n'est pas compris comment j'allais mis prendre aie aie aie

les code que tu ma donne sont à modifier ? ou faut les mettre tel que tu me les a donner

comme celui si?

Code:
/*
  Kwicks for jQuery (version 1.5.1)
  Copyright (c) 2008 Jeremy Martin
  http://www.jeremymartin.name/projects.php?project=kwicks
 
  Licensed under the MIT license:
      http://www.opensource.org/licenses/mit-license.php

  Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par tupac le Lun 25 Avr 2011 - 23:35

Les deux premiers codes sont a placer tel quel dans le bloc-note puis tu leurs donne un nom avec .js a la fin EXEMPLE: ( monslide.js ) puis pour le deuxième ( monslide 2.js ) ensuite tu les héberge comme je te l'ai expliqué dans mon précédent post.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Lun 25 Avr 2011 - 23:45

d'accord merci

et les autre le les modifie?

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par tupac le Mar 26 Avr 2011 - 0:24

Une fois les deux fichiers hébergé tu prends les deux liens principal puis tu l'ai place dans ce script.
Code:
<script type="text/javascript" src=" lien principal ici "></script>
Donc a l'arrivée tu auras deux script comme celui du dessus avec les liens principal a l'intérieur puis tu places les deux scripts dans ton template overall_header avant la balise </head>

Toujours dans le template overall_header avant la balise </head> il y a aussi ce code a placer.
Code:
<script type="text/javascript">
$().ready(function() {
  $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
  });
</script>

En ce qui concerne le code a placer dans la page d'accueil et celui de la feuille de style je te l'ai est donné plus haut dans mon premier post.




tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Mar 26 Avr 2011 - 0:53

regarde ce que ça donne je trouve le slide tout petit et comment metre du texte?

http://apple-france.discutforum.com/forum#

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par tupac le Mar 26 Avr 2011 - 1:11

Écoute si celui-là ne te convient pas j'en ai un avec un seul code a héberger et plus facile a configurer sur mon forum je te propose d'aller y jeter un œil,je t'envoie le lien par MP.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Mar 26 Avr 2011 - 1:20

c'est le quel avec un seul code ^^ chui plus naz que je pensais ^^

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par Darky-Nail le Mar 26 Avr 2011 - 3:03

Édit: Supprimer

Darky-Nail
**

Messages : 95
Inscrit(e) le : 17/02/2011

http://poke-source.frbb.net/
Darky-Nail a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Mar 26 Avr 2011 - 5:11

ok j'ai reçu ton message

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par devil92140 le Mer 27 Avr 2011 - 11:41

j'ai reçu ton message

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment je peut faire un slide sur mon forum

Message par Anzu le Sam 30 Avr 2011 - 23:24

Bonjour,

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné.

Je vous invite à lire :

A bientôt sur ForumActif Smile

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu 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