11548 sujets

JavaScript, DOM et API Web HTML5

Image aléatoire

Bonjour à tous,

J'aurais besoin de votre aide car, en dépit de mes recherches, je n'arrive pas à trouver comment faire défiler une image qui va changer toutes les X secondes/minutes/etc et ce, de façon aléatoire (si possible dans une base de donnée définie)

Tous les exemples que j'ai trouvé jusqu'à présent sont uniquement du code (en php) pour afficher une image aléatoirement mais au chargement de la page.

J'ai réussi avec dreamweaver cs3 à faire quelque chose de correct (voir l'image principale qui défile dans ma home page : http://takeaphoto.eu/ ) mais ce n'est pas aléatoirement et le code (cf ci dessous) n'est pas très "souple" d'utilisation ...

Voila, je recherche une solution quelle qu'elle soit (java, PHP, html, etc ...) mais pour le moment je poste ce sujet ici car je ne sais pas où le mettre Smiley cligne

Merci d'avance pour votre aide

Antonin


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
  //Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (numGotos != null)
    if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
    else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
  jmpFwd = (fNew > tmLn.curFrame);
  for (i = 0; i < tmLn.length; i++) {
    sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
    if (sprite.charAt(0) == "s") {
      numKeyFr = sprite.keyFrames.length;
      firstKeyFr = sprite.keyFrames[0];
      lastKeyFr = sprite.keyFrames[numKeyFr - 1];
      if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
      for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
      for (j=0; j<sprite.values.length; j++) {
        props = sprite.values[j];
        if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
        else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
        if (sprite.obj != null) {
          if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
          else        sprite.obj[props.prop2][props.prop] = props[propNum];
      } }
    } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
  }
  tmLn.curFrame = fNew;
  if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}
function MM_timelinePlay(tmLnName, myID) { //v1.2
  //Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
  if (myID == tmLn.ID) { //if Im newest
    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
    fNew = ++tmLn.curFrame;
    for (i=0; i<tmLn.length; i++) {
      sprite = tmLn[i];
      if (sprite.charAt(0) == 's') {
        if (sprite.obj) {
          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
            keyFrm=1;
            for (j=0; j<sprite.values.length; j++) {
              props = sprite.values[j]; 
              if (numKeyFr != props.length) {
                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
              } else {
                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
        } } } } }
      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      if (fNew > tmLn.lastFrame) tmLn.ID = 0;
  } }
}

function MM_initTimelines() { //v4.0
    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
    var ns = navigator.appName == "Netscape";
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    var macIE5 = (navigator.platform ? (navigator.platform == "MacPPC") : false) && (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4);
    document.MM_Time = new Array(1);
    document.MM_Time[0] = new Array(10);
    document.MM_Time["slideshow_accueil"] = document.MM_Time[0];
    document.MM_Time[0].MM_Name = "slideshow_accueil";
    document.MM_Time[0].fps = 15;
    document.MM_Time[0][0] = new String("behavior");
    document.MM_Time[0][0].frame = 100;
    document.MM_Time[0][0].value = "MM_swapImage('diapo','','images/slideshow2.jpg',1)";
    document.MM_Time[0][1] = new String("behavior");
    document.MM_Time[0][1].frame = 200;
    document.MM_Time[0][1].value = "MM_swapImage('diapo','','images/slideshow3.jpg',1)";
    document.MM_Time[0][2] = new String("behavior");
    document.MM_Time[0][2].frame = 300;
    document.MM_Time[0][2].value = "MM_swapImage('diapo','','images/slideshow4.jpg',1)";
    document.MM_Time[0][3] = new String("behavior");
    document.MM_Time[0][3].frame = 400;
    document.MM_Time[0][3].value = "MM_swapImage('diapo','','images/slideshow5.jpg',1)";
    document.MM_Time[0][4] = new String("behavior");
    document.MM_Time[0][4].frame = 500;
    document.MM_Time[0][4].value = "MM_swapImage('diapo','','images/slideshow6.jpg',1)";
    document.MM_Time[0][5] = new String("behavior");
    document.MM_Time[0][5].frame = 600;
    document.MM_Time[0][5].value = "MM_swapImage('diapo','','images/slideshow7.jpg',1)";
    document.MM_Time[0][6] = new String("behavior");
    document.MM_Time[0][6].frame = 700;
    document.MM_Time[0][6].value = "MM_swapImage('diapo','','images/slideshow8.jpg',1)";
    document.MM_Time[0][7] = new String("behavior");
    document.MM_Time[0][7].frame = 800;
    document.MM_Time[0][7].value = "MM_swapImage('diapo','','images/slideshow9.jpg',1)";
    document.MM_Time[0][8] = new String("behavior");
    document.MM_Time[0][8].frame = 900;
    document.MM_Time[0][8].value = "MM_swapImage('diapo','','images/slideshow1.jpg',1)";
    document.MM_Time[0][9] = new String("behavior");
    document.MM_Time[0][9].frame = 901;
    document.MM_Time[0][9].value = "MM_timelineGoto('slideshow_accueil','1')";
    document.MM_Time[0].lastFrame = 901;
    for (i=0; i<document.MM_Time.length; i++) {
        document.MM_Time[i].ID = null;
        document.MM_Time[i].curFrame = 0;
        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
    }
}
//-->
</script>
</head>

<body class="espace" onload="MM_preloadImages('images/icone_sitewebbis.png','images/slideshow2.jpg','images/slideshow3.jpg','images/slideshow4.jpg','images/slideshow5.jpg','images/slideshow6.jpg','images/slideshow7.jpg','images/slideshow8.jpg','images/slideshow9.jpg','images/slideshow1.jpg');MM_timelinePlay('slideshow_accueil')">
      <div id="slideshow"><img src="images/slideshow1.jpg" alt="slideshow" width="725" height="477" id="diapo" /></div>
</body>
</html>
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par dark.tonin (29 Jan 2011 - 19:08)
Bonjour,

Il y a un petit plugin en jquery qui est très facile à mettre en place : innerFade
http://medienfreunde.com/lab/innerfade/

Tu verras notamment sur ce lien un exemple avec des images.
Tu peux régler la vitesse, le temps entre chaque images, le type de défilement (aléatoire ou séquence) etc...

Je l'ai déjà mis en place sur un site et il fonctionne très bien. Smiley cligne
Bonjour,

Finalement j'ai opté pour un code un peu différent (car je ne comprenais pas vraiment celui donné plus haut Smiley decu ) et il marche pas trop mal.

Si quelqu'un pourrait me dire quel morceau de code ajouter pour rendre ce slideshow aléatoire, ca serait génial Smiley lol .

Et, cerise sur le gâteau, s'il est possible de sélectionner l'ensemble d'un dossier pour que le script sélection lui-même aléatoirement les images dedans (et donc virer les var image1=new Image()
image1.src="images/slideshow14.jpg" et avoir plus qu'une seule ligne de code pour le chemin d'accès), ca serait vraiment excellent Smiley biggol

Voici le code utilisé :



<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/slideshow14.jpg"
var image2=new Image()
image2.src="images/slideshow2.jpg"
var image3=new Image()
image3.src="images/slideshow10.jpg"
var image4=new Image()
image4.src="images/slideshow3.jpg"
var image5=new Image()
image5.src="images/slideshow11.jpg"
var image6=new Image()
image6.src="images/slideshow7.jpg"
var image7=new Image()
image7.src="images/slideshow12.jpg"
var image8=new Image()
image8.src="images/slideshow5.jpg"
var image9=new Image()
image9.src="images/slideshow13.jpg"
var image10=new Image()
image10.src="images/slideshow3.jpg"
var image11=new Image()
image11.src="images/slideshow8.jpg"
var image12=new Image()
image12.src="images/slideshow15.jpg"
var image13=new Image()
image13.src="images/slideshow1.jpg"
var image14=new Image()
image14.src="images/slideshow9.jpg"
var image15=new Image()
image15.src="images/slideshow16.jpg"
var image16=new Image()
image16.src="images/slideshow6.jpg"
//-->
</script>
</head>

<body>
<img src="images/slideshow1.jpg" name="slide" width=725 height=477>
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<16)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",4500)
}
slideit()
//-->
</script>
</body>

Modifié par dark.tonin (02 Feb 2011 - 18:59)
Bonjour,

Des nombres entiers aléatoires, équiprobables, tirés parmi les nbr premiers entiers (de 0 à nbr-1) peuvent être obtenus en multipliant le nombre pseudo-aléatoire Math.random(), compris entre 0 et 1, par le nombre d'images disponibles, nbr, puis en prenant la partie entière du résultat (encore convient-il, en toute rigueur, d'exclure la borne supérieure nbr pour respecter l'équiprobabilité).

Autrement dit, la ligne de code suivante permet d'obtenir à chaque étape le «numéro» de l'image à afficher parmi nbr.
do {nos=Math.floor(nbr*Math.random())} while (nos==nbr);
La boucle do ... while impose un retirage lorsque la borne supérieure est atteinte.

Avec nbr=16 et autant d'images indexées de 1 à 16 sans aucune lacune de slideshow1.jpg à slideshow16.jpg (l'image slideshow4.jpg semble avoir été omise pour faire figurer deux fois slideshow3.jpg ?), l'utilisation d'une boucle et d'un tableau devrait alléger le script.
// Remplacer le premier script par
tabImg=new Array();
for (j=0;j<<nbr;j++) {
tabImg[j]=new Image();tabImg[j].src="images/slideshow"+(parseInt(j)+1)+".jpg";}

//Puis continuer dans le même et unique script
var nbr=16,nos;
function slideit(){
   if (!document.images) return;
   do {nos=Math.floor(nbr*Math.random())} while (nos==nbr);
   document.images.slide.src=tabImg[ nos].src;
   setTimeout("slideit()",4500);
}
slideit();

Si les images avaient des noms différents et ne répondaient pas à cette logique d'indexation, une simple chaîne rassemblant leurs noms serait suffisante avec, à titre d'exemple, le code suivant :

lesImg="unChat.jpg|unChien.jpg|unLoup.jpg|unRenard.jpg".split(/\|/)g);
var nbr=lesImg.length;
tabImg=new Array();
for (j=0;j<<nbr;j++) {tabImg[j]=new Image();tabImg[j].src="images/"+lesImg[j];}

Modifié par Julien de Prabere (02 Feb 2011 - 23:30)
Je tiens à signaler des fautes dans le code proposé (alors non testé) : la variable nbr doit être définie avant utilisation dans la première boucle et l'indice j doit rester inférieur à nbr (j<nbr au lieu de j<<nbr dans les deux boucles).

Ceci dit, la méthode exposée présente plusieurs inconvénients : elle est aléatoire et n'exclut pas l'affichage consécutif de la même image ou des reprises rapprochées, elle pré-charge l'ensemble de celles-ci en alourdissant inutilement la page d'ouverture et affiche leurs noms en livrant pratiquement toutes les images.

La sélection d'une dizaine d'images parmi celles disponibles et leur présentation cyclique dans un ordre aléatoire semble alors préférable. Elle peut être obtenue avec le code suivant (seuls les rangs de la sélection opérée sont affichés). Elle pourrait, en outre, être transposée en PHP. 

<body>
<div id="rsl"></div>
<script type="text/javascript">
var nbrImg=50,nbrSlc=10,imgTir={},nbr,rng,nos,chn='',cmp=0;
for (nbr=nbrImg;nbrImg-nbrSlc<nbr;nbr--) {
   do {rng=1+Math.floor(nbr*Math.random())} while (rng==nbr+1);
   nos=0;do {if (typeof(imgTir[nos])!='number') rng--;nos++} while (0<rng);
   imgTir[--nos]=1;
   cmp++;
   chn+='n°'+cmp+' valeur '+nos+'<br>';
}
document.getElementById('rsl').innerHTML=chn;
</script>
</body>
}
La liste des images est obtenue par tirages successifs des rangs des images à retenir parmi les images non encore tirées.
Sujet clos
Aller à