banière aleatoire

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

Résolu banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 10:16

Bonjour j’ai suivi ce tuto 

http://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante#2064775

Qui marche très bien, mais j’aimerais l’améliorer en faisant un fondu entre chaque photo quelqu’un a t il une idée de comment faire ça ?

merci par avance


Dernière édition par NousDeux(Admin) le Mar 16 Déc 2014 - 16:00, édité 1 fois

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 14:12

Salut, 

Je te propose de supprimer le code que tu utilise actuellement, et de le remplacer par celui ci : 

Code:
$(document).ready(function(){
   $("#pun-logo img,#i_logo,#logo img").attr('class', 'banniere-aleatoire');
   var a = ["http://banniere_0", "http://banniere_1"];
   var classBan = "banniere-aleatoire";
   var classBan1 = "banniere-aleatoire-1";
   function b()
   {
      var classBanAcuel = $("#pun-logo img,#i_logo,#logo img").attr('class');
      if(classBanAcuel == classBan)
      {
         $('.banniere-aleatoire').fadeOut(2*1000, function (){
            $("#pun-logo img,#i_logo,#logo img").css('display', 'block');
            $("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)]);
         });
         $("#pun-logo img,#i_logo,#logo img").attr('class', 'banniere-aleatoire-1');
      }
      else if(classBanAcuel == classBan1)
      {
         $('.banniere-aleatoire-1').fadeOut(2*1000, function (){
            $("#pun-logo img,#i_logo,#logo img").css('display', 'block');
            $("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)]);
         });
         $("#pun-logo img,#i_logo,#logo img").attr('class', 'banniere-aleatoire');
      }
   };
   b();
   setInterval(b,7*1000);
});

Pour modifier les images, c'est ici que ça ce passe : 

Code:
var a = ["http://banniere_0", "http://banniere_1", "http://banniere_2", "http://banniere_3", "http://banniere_4"];

Il suffi de remplacer les lien http://banniere_0 http://banniere_1 ... par les liens de chacune de tes images Wink

Tu peux aussi changer le temps transition de chaque images en remplaçant les deux "2" du code, par le nombre de seconde de la transition.

Dis moi si ça te convient Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 14:56

merci pour ta reponse ton scipt marche bien par contre ma banniere n'est plus centré mais aligné à gauche.

une idée ?

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 14:57

avec ce script je n'avais pas de transition mais bien centré

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 15:13

Re,

En effet, pour résoudre le problème, il suffi de changer les deux lignes suivante :

Code:
$("#pun-logo img,#i_logo,#logo img").css('display', 'block');

Par celle ci :

Code:
$("#pun-logo img,#i_logo,#logo img").css('display', 'inline-block');

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 15:19

Merci pour ta réponse effectivement j'était en train de lire ça et ça marche nikel donc si je comprend bien 'inline-block' permet l'alignement s'il est proposé dans le css ou c'est le inline qui aligne directement ?

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 15:22

De rien Smile

Non, en fait, la propriété "inline-block" sert à forcer un bloc, dans notre cas l'image, à rester en ligne verticale Wink

Pense a mettre le sujet en résolu Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 15:24

j'ai parle trop vite ça marche bien mais la bascule entre les deux bannière n'est pas systématique le script recherge al meme image une fois sur deux jete un oeuil sur mon forum pour voir le resultat

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 15:25

Oui c'est normal, c'est un script aléatoire ^^

Comme il est dis sur ce sujet : http://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante#2064775

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 15:28

ok merci de ta réponse et dont efficacité est il possible de le rendre systématique 1 suivie de 2 suivie de 3 etc

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 15:38

Yep,

C'est possible, remplace le code précédent par celui ci Wink

Code:
$(document).ready(function(){
   $("#pun-logo img,#i_logo,#logo img").attr('class', 'banniere-aleatoire');
   var a = ["http://banniere_0", "http://banniere_1", "http://banniere_2", "http://banniere_3", "http://banniere_4"];
   var classBan = "banniere-aleatoire";
   var classBan1 = "banniere-aleatoire-1";
   var numBan = 0;
   function b()
   {
      if(numBan > a.length || numBan == a.length)
      {
         numBan = 0;
      }
      var classBanAcuel = $("#pun-logo img,#i_logo,#logo img").attr('class');
      if(classBanAcuel == classBan)
      {
         $('.banniere-aleatoire').fadeOut(2*1000, function (){
            $("#pun-logo img,#i_logo,#logo img").css('display', 'inline-block');
            $("#pun-logo img,#i_logo,#logo img").attr("src",a[numBan]);
            numBan = numBan + 1;
         });
         $("#pun-logo img,#i_logo,#logo img").attr('class', 'banniere-aleatoire-1');
      }
      else if(classBanAcuel == classBan1)
      {
         $('.banniere-aleatoire-1').fadeOut(2*1000, function (){
            $("#pun-logo img,#i_logo,#logo img").css('display', 'inline-block');
            $("#pun-logo img,#i_logo,#logo img").attr("src",a[numBan]);
            numBan = numBan + 1;
         });
         $("#pun-logo img,#i_logo,#logo img").attr('class', 'banniere-aleatoire');
      }
   };
   b();
   setInterval(b,7*1000);
});

Ne pas oublier de faire les modifs dont j'ai parlé plus haut Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 15:43

c'est parfait est lors de al transition un fadein est il possible

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 15:46

Il y en a déjà un :p

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 15:48

ok tu es sure je ne le vois pas est il reglable

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 15:50

Ouaip, moi perso je le vois sur ton forum Wink

C'est le "2" qu'il faut modifier Wink

2 = 2 Secondes

2 = 2000 MS

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 15:51

ok mais ça c'est le fadeout sur l'image en cours mais pour un fadein sur l'image qui arrive

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 15:57

Ha pardon, j'avais pas compris ^^

Nop, ce n'est pas possible avec ce script Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par NousDeux(Admin) le Mar 16 Déc 2014 - 15:58

ok c'est pas grave c'est deja tres bien merci pour tout et si tu es interressé par nom sujet tu es le bienvenu sur mon forum

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: banière aleatoire

Message par Luluwebmaster le Mar 16 Déc 2014 - 16:00

De rien Smile

Par contre, évite de faire de la pub sur ce forum Wink

Pense à mettre le sujet en "résolut" Wink

Luluwebmaster
*****

Masculin
Messages : 720
Inscrit(e) le : 10/10/2012

http://test-luluwebmaster.lebonforum.com/
Luluwebmaster 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