DIAPORAMA (EFFET RETOURNEMENT DE L'IMAGE)
JEROMAX
Messages postés
274
Date d'inscription
jeudi 22 février 2001
Statut
Membre
Dernière intervention
7 octobre 2013
-
20 juin 2003 à 09:25
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
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
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/16250-diaporama-effet-retournement-de-l-image
https://codes-sources.commentcamarche.net/source/16250-diaporama-effet-retournement-de-l-image
2 avril 2009 à 09:41
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
15 oct. 2007 à 12:11
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
9 août 2007 à 17:49
c'est le première chose qui me vient à l'esprit ca ne change peut être rien du tout.
9 août 2007 à 11:50
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....
7 août 2007 à 17:57
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>7 août 2007 à 16:36
Tout d'abord, merci pour ce script !
Ensuite, pour le problème de l'infobulle alt lisible que sur IE il existe une solution plus simple qui reste en infobulle et lisible par tous les navigateurs : remplacer obj.alt par obj.title
9 mai 2007 à 06:42
En tout cas merci pour la rapidité de ta réponse.
8 mai 2007 à 19:18
Si tu télécharge le ZIP, tu veras mon exemple. Dans mon cas les images sont au même endroit que la page HTML; si ce n'est pas le cas, il faut donner le chemin pour y accéder en plus.
en espérant avoir répondu à ta question.
8 mai 2007 à 18:29
Je suis hyper débutant dans ce domaine alors désolé si ma question est un peu bête mais dans cette ligne :
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
20 nov. 2006 à 18:44
19 nov. 2006 à 21:25
10 juil. 2006 à 11:20
10 juil. 2006 à 10:40
Merci d'avance
1 mars 2006 à 21:00
Merci ;)
3 sept. 2005 à 10:58
Pour répondre à ERW1G, moi je les recrifierais avec Paint ou autre ...
24 juil. 2005 à 00:25
mais g qd meme un probleme, mes photos ne font pas toutes la meme taille,
du coup certaines apparaissent "normales" et d'autre "étirées".. quelqu'n saurait il ce qu'il faut regler?
merci
11 mai 2005 à 04:32
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.
7 janv. 2005 à 13:52
9 sept. 2004 à 14:41
Un succès
El Dume qui se sent tout petit
17 mars 2004 à 12:38
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 !
17 mars 2004 à 12:37
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 !
5 févr. 2004 à 15:48
Ajout de la fonction imageComplete() pour que les dimentions de l'image soient lues quand celle-ci est entièrement chargée.
code modifié:
function init() {
obj=document.getElementById("image")
obj.src = tabImage[numImg]
imageComplete()
desc=document.getElementById("description").firstChild
desc.nodeValue = tabDesc[numImg]
}
function imageComplete(){
if( obj.complete ){hautDepart obj.width; largDepart obj.height; clearTimeout(cont)}
else {cont=setTimeout("imageComplete()",100)}
}
5 févr. 2004 à 13:59
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>
Description
Cliquez sur l'image pour voir la suivante
<script language="javascript">
init()
</script>
3 févr. 2004 à 19:30
Jerm's
3 févr. 2004 à 00:07
qqun sait ?
Salut
Michel
2 févr. 2004 à 13:51
Pour cela il faut ajouter à la suite de l'image, en remplacement de
:
Description
Dans la fonction init, remplacer
obj.alt = tabDesc[numImg]
par
desc=document.getElementById("description").firstChild
desc.nodeValue = tabDesc[numImg]
et dans la fonction retrecirImage :
remplacer
obj.alt par desc.nodeValue
Bien sûr on peut ajouter un style au texte.
la fonction init:
25 janv. 2004 à 22:34
25 janv. 2004 à 22:04
25 janv. 2004 à 20:28
25 janv. 2004 à 20:25
obj.src = tabImage[(numImg+1)%tabImage.length]
obj.alt = tabDesc[numImg+1]
sinon la description elle est decalé d'une image
bonne continuation a tous
4 juil. 2003 à 23:20
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.
4 juil. 2003 à 10:14
20 juin 2003 à 11:32
20 juin 2003 à 09:25
dans retrecirImage()
obj.width--;
par
obj.width=obj.width-varX;
faut faire la même chose dans agrandirImage
avec varX qui est un calcul en fonction de la taille de l'image(qui peut être renseignée dans un autre tableau par ex)
plus varX est grand et plus la vitesse de "retournement est rapide"
Bonne prog
[JEROMAX]
[ http://www.jeromax.free.fr ]