DIAPORAMA (EFFET RETOURNEMENT DE L'IMAGE)

Commentaire de jerms le 20/06/2003 11:32:47

je vais essayer ca merci.

Commentaire de jerms le 04/07/2003 23:20:33

Le code est a jour, en fait je demandais comment accelerer la vistesse de retournement de l'image.

Et donc Jeromax m'a donc justement conseillé de changer la taille des image non pas d'un pixel a chque fois, mais de plusieurs (en passant par une variable).

c'est pour cela que tu trouves 'obj.width -= vitesse' dans le code, tu modifie la valeur de vitesse et les images tournent plus ou moins vite.

Commentaire de remington le 25/01/2004 20:28:04

au fait sinon merci ca fé tro bien sur mon site  =)

Commentaire de remington le 25/01/2004 22:34:02

no problemo ca fé plaisir de servir a kelk choz ;)

Commentaire de chimelpremier le 03/02/2004 00:07:21

Au fait, pas d'image dans Netscape 7. Je n'ai pâs trouvé pouquoi ?
qqun sait ?
Salut
Michel

Commentaire de chimelpremier le 05/02/2004 13:59:14

Cela fonctionne maintenant sur tout les navigateurs acceptant la syntaxe DOM 1.
Ci-dessous le script modifié :

<script language="javascript">
var largDepart = 0
var hautDepart = 0
var numImg = 0
var timerRe = 0
var timerAg = 0
var tabImage = new Array()
tabImage[0] = "Cathedrale.gif"
tabImage[1] = "Palais - 3 D en Plaine.gif"
tabImage[2] = "zetaJones1.jpg"
tabImage[3] = "EAU.gif"
var tabDesc = new Array()
tabDesc[0] = " Cathedrale"
tabDesc[1] = " Palais - 3 D en Plaine"
tabDesc[2] = " zetaJones"
tabDesc[3] = " EAU"

function init() {
    obj=document.getElementById("image")
    obj.src = tabImage[numImg]
    largDepart = obj.width
    hautDepart = obj.height
    desc=document.getElementById("description").firstChild
    desc.nodeValue = tabDesc[numImg]
}

function changeImage() {
  if (timerAg != 0) {
    clearTimeout(timerAg)
    timerAg = 0
  }
  if (timerRe == 0) { timerRe = setTimeout("retrecirImage("+obj.name+")",0) }
}

function agrandirImage() {
  if (obj.width < largDepart) {
    obj.width++
    obj.height = hautDepart
    timerAg = setTimeout("agrandirImage("+obj.name+")",0)
  }
  else {
    clearTimeout(timerAg)
    timerAg = 0
  }
}

function retrecirImage() {
  if (obj.width > 0) {
    obj.width--
    obj.height = hautDepart
    timerRe = setTimeout("retrecirImage("+obj.name+")",0)
  }
  else {
    clearTimeout(timerRe)
    timerRe = 0
    obj.src = tabImage[(numImg+1)%tabImage.length]
    desc.nodeValue = tabDesc[(numImg+1)%tabImage.length]
    numImg++
    timerAg = setTimeout("agrandirImage("+obj.name+")",0)
  }
}
</script>
<BR>
<DIV align="center"><img id="image" onclick="changeImage()"  >
<p id="description" > Description</p>
Cliquez sur l'image pour voir la suivante</DIV>
<script language="javascript">
  init()
</script>

Commentaire de soffy le 17/03/2004 12:37:51

Bonjour à tous, ce script es super Jeromax mais j'ai un petit soucis !
Tout d'abord, je débute dans le javascript !!! Voilà, pour agrandir mon cadre, j'ai simplement tiré sur la fenêtre où doivent apparaître les images ! elle affiche (310x300)
J'ai redimmensionné mes photos d'origine et dans (var largDepart = 240) et (var hautDepart = 244) j'ai mis ça comme valeur !
Et dans (timerAg = setTimeout("agrandirImage("+obj.name+")",100)
Mes photos sont légèrement déformées et quand elles sont trop grandes, au moment ou elles se retournent, j'ai des traits gris sur la photos et certaine ne s'affiche pas !
Est-ce que mes valeurs sont bonnes ?
Lorsque je lance l'apperçu, j'ai une croix rouge avant le premier clic !
Est-ce normal ? j'utilise Dreamwever Mx 2004
Merci pour votre aide !

Commentaire de dume29 le 09/09/2004 14:41:29

Un gran bravo à Jeromax et un grand merci de mettre ce script à disposition de tous. Et une superbe complémentarité avec les ajouts Oh combien judicieux de Chimelpremier.

Un succès

El Dume qui se sent tout petit

Commentaire de ifebo le 11/05/2005 04:32:24

Bon, j'ai finalement réussi à le faire fonctionner ce script.
Mais pour éviter les tressaillements de l'image au moment de la transition, j'ai ajouté dans les metatag :

<meta http-equiv="imagetoolbar" content="no">

Après ça à bien fonctionné.
La barre image de microsoft dérangeait ce script.
d'ailleurs je ne comprends pas Microsoft qui à alourdi ie avec cette barre on a la même chose par le clic droit.
et pour qui connaît, il n'y a pas d'anti clic droit qui empêchent d'enregistrer une image.

Commentaire de xlee le 03/09/2005 10:58:33

J'aime vraiment bien! Good job ;)

Pour répondre à ERW1G, moi je les recrifierais avec Paint ou autre ...

Commentaire de tomlagalette le 10/07/2006 10:40:07

est-il possible d'enlever le clic et que le passage d'une image à l'autre soit juste en fonction d'un temps déterminé?

Merci d'avance

Commentaire de anto_blaupunk le 19/11/2006 21:25:13

J'ai mis 20 images dans ce script et quand je change de photos je peu en voir seulement 5! Quel est le problème?

Commentaire de Cooper95 le 08/05/2007 18:29:34

Bonjour,
Je suis hyper débutant dans ce domaine alors désolé si ma question est un peu bête mais dans cette ligne :

<DIV align="center"><img name="image" onclick="changeImage(image)">

comment doit on éfinir l'image ?
Quand je lance le script je n'ai rien qui s'affiche hormis le petit commentaire qui me dit de cliquer pour voir la suivante sous une image manquante.
Merci à vous

Cooper95

Commentaire de Cooper95 le 09/05/2007 06:42:24

Je fais un essai ce soir JERMS.
En tout cas merci pour la rapidité de ta réponse.

Commentaire de lordkriss le 07/08/2007 17:57:43

Re-mes-homages...

J'ai deux petits problèmes avec le script :
1/ avec firefox, il faut rafraichir la page pour éviter que les images s'affichent en 1cm*1cm...

2/ En dehors de ça, le script fonctionne trés bien sous firefox et IE sur une page ne contenant que ça. Cependant, dés que je l'insère dans une page "habillée" il ne fonctionne plus sous IE (la première image apparait et tout disparait lorsque l'on clique dessus. Je vous poste le code la page en question dans l'espoir qu'oeil avisé trouvera le hic. (merci d'avance) :

[code]

<table width="100%" height="100%" border="0">
  <tr>
    <td align="center" valign="top"><table width="742" height="532" border="0">
      <tr>
        <td align="center" valign="top" background="../pics/fond.jpg"><table width="100%" border="0">
          <tr>
            <td><div align="center"><a href="../index.htm"><img src="../pics/bouton.gif" alt="Retour à l'accueil" width="700" height="80" border="0" /></a></div></td>
          </tr>
          <tr>
            <td>
            <script language="javascript">
var largDepart = 0
var hautDepart = 401
var numImg = 0
var timerRe = 0
var timerAg = 0
var vitesse = 15
var tabImage = new Array()
tabImage[0] = "plage.jpg"
tabImage[1] = "chateau.jpg"
tabImage[2] = "concert.jpg"
tabImage[3] = "parade.jpg"
var tabDesc = new Array()
tabDesc[0] = "Restrospective photographique de la Plage, édition 2007"
tabDesc[1] = "Activité incontournable de la plage : le chateau de sable"
tabDesc[2] = "Le week-end à la Plage, c'est concert !"
tabDesc[3] = "parade d'ouverture"

function init(obj) {
obj.src = tabImage[numImg]
obj.title = tabDesc[numImg]
largDepart = obj.width
hautDepart = obj.height
if (vitesse > largDepart) { vitesse = largDepart }
}

function changeImage(obj) {
if (timerAg != 0) {
clearTimeout(timerAg)
timerAg = 0
}
if (timerRe == 0) { timerRe = setTimeout("retrecirImage("+obj.name+")",0) }
}

function agrandirImage(obj) {
if (obj.width < largDepart) {
if (obj.width+vitesse > largDepart) { obj.width = largDepart }
else { obj.width += vitesse }

obj.height = hautDepart
timerAg = setTimeout("agrandirImage("+obj.name+")",0)
}
else {
clearTimeout(timerAg)
timerAg = 0
}
}

function retrecirImage(obj) {
if (obj.width > 0) {
obj.width -= vitesse
obj.height = hautDepart
timerRe = setTimeout("retrecirImage("+obj.name+")",0)
}
else {
clearTimeout(timerRe)
timerRe = 0
obj.src = tabImage[(numImg+1)%tabImage.length]
obj.title = tabDesc[(numImg+1)%tabImage.length]
numImg++
timerAg = setTimeout("agrandirImage("+obj.name+")",0)
}
}
            </script>
            </p>
          <DIV align="center"><img name="image" onclick="changeImage(image)">
<BR>
Survolez l'image pour lire la légende, cliquez pour la suite...</DIV>
<script language="javascript">
init(image)
</script>
</td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

[/code]

Commentaire de jerms le 09/08/2007 17:49:46

salut lordkriss, juste une question pourquoi mets tu le code javascript dans la <TABLE>, vaudrait-il pas mieux mettre toutes les fontcions dans <HEAD> ?

c'est le première chose qui me vient à l'esprit ca ne change peut être rien du tout.