qude | salut à tous
j'ai refè un nouveau code pour cette fois çi créer une visionneuse
ça marche bien toutfois j'ai 2/3 ptits soucis
en fait j'ai une image principale a gauche et des vignettes qu'on peut faire défiler avec un système de calque à droite
les photos sont stockées de la manière suivante:
script.php
L___ photos
L_____ max
L_____ min
le script va recuperer les photos dans max et dans min tt seul
simplement j'arrive pa a faire 2 choses:
-tout d'abor que le script affiche tte les photos les unes a la suite des autres dans les vignettes (au lieu que j'ai a les rentré moi meme)
- et j'aimerais bien que lorqu'on clic sur une photo vignette a droite elle apparaisse sur la partie gauche (comme prevu)
voila mon script (assez long dsl)
pour comprendre l'erreur je vous conseille vivement d'executer direct le script ordonné comme vu ci-dessus avec nimporte quelles photos de n'importe quelle taille (le script gère tt ça) , l'important c'est que les photos soient ds le meme ordre ds max et ds min
merci d'avance pour votre aide
Code :
- <html>
- <head>
- <title>diaporama</title>
- <!---------------------------------------paramétrage des photos--------------------------------->
- <!---------------------------------------------------------------------------------------------->
- <script language="JavaScript">
- current_max=0;
- current_min=0;
- prev_active=0;
- next_active=1;
- play_active=1;
- click_tempo=200;
- diapo_tempo=5000;
- move_speed=5;
- move_delay=10;
- //paramétrage suivant écran
- lect_x=80*screen.width/1024;
- lect_y=80*screen.height/768;
- if (screen.width<1050)
- {
- largeur="100%";
- hauteur="100%";
- }
- else
- {
- largeur="1000";
- hauteur="600";
- }
- if (screen.height<700)
- {
- img_h=290;
- imgplay_h=400;
- lect_x=20;
- lect_y=30;
- }
- else
- {
- img_h=400;
- imgplay_h=550;
- }
- </script>
- <!----------------------------script qui va chercher les photos--------------------------------->
- <!---------------------------------------------------------------------------------------------->
- <?php
- echo "<script language='JavaScript'>\n";
- echo "<!-- Début du script\n";
- $handle = @opendir("./photos/min" ); //Ouverture du répertoire et récupération du pointeur
- while ($file = @readdir($handle)) { //On scanne le répertoire
- if (ereg('.jpg',$file))
- {
- echo "img$i=new Image;img$i.src='photos/min/$file';\n";
- $i++;
- }
- }
- @closedir($handle);
- echo "// Fin du scrip -->\n";
- echo "</script>\n";
- ?>
- </head>
- <body BGCOLOR="#F1F0C0" topmargin="0" >
- <?php
- $i=0;$j=0;
- echo "<script language='JavaScript'>\n";
- echo "<!-- Début du script\n";
- echo "tab_images_max = new Array();\n";
- echo "tab_images_min = new Array();\n";
- $handle = @opendir("./photos/min" ); //Ouverture du répertoire et récupération du pointeur
- while ($file = @readdir($handle)) { //On scanne le répertoire
- if (ereg('.jpg',$file))
- {
- echo "tab_images_min[$i] = 'photos/min/$file';\n";
- $i++;
- }
- }
- @closedir($handle);
- $handle = @opendir("./photos/max" ); //Ouverture du répertoire et récupération du pointeur
- while ($file = @readdir($handle)) { //On scanne le répertoire
- if (ereg('.jpg',$file))
- {
- echo "tab_images_max[$j] = 'photos/max/$file';\n";
- $j++;
- }
- }
- @closedir($handle);
- echo "tab_images_max[$j] = 'xxxxxx';\n";
- echo "tab_images_min[$i] = 'xxxxxx';\n";
- echo "// Fin du scrip -->\n";
- echo "</script>\n";
- ?>
- <script language="JavaScript">
- diapo_sup=0;
- img=new Image;
- <!-- fonction qui permet de lancer une photo ds une pop up quand on clic sur l'image à gauche--->
- <!---------------------------------------------------------------------------------------------->
- function lancer()
- {
- wPopup = window.open('', 'img_popup', 'width='+(screen.width-15)+', height='+(screen.height-60)+', top=0, left=0, status=no, directories=no, toolbar=no, location=no, menubar=no, scrollbars=no, resizable=yes');
- // On écrit le contenu de la fenêtre popup
- wPopup.document.clear();
- wPopup.document.write("<html><head><title>photographie</title></head>" );
- // La fonction qui attend que l'image soit chargée et affichée pour redimensionner la fenêtre à la bonne taille
- wPopup.document.write("<body bgcolor='#F1F0C0'>" );
- wPopup.document.write("<table align='center' cellpadding='0' cellspacing='0' border='1'>" );
- wPopup.document.write("<tr>" );
- wPopup.document.write("<td align='center' valign='middle' height='"+img_h*1+"'>" );
- wPopup.document.write("<img src=' "+tab_images_max[current_max]+" ' border='0' height='"+img_h*1.75+"' >" );
- wPopup.document.write("</td>" );
- wPopup.document.write("</tr>" );
- wPopup.document.write("</table>" );
- wPopup.document.write("<br><center><a href='javascript: self.close()'><font color='#000000'>Fermer la fenêtre</font></a> - <a href='javascript:window.print()'> <font color='#000000'>Imprimer cette photo</font></a></center>" );
- wPopup.document.write("</body></html>" );
- }
- <!--------------fonctions qui gère le déplacements des miniatures dans le calque---------------->
- <!---------------------------------------------------------------------------------------------->
- function deplaceCalqueDe(idCalque,stepX,stepY)
- {
- calqueStyle = styleCalque(idCalque);
- calqueStyle.left = parseInt(calqueStyle.left) + stepX;
- calqueStyle.top = parseInt(calqueStyle.top) + stepY;
- }
- function styleCalque(idCalque)
- {
- if (document.all) calqueStyle = document.all[idCalque].style;
- if (document.layers) calqueStyle = document.layers[idCalque];
- if (document.getElementById) calqueStyle =
- document.getElementById(idCalque).style;
- return calqueStyle;
- }
- function defileCalqueMot(idCalque,clipTop,clipBottom,direction)
- {
- pas = pas + (10*direction);
- deplaceCalqueDe(idCalque,0,(10*direction));
- if (document.layers)
- {
- styleCalque(idCalque).clip.top = clipTop - pas;
- styleCalque(idCalque).clip.bottom = clipBottom - pas;
- }
- else styleCalque(idCalque).clip = "rect("+(clipTop-pas)+",auto,"+(clipBottom-pas)+",auto)";
- if (okDefile == 1)
- setTimeout("defileCalqueMot('"+idCalque+"',"+clipTop+","+clipBottom+","+direction+" )",100);
- }
- function defileCalque(idCalque,clipTop,clipBottom,direction)
- {
- okDefile = 1;
- defileCalqueMot(idCalque,clipTop,clipBottom,direction);
- }
- function stopDefile()
- {
- okDefile = 0;
- }
- okDefile = 0;
- pas = 0;
- </script>
- <!-------------récupération des photos dans la gestion des calques------------------------------>
- <!---------------------------------------------------------------------------------------------->
- <script language="JavaScript">
- document.write("<table id='table_img_max' border='0' width='100%' align='center'>" );
- document.write("<tr>" );
- document.write("<td align='right'><img id='img_max' border='0' src='"+tab_images_max[current_max]+"' height='"+img_h+"' onClick='lancer()'></td>" );
- document.write("<td>" );
- document.write("<table align='center'>" );
- document.write("<tr>" );
- document.write("<td align='right'>" );
- document.write("<div ID='scrollCalque' STYLE='position:absolute;top:40px;left:720px;width:200;clip:rect(0,200,350,0)'><img id='img_min1' src='"+tab_images_min[current_min]+"' height='90'><img id='img_min2' src='"+tab_images_min[current_min+1]+"' height='90'><img id='img_min3' src='"+tab_images_min[current_min+2]+"' height='90'><img id='img_min4' src='"+tab_images_min[current_min+3]+"' height='90'><img id='img_min5' src='"+tab_images_min[current_min+4]+"' height='90'></div>" );
- document.write("</td>" );
- document.write("</tr>" );
- document.write("</table>" );
- document.onselectstart=new Function ("return false" );
- </script>
- <!---------------------------------gestion du défilement des miniatures------------------------->
- <!---------------------------------------------------------------------------------------------->
- <table align="center" >
- <tr>
- <td width="200" align="left">
- <A HREF="#" onMouseOver="defileCalque('scrollCalque',0,350,-1)" onMouseOut="stopDefile()"><IMG SRC="scrollup.gif" border=0></A></td>
- <td width="200" align="center"><A HREF="#" onMouseOver="defileCalque('scrollCalque',0,350,1)" onMouseOut="stopDefile()"> <IMG SRC="scrolldown.gif" border=0></A></td></tr></table>
- </td></tr></table>
- </body>
- </html>
|
|