1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Divers
  5. Diaporama (effet retournement de l'image)

Diaporama (effet retournement de l'image)

Soyez le premier à donner votre avis sur cette source.

Vue 48 834 fois - Téléchargée 4 494 fois

Télécharger le projet
Commenter

Description

Un petit diaporama, on passe à l'image suivante en cliquant dessus. l'image se retourne pour faire apparaitre la suivante.

Dans "tabImage" on met les noms des images dans l'ordre où elles doivent apparaîtres
Dans "tabDesc" on met la description des images, le texte apparait dans l'infobulle.
Dans "vitesse" on met la vitesse à laquelle on veut que l'image tourne (merci JEROMAX pour le conseil ;))

Source / Exemple : 


<script language="javascript">
var largDepart = 0
var hautDepart = 0
var numImg = 0
var timerRe = 0
var timerAg = 0
var vitesse = 15
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] = "Description Cathedrale"
tabDesc[1] = "Description Palais - 3 D en Plaine"
tabDesc[2] = "Description zetaJones"
tabDesc[3] = "Description EAU"

function init(obj) {
  obj.src = tabImage[numImg]
  obj.alt = 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.alt = tabDesc[(numImg+1)%tabImage.length]
    numImg++
    timerAg = setTimeout("agrandirImage("+obj.name+")",0)
  }
}
</script>
<BR>
<DIV align="center"><img name="image" onclick="changeImage(image)">
<BR>Cliquez sur l'image pour voir la suivante</DIV>
<script language="javascript">
  init(image)
</script>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
cs_Muzz
Messages postés
3
Date d'inscription
jeudi 11 novembre 2004
Statut
Membre
Dernière intervention
2 avril 2009
2 avril 2009 à 09:41
Bonjour bonjour! Je trouve ce script assez sympatique mais y'a quelques modifications que j'aurais voulu lui apporter, sans y parvenir. Donc si quelqu'un pouvait m'aider, ce serait vraiment très gentil! :D

J'aurais aimé créer un bouton pour qu'on puisse également revenir en arrière sur les images du diaporama, comme par exemple dans ce code-là :

<script type="text/javascript">
ejs_photo = new Array;
<?
$a = 0;
$handle = opendir("18ansfanny");
while (($file = readdir())!=false) {
clearstatcache();
if($file!=".." && $file!=".")
{
echo "ejs_photo[$a] = '18ansfanny/$file';
";
$a++;
}
}
closedir($handle);
?>
function ejs_aff_18ansfanny(num)
{
if(document.getElementById)
{
ejs_fin = "";
if(num!=0)
ejs_fin += "< Précédent ";
if(num!=(ejs_photo.length-1))
ejs_fin += "Suivant >";
document.getElementById("ejs_photo_box").innerHTML = "<CENTER>
"+ejs_fin+"</CENTER>";
}
}
window.onload = new Function("ejs_aff_18ansfanny(0)")

</script>
(code d'un script pour un autre diaporama, mais sans effet de retournement)
Je n'ai pas réussi à l'intégrer dans le code...

Merci de votre aide!
:D
Jeannotc
Messages postés
22
Date d'inscription
jeudi 1 avril 2004
Statut
Membre
Dernière intervention
29 septembre 2013
15 oct. 2007 à 12:11
Bonjour,

Super ce script, mais comment résoudre le problème de l'affichage normal des photos suivantes à leur taille normale.
La première c bon, les autres sont toutes petites, comme toutes les images ne sont pas de la même taille, je ne peux pas renseigner les dimenssions dans la ligne <img name etc..)
Suis sur IE7 !
Après actualisation de la page c bon ! mais je peux pas demander aux internautes de le faire, ça fait désordre !
merci
cs_jerms
Messages postés
115
Date d'inscription
jeudi 8 mai 2003
Statut
Membre
Dernière intervention
3 janvier 2016
9 août 2007 à 17:49
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.
lordkriss
Messages postés
6
Date d'inscription
mardi 21 septembre 2004
Statut
Membre
Dernière intervention
6 juin 2006
9 août 2007 à 11:50
Je continue mon solliloque...

Pour le problème de taille d'image avec firefox, c'est résolu en remplaçant la ligne

par

(ou xxx est la largeur de vos images et yyy leur hauteur...)

En revanche, pour fonctionner sous IE, le script ne supporte pas d'être placé dans un tableau et je ne trouve pas de solution....
lordkriss
Messages postés
6
Date d'inscription
mardi 21 septembre 2004
Statut
Membre
Dernière intervention
6 juin 2006
7 août 2007 à 17:57
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) : 


<table width="742" height="532" border="0">
----, <table width=\"100%\" border=\"0\">
----

,

----

<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>

Survolez l'image pour lire la légende, cliquez pour la suite...

<script language="javascript">
init(image)
</script>
</td>
      </tr>
    </table></td>
  </tr>
</table>
Afficher les 34 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_jerms)