Bonjour,
 
SVP, Connaissez-vous un script qui réponde à ce besoin:
J'ai un espace rectangulaire (750 * 200) dans lequel j'ai besoin de faire défiler des photos en continu. (vitesse réglable si possible)
Il faut donc qu'elles s'affichent en hauteur de 200pix sur une largeur variable qui  garde la proportion d'origine (pour éviter la déformation, car toutes les photos ne sont pas au même format : portrait, paysage, panoramique..).
 
Merci de votre aide

moi j'en connais pas mais tu n'as qu'a le faire toi-même, ça sera très enrichissant j'en suis sur!!

Je ne suis pas assez calé pour ça malheureusement..
Et puis surtout, je sais que ça existe, j'en avais vu sur un site de scripts il y a 2/3 ans, mais j'arrive plus à mettre la main dessus.
Je maintiens donc mon appel à l'aide... Quelqu'un a surement dejà vu ça.

ok c'est bon, j'y suis arrivé tout seul..

J'aimerais bien voir ton résultat. Merci!

il a peut être regarder ici tout simplement
 
http://forum.hardware.fr/hardwaref [...] 7009-1.htm

Hé Non.. Tout le monde me dit que c'est facile, mais personne ne sait faire! Je partage ce que j'ai fait, mais si vous avez les réponses à mes questions suivantes ça serait bien sympa à vous aussi:
-Comment faire pour qu'on ne soit pas obligé de faire des thumbs (donc que le script affiche les images en calculant la bonne largeur pour la hauteur donnée)
-N'y a t il pas moyen de faire en sorte que le script prenne toutes les photos d'un répertoire donné pour ne pas être obligé d'entrer les noms de chaque fichier dans le script (et pour éviter de devoir modifier le script à achaque ajout/suppression de photo?
MERCI d'avance
Le script:
Mettre cette ligne dans la page web, à l'endroit voulu:
<SCRIPT Language="JavaScript" type="text/javascript" SRC="images/slideshow/scroll.js"></SCRIPT>
Faire un fichier texte nommé scroll.js contenant:
var leftrightslide=new Array()
var finalslide=''
 
//SPECIFIER LES IMAGES:
//DEBUT
leftrightslide[0]='<a href="images/image01.jpg" target="_blank"><img src="images/thumb01.jpg" border=0></a>'
 
leftrightslide[1]='<a href="images/image02.jpg" target="_blank"><img src="images/thumb02.jpg" border=0></a>'
 
leftrightslide[2]='<a href="images/image03.jpg" target="_blank"><img src="images/thumb03.jpg" border=0></a>'
//FIN
 
 
//Largeur
var sliderwidth="400px"
//Hauteur
var sliderheight="129px"
//Vitesse
var slidespeed=2
//Couleur de fond:
slidebgcolor="#013264"
//Espace entre chaque image: (HTML)
var imagegap=" "
//Espace entre chaque fin/début de scroll (pixels)
var slideshowgap=2
 
////NE PLUS RIEN TOUCHER A PARTIR D ICI////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
 
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2" ) : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3" ) : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp" ).offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
 
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
 
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
 
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
 
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
 
 
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

> le script affiche les images en calculant la bonne largeur pour la hauteur donnée
 
ya rien à calculer, tu fixe juste la hauteur sans spécifier la largeur et le navigateur fait le calcul.
 
> le script prenne toutes les photos d'un répertoire
 
ben ci dessus, tu les rentre à la main...

 
Je n'ai pas regardé ton script, mais j'essaie quand même de répondre à tes questions :
 
1) l'avantage des thumbs est d'éviter de rendre ta page trop lourde en affichant directement l'image originale. Afficher de grosses images en petits, c'est bof. Par contre, côté serveur avec du php par exemple, tu peux créer des thumbs automatiquement.
2)  pas avec javascript, non (bon il y a qq jours, quelqu'un a posté une solution, mais sur une machine en local et en utilisant la technologie activex propre à IE, donc je suppose que ce n'est pas adapté dans ton cas ). Par contre en php...

 
Narguy, voici le début de ma phrase...!:
N'y a t il pas moyen de faire en sorte que le script prenne ....
 
Donc oui, je les ai rentrées à la main, mais je cherche à faire autrement.
 
Sinon merci pour l'astuce, je vais essayer sans spécifier la largeur!!

ouais! ça marche. C'est moins beau qu'un vrai redimmensionnement, mais ça marche!! Merci, je n'aurais jamais pensé à ça!
 
Sinon, admettons qu'on limite le nombre d'images à 10, et que les images soient nommées image0, image1, image2, etc..
Dans ce cas, plus besoin d'éditer le script à chaque rajout ou suppression d'image.
par contre, si je n'ai que 6 images, les quatre dernières pour arriver à 10 n'existant pas, j'aurais des croix rouges. Est-il possible de faire une sorte de fonction "if exists" ?

je garanti rien, mais tu peut tester:

il faudrait appliquer la condition à chacun de ces blocs:
leftrightslide[0]='<a href="images/image01.jpg" target="_blank"><img src="images/thumb01.jpg" border=0></a>'  
 
leftrightslide[1]='<a href="images/image02.jpg" target="_blank"><img src="images/thumb02.jpg" border=0></a>'  
 
leftrightslide[2]='<a href="images/image03.jpg" target="_blank"><img src="images/thumb03.jpg" border=0></a>'  
...
..
leftrightslide[10]='<a href....etc..... </a>'

ouais ouais, faut que tu change la structure de ton code, pour prendre en compte les images numérotés.

pas obligé, si nomme les images image01.jpg, image02.jpg, image03.jpg, etc jusqu'à 10
 
Dans le script, je teste si l'image01 existe; Si elle existe l'image se définit, sinon, elle ne se définit pas et on passe à la ligne suivante;
Je teste si l'image02 existe; Si elle existe l'image se définit,
sinon, elle ne se définit pas et on passe à la ligne suivante;
Et ainsi de suite jusqu'à image10
 
En code ça donne:
 
var img0=new Image();
img0.src="thumb01.jpg";
if(img0.complete) {
leftrightslide[0]='<a href="images/image01.jpg" target="_blank"><img src="images/thumb01.jpg" border=0></a>';
}
var img1=new Image();
img1.src="thumb02.jpg";
if(img1.complete) {
leftrightslide[1]='<a href="images/image02.jpg" target="_blank"><img src="images/thumb02.jpg" border=0></a>';
}
 
Ca marche nickel!!!
Mille merci pour votre précieuse aide.

img.complete
indique uniquement si le téléchargement est terminé, et je suis pas sûr que ça marche ou pas avec les liens cassés. Même si ça marche, il va falloir que tu ruse.
 
sinon pas de fautes de syntaxe... pour vérifier, utilise la console javascript de ton navigateur.
 

PS: tu connais ``for``? ça permet de faire des boucles:

par contre les images sont numérotés:
image1.jpg, image2.jpg, image3.jpg, image4.jpg, image5.jpg, image6.jpg, image7.jpg, image8.jpg, image9.jpg, image10.jpg

Merci pour la boucle!!
Par contre, dans mon message plus haut, le script est faux.
J'ai essayé de faire des bricolettes avec la boucle pour y arriver, mais ça foire..
Sinon le script marche super bien, je le met tel quel, si tu veux bien le finaliser en mettant une boucle qui fonctionne!!
 
Le script:
Mettre cette ligne dans la page web, à l'endroit voulu:
<SCRIPT Language="JavaScript" type="text/javascript" SRC="images/slideshow/scroll.js"></SCRIPT>
Faire un fichier texte nommé scroll.js contenant:
var leftrightslide=new Array()
var finalslide=''
//SPECIFIER LES IMAGES:
var img0=new Image();  
img0.src="images/slideshow/_image1.jpg";  
if(img0.complete) {  
leftrightslide[0]='<a href="images/slideshow/image1.jpg" target="_blank"><img src="images/slideshow/_image1.jpg" border=0></a>';  
}
 
var img1=new Image();  
img1.src="images/slideshow/_image2.jpg";  
if(img1.complete) {  
leftrightslide[1]='<a href="images/slideshow/image2.jpg" target="_blank"><img src="images/slideshow/_image2.jpg" border=0></a>';  
}
 
var img2=new Image();  
img2.src="images/slideshow/_image3.jpg";  
if(img2.complete) {  
leftrightslide[2]='<a href="images/slideshow/image3.jpg" target="_blank"><img src="images/slideshow/_image3.jpg" border=0></a>';  
}
 
var img3=new Image();  
img3.src="images/slideshow/_image4.jpg";  
if(img3.complete) {  
leftrightslide[3]='<a href="images/slideshow/image4.jpg" target="_blank"><img src="images/slideshow/_image4.jpg" border=0></a>';  
}
 
var img4=new Image();  
img4.src="images/slideshow/_image5.jpg";  
if(img4.complete) {  
leftrightslide[4]='<a href="images/slideshow/image5.jpg" target="_blank"><img src="images/slideshow/_image5.jpg" border=0></a>';  
}
 
var img5=new Image();  
img5.src="images/slideshow/_image6.jpg";  
if(img5.complete) {  
leftrightslide[5]='<a href="images/slideshow/image6.jpg" target="_blank"><img src="images/slideshow/_image6.jpg" border=0></a>';  
}
 
var img6=new Image();  
img6.src="images/slideshow/_image7.jpg";  
if(img6.complete) {  
leftrightslide[6]='<a href="images/slideshow/image7.jpg" target="_blank"><img src="images/slideshow/_image7.jpg" border=0></a>';  
}
 
var img7=new Image();  
img7.src="images/slideshow/_image8.jpg";  
if(img7.complete) {  
leftrightslide[7]='<a href="images/slideshow/image8.jpg" target="_blank"><img src="images/slideshow/_image8.jpg" border=0></a>';  
}
 
var img8=new Image();  
img8.src="images/slideshow/_image9.jpg";  
if(img8.complete) {  
leftrightslide[8]='<a href="images/slideshow/image9.jpg" target="_blank"><img src="images/slideshow/_image9.jpg" border=0></a>';  
}
 
var img9=new Image();  
img9.src="images/slideshow/_image10.jpg";  
if(img9.complete) {  
leftrightslide[9]='<a href="images/slideshow/image10.jpg" target="_blank"><img src="images/slideshow/_image10.jpg" border=0></a>';  
}
//PARAMETRES
//Largeur
var sliderwidth="400px"
//Hauteur
var sliderheight="129px"
//Vitesse
var slidespeed=2
//couleur de fond:
slidebgcolor="#013264"
//Espace entre chaque image: (HTML)
var imagegap=" "
//Espace entre chaque fin/début de scroll (pixels)
var slideshowgap=2
 
////NE PLUS RIEN TOUCHER A PARTIR D ICI////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2" ) : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3" ) : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp" ).offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

> Sinon le script marche super bien, je le met tel quel, si tu veux bien le finaliser en mettant une boucle qui fonctionne!!
 
Ola! tu te débrouille, ça te fera un exercice. Je t ai donné déjà un exemple.

non, pour moi ça va comme ça, vu que j'ai décomposé en faisant dix blocs au lieu d'une boucle.
Si je te demandais ça, c'était pour que ça soit clean, et surtout ça parceque ça a l'air facile pour toi. Mais tel quel ça fonctionne.
J'ai essayé de le faire tout seul, mais je bloque sur l'incrémentation du nom de la variable imgX et sur l'incrémentation de l'array leftrightside[X].

ha oui, je l avais oublié le leftrightside[X] dans le code précédent.
 
une boucle c est hyper simple:

 
je reposte:

 
mais as tu essayé img.complete pour voir si ça marche comme je le suppose?

oui, img.complete marche!
Je croyais que je devais défnir une variable img par bloc. d'où le img1, img2,...img10
leftrightslide[i] doit commencer par la valeur zéro:
Esct-ce que je peux écrire leftrightslide[i-1] ou bien je dois faire:
var j=i-1
leftrighslide[j]
?
Autre chose: si je mets du script (n'importe lequel) dans mes balises head, hé bien mon slide ne s'affiche plus du tout! je n'arrive pas à comprendre pourquoi!!

> Esct-ce que je peux écrire leftrightslide[i-1]
oui
 
> Autre chose: si je mets du script (n'importe lequel) dans mes balises head, hé bien mon slide ne s'affiche plus du tout! je n'arrive pas à comprendre pourquoi!!
 
surement parceque document.write écrit alors dans le head!

Ca me donne ça:

 
Mais ça ne marche pas. Pourtant ie ne me renvoie pas d'erreur.

ok ca marche
 

rajoute un peu de debug pour y voir plus clair:

ok dac

si tu veux plus d images, tu peut changer:
var maximages=10;
par exemple:
var maximages=50;

of course!! c'est génial, à part le fait que si je veux que ça marche, mon head doit etre vierge.
A part refaire mon site en frames, je vois pas comment faire

ben mets plutot le script dans le body.
ou découpe le en deux morceaux, avec le write dans le body, et les précharge/vérif dans le head.
et mets le JS à part dans un fichier.js

Tu m'as beaucoup aidé. Vraiment merci!!
Je vais arreter de te solliciter si tu veux, et refaire un nouveau post pour demander pourquoi et comment je peux résoudre ce dernier pb.
 
Je remettrais ici le code fini tout beau pour ceux que ça intéresse.
Il est bien ce script parceque lorsqu'on met la souris sur le slide, il s'arrete de défiler pour qu'on ait le temps de bien regarder la photo et cliquer dessus si on veut voir la foto en grand.

pour le .js c'est deja comme ça que ça marchait, et le script était dans le body.
Je vais essayer de le couper en deux pour voir comment ça se comporte.

ça prends deux secondes les modifs, juste un peu de copier/coller.
 
dans un premier temps tu mets tout le script dans le body et ça devrait aller.
 
si ça marche pas c est parceque document.write écrit juste après la balise <script>, donc si <script> est dans le <head> il écrit dans le <head> et ça fait tout foirer.

quand tu met le script dans le body, il écrit dans le body et ça devrait aller.

Bon, appamment, le problème viendrait du test img.complete
Je ne suis pas sûr que ça soit la bonne méthode.
En fait pour tester, j'avais toujours la meme page ouverte et je rafraichissait.
Mais quand j'ouvre le fichier, aucune image ne s'affiche tant que je n'ai pas fait un refresh de la page

ha ouais
ben tu devra ruser avec setInterval

et avec createElement, getElementById, appendChild, innerHTML

si j ai le temps, je te fais un truc de la mort kitu, mais pas pour l instant

ok, merci pour tout ce que tu as deja fait.
Je met le contenu du .js tel qu'il est dans l'état actuel.

olala ça bugge.
tu a oublié plein de ``;``, et ceux que tu a mis ne sont pas à la bonne place.
 
le ``img.complete`` ne marche pas du tout, en fait.
 
je viens de piger ce que tu voulais faire.
 
j ai mis un script de défilement de news qui peut faire le même genre de trucs, il marche sous FF+IE+Opera, en plus il sroll un background et est redimessionnable. tu le trouvera en cherchant sur le forum, si ça t interesse, mais il faudra que tu l adapte pour lui faire afficher des images (il affiche du HTML).