banière aleatoire

[NousDeux(Admin)]

Bonjour j’ai suivi ce tuto 

https://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

[Luluwebmaster]

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

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

[NousDeux(Admin)]

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

une idée ?

[NousDeux(Admin)]

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

[Luluwebmaster]

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');

[NousDeux(Admin)]

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 ?

[Luluwebmaster]

De rien

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

Pense a mettre le sujet en résolu

[NousDeux(Admin)]

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

[Luluwebmaster]

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

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

[NousDeux(Admin)]

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

[Luluwebmaster]

Yep,

C'est possible, remplace le code précédent 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", "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

[NousDeux(Admin)]

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

[Luluwebmaster]

Il y en a déjà un :p

[NousDeux(Admin)]

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

[Luluwebmaster]

Ouaip, moi perso je le vois sur ton forum

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

2 = 2 Secondes

2 = 2000 MS

[NousDeux(Admin)]

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

[Luluwebmaster]

Ha pardon, j'avais pas compris ^^

Nop, ce n'est pas possible avec ce script

[NousDeux(Admin)]

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

[Luluwebmaster]

De rien

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

Pense à mettre le sujet en "résolut"