Diaporama

[Looping972]

Bonjour à tous,

N'étant pas spécialiste de javascript, j'ai récupéré un script qui me permet de faire défiler un bandeau d'images qui fonctionne parfaitement, j'en profite pour remercier son auteur. Mon soucis est que lors du clic sur une photo quelconque du diaporama, l'image en taille réelle apparait bien mais dans une fenêtre normale (sans dimensions particulières) hors, j'aimerais que cette fenêtre ait des caractéristiques spécifiques (640x480, mes images ont toutes les mêmes dimensions).

Voici le code que j'utilise pour le diaporama :

//Specify the slider's width (in pixels)
var sliderwidth="495px"
//Specify the slider's height
var sliderheight="73px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=4
//configure background color:
slidebgcolor=""

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="gdphotos/0.jpg" TARGET="_blank"><img src="photosgif/0.gif" border=0></a>'
leftrightslide[1]='<a href="gdphotos/1.jpg" TARGET="_blank"><img src="photosgif/1.gif" border=0></a>'
leftrightslide[2]='<a href="gdphotos/2.jpg" TARGET="_blank"><img src="photosgif/2.gif" border=0></a>'
leftrightslide[3]='<a href="gdphotos/3.jpg" TARGET="_blank"><img src="photosgif/3.gif" border=0></a>'
leftrightslide[4]='<a href="gdphotos/4.jpg" TARGET="_blank"><img src="photosgif/4.gif" border=0></a>'
leftrightslide[5]='<a href="gdphotos/5.jpg" TARGET="_blank"><img src="photosgif/5.gif" border=0></a>'
leftrightslide[6]='<a href="gdphotos/6.jpg" TARGET="_blank"><img src="photosgif/6.gif" border=0></a>'
leftrightslide[7]='<a href="gdphotos/7.jpg" TARGET="_blank"><img src="photosgif/7.gif" border=0></a>'
leftrightslide[8]='<a href="gdphotos/8.jpg" TARGET="_blank"><img src="photosgif/8.gif" border=0></a>'
leftrightslide[9]='<a href="gdphotos/9.jpg" TARGET="_blank"><img src="photosgif/9.gif" border=0></a>'
leftrightslide[10]='<a href="gdphotos/10.jpg" TARGET="_blank"><img src="photosgif/10.gif" border=0></a>'
leftrightslide[11]='<a href="gdphotos/11.jpg" TARGET="_blank"><img src="photosgif/11.gif" border=0></a>'
leftrightslide[12]='<a href="gdphotos/12.jpg" TARGET="_blank"><img src="photosgif/12.gif" border=0></a>'
leftrightslide[13]='<a href="gdphotos/13.jpg" TARGET="_blank"><img src="photosgif/13.gif" border=0></a>'
leftrightslide[14]='<a href="gdphotos/14.jpg" TARGET="_blank"><img src="photosgif/14.gif" border=0></a>'
leftrightslide[15]='<a href="gdphotos/15.jpg" TARGET="_blank"><img src="photosgif/15.gif" border=0></a>'
leftrightslide[16]='<a href="gdphotos/16.jpg" TARGET="_blank"><img src="photosgif/16.gif" border=0></a>'
leftrightslide[17]='<a href="gdphotos/17.jpg" TARGET="_blank"><img src="photosgif/17.gif" border=0></a>'
leftrightslide[18]='<a href="gdphotos/18.jpg" TARGET="_blank"><img src="photosgif/18.gif" border=0></a>'
leftrightslide[19]='<a href="gdphotos/19.jpg" TARGET="_blank"><img src="photosgif/19.gif" border=0></a>'
leftrightslide[20]='<a href="gdphotos/20.jpg" TARGET="_blank"><img src="photosgif/20.gif" border=0></a>'

//Specify gap between each image (use HTML):
var imagegap=""

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=0


////NO NEED TO EDIT BELOW THIS LINE////////////

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+slideshowga
p+"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+slideshowga
p+"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>')
}
}

Merci par avance,

[kadisbel]

Bonjour,

En fait il faut rajouter une fonction dans le code de type :

function mafenetre(monlien){

var option = "resizable=no,width=640,height=480"; 
window.open(monlien,"titre",option); 
}

Et remplacer les

leftrightslide[0]='<a href="gdphotos/0.jpg" TARGET="_blank"><img src="photosgif/0.gif" border=0></a>'

par :

leftrightslide[0]='<a href="java script: mafenetre(\'gdphotos/0.jpg\')" ><img src="photosgif/0.gif" border=0></a>'

(sans l'espace entre java et script -> java script: mais je n'arrive pas à l'enlever)

Modifié 17 Juin 2009 par olitax

[Looping972]

Bonjour kadisbel,

Tout d'abord un grand merci pour cette réponse mais je ne suis vraiment pas doué, je ne sais pas à quoi correspond "monlien".

J'ai mis quelque chose un peu au hasard et maintenant, je ne vois plus le diaporama. Si vous pouvez me donner une explication, ce serait super !

Merci par avance.

[kadisbel]

En fait, il faut mettre la petite fonction que j'ai mise telle quelle tout en bas de ton script javascript, et remplacer le "a href" dans chaque ligne, comme je l'ai indiqué.

Cette fonction ouvre une fenêtre HTML à partir des éléments que l'on a passé dans le lien (on dit dans la balise A que l'on veut lancer la fonction "maFenetre", avec comme paramètre, l'adresse de l'image , et la fonction va "lire" ce paramètre (qui est en quelque sorte généralisé par "monlien"))

Donc en gros dans le lien on a l'adresse de l'image -> on appelle la fonction javascript avec l'adresse en question -> la fonction se lance -> elle "lit" le paramètre (l'adresse) -> elle va ouvrir une fenêtre en 640x480, en popup, avec l'adresse qu'on lui a donné

C'est pas évident à expliquer, mais en gros c'est ça

[Looping972]

Génial, un grand merci à toi, c'est exactement ce que je cherchais, ça fonctionne parfaitement !

[kadisbel]

De rien, contente d'avoir pu t'aider

[Looping972]

Je vais oser prolonger un peu ce post car j'ai remarqué que le bandeau défilant est parfait sous Firefox et Opera mais il est très ralenti sous IE8. A la lecture du script que j'utilise, as-tu une idée de ce qui peut provoquer ce ralentissement ? Je précise que les rajouts que tu m'as donné n'y sont pour rien, j'avais le même phénomène avec la version de base.

Merci encore.

[kadisbel]

Je ne rencontre pas ce phénomène, sous firefox ou IE. Il faudrait tester sur une autre machine voir si tu rencontres le même problème, et si non, c'est peut être dû à IE en lui même (je sais que j'ai déjà eu des problèmes avec setInterval, c'est peut être ça). Je ne peux pas t'aider plus malheureusement.

[Looping972]

Merci beaucoup, je suivre ton conseil et tester ailleurs car il est vrai que mon IE est de toute façon lent.

[Ernestine]

Pour info, chez moi aussi ça va à la même vitesse sur Firefox et IE8 (et IE7).

Si tu as d'autres scripts sur la page, ce sont peut-être eux qui font ralentir l'ensemble.

[Looping972]

Bonjour Ernestine,

Il faut que je vérifie ça, j'ai effectivement un script qui lance de la musique et qui permet de l'éteindre à volonté ?!

Merci.

Après vérification, voici les scripts qui sont sur ma page :

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_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_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];}
}
//-->
</script>

Merci

[Ernestine]

Il faudrait voir où sont appelées toutes ces fonctions, et comment (en plus de la première qui est appelée directement ici).

Sans le code source de la page, ou les autres éventuels scripts, ce n'est pas trop possible.

On dirait que ces fonctions font du redimensionnement de fenêtres ou quelque chose comme ça.

Tu es le mieux placé pour savoir à quoi sert tout ceci et dans quel but tu l'as placé ici

[Looping972]

Merci Ernestine,

Je pense que dreamweaver a traduit ce que je faisais en code propre sans que je sache vraiment ce que ça veut dire. En tout état de cause, le site tourne partout et j'ai remarqué qu'il fonctionne mieux sur IE7 que IE8 mais ce n'est pas une catastrophe.

Merci encore.