11550 sujets

JavaScript, DOM et API Web HTML5

Affichages photos dns une visionneuse

Bonjour,

J’ai adapté ce code pour réaliser une visionneuse mais je n’arrive pas à faire défiler les photos

Est-ce que vous pouvez m’aider en corrigeant mon code, je précise que mes connaissances en javascrpit sont très limitées.

Mes photos sont dans le repertoire suivant :

Photos/2008/Sejour/Province/Photos/001.jpg, 002.jpg, 003.jpg
Photos/2008/Sejour/Province/Photos-dia/001.jpg, 002.jpg, 003.jpg
Photos/2008/Sejour/Province/Vignettes/001.jpg, 002.jpg, 003.jpg

Merci de votre aide.

Salutations

Code JavaScript :

//Visionneuse.js

var nb_photos,numero_photo,photo_hauteur_max,photo_largeur_max;

photo_hauteur_max="360";
photo_largeur_max="540";

// numero de la photo courante
numero_photo=1;

// nombre de photos dans la galerie
nb_photos=1;

var liste_photos=new Array();
var auteurs=new Array();
var legendes=new Array();
var src_grandes_photos=new Array();

var nom_galerie='';

var diaporama_actif=0;
var duree=3000;

function js_charger_galerie(annee,sujet,galerie,n) 
{
	var i = 0;
	var j = 1;
	var nom_fichier="000";
	var chemin = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos-dia/";
	var chemin2 = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos/";
	nb_photos = n;
	
	while (i<nb_photos)
	{
		liste_photos[i] = new Image();
		liste_photos[i].src = chemin + nom_fichier.substr(0,nom_fichier.length-j.toString(10).length) + j + ".jpg";
		liste_photos[i].alt = "xxxx : "+ nom_galerie + " - Photo : " + j + "/" + nb_photos;
		liste_photos[i].title = "xxxx : "+ nom_galerie + " - Photo : " + j + "/" + nb_photos;
		src_grandes_photos[i] = chemin2 + nom_fichier.substr(0,nom_fichier.length-j.toString(10).length) + j + ".jpg";
		
		i++;
		j++;
	}
}

function js_premiere_photo()
{
	numero_photo=1;
	js_affiche_photo(numero_photo);
}

function js_en_avant()
{
	(numero_photo == nb_photos) ? numero_photo=1 : numero_photo=numero_photo+1;
	js_affiche_photo(numero_photo);
}

function js_en_arriere()
{
	(numero_photo==1) ? numero_photo=nb_photos : numero_photo=(numero_photo-1);
	js_affiche_photo(numero_photo);
}

function js_derniere_photo()
{
	numero_photo=nb_photos;
	js_affiche_photo(numero_photo);
}

function js_diaporama()
{
	if (diaporama_actif == 0) 
	{
		document.images['ico_diaporama'].src='/obj/images/ico_ph_fin.gif';
		document.images['ico_diaporama'].alt='Fin Diaporama';
		document.images['ico_diaporama'].title='Arrêter le Diaporama';
		diaporama_actif=1; 
		js_changer_photo();
	}
	else 
	{
		document.images['ico_diaporama'].src='/obj/images/ico_ph_deb.gif';
		document.images['ico_diaporama'].alt='Début Diaporama';
		document.images['ico_diaporama'].title='Lancer le Diaporama';
		diaporama_actif=0; 
		js_arret_diaporama();
	}
}

function js_changer_photo() 
{
	(numero_photo == nb_photos) ? numero_photo=1 : numero_photo=numero_photo+1;
	js_affiche_photo(numero_photo);
	roll=setTimeout("js_changer_photo()",duree);
}

function js_arret_diaporama() 
{
	window.clearTimeout(roll);
	document.getElementById('photo_agrandie').src=liste_photos[numero_photo-1].src;
}

function js_affiche_photo(k) 
{
	numero_photo=k;
	image=document.getElementById('photo_agrandie');
	image.alt=liste_photos[k-1].alt;
	image.title=liste_photos[k-1].title;
	image.src=liste_photos[k-1].src;
	

	document.getElementById('photo').getElementsByTagName("tr")[0].getElementsByTagName("th")[0].getElementsByTagName("h2")[0].firstChild.nodeValue=liste_photos[k-1].title;
	document.getElementById('photo').getElementsByTagName("tr")[2].getElementsByTagName("td")[0].firstChild.nodeValue=auteurs[k-1];
	document.getElementById('photo').getElementsByTagName("tr")[3].getElementsByTagName("td")[0].firstChild.nodeValue=legendes[k-1];
	lien=document.getElementById('a_photo');
	lien.href=src_grandes_photos[k-1];
	lien=document.getElementById('photo_agrandie');
	lien.src=liste_photos[k-1].src;

}

/* Pour tester la configuration de l'internaute */
function js_javascript_actif() 
{
	document.write("<p>Actuellement, sur votre navigateur, Javascript est activé.</p>");
}



function js_proposer(bouton) 
{
	switch (bouton) 
	{

		case "Diaporama":
			document.write("<div id='boutons_galerie'>");
			document.write('<a href="#photo" title="Première" onclick="javascript:js_premiere_photo();"><img src="/obj/images/ico_ph_premier.gif" alt="Première" title="Première photo de la galerie"/></a>');
			document.write('<a href="#photo" title="Précédent" onclick="javascript:js_en_arriere();"><img src="/obj/images/ico_ph_precedent.gif" alt="Précédente" title="Photo précédente"/></a>');
			document.write('<a href="#photo" title="Diaporama" onclick="javascript:js_diaporama();"><img id="ico_diaporama" src="/obj/images/ico_ph_deb.gif" alt="Début Diaporama" title="Lancer le diaporama"/></a>');
			document.write('<a href="#photo" title="Suivant" onclick="javascript:js_en_avant();"><img src="/obj/images/ico_ph_suivant.gif" alt="Suivante" title="Photo suivante"/></a>');
			document.write('<a href="#photo" title="Dernière" onclick="javascript:js_derniere_photo();"><img src="/obj/images/ico_ph_dernier.gif" alt="Dernière" title="Dernière photo de la galerie"/></a>');
			document.write('</div>');
			break;
		default: 
			alert("Erreur fonction Proposer(bouton) : paramètre non prévu."); 
			break;
	}
}




Code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Visionneuse</title>
<meta name="Keywords" content="p"/>
<script language="javascript" src="../JavaScript/Visionneuse.js"></script>
<link rel="stylesheet" type="text/css" href="../Css/Visionneuse.css" />
<script type="text/javascript">
<!--
	legendes[0] = "aa";
	legendes[1] = "ab";
	legendes[2] = "ac";
	
	auteurs[0] = "dd";
	auteurs[1] = "dc";
    auteurs[2] = "db";
	
</script>

<script type="text/javascript">

	nom_galerie = "Province";
-->
</script>
</head>

<body onload="javascript:js_charger_galerie('2008','Sejour','Province','20')">
<div id="conteneur">
	<div id="titre"><h1> wwwwwwwww </h1></div>
	<div id="milieu"> 
		<table id="photo" summary="">
			<tr><th><h2> xxxxxxxxxx xxxxxxxxx xxxxxxx - Photo : 1/20</h2></th></tr>
	          <tr><td><a id="a_photo" href="/Photos/2008/Sejour/Province/Photos/001.jpg"><img src="/Photos/2008/Sejour/Province/Photos-dia/001.jpg" alt=" - Photo : 1/20" width="604" height="454" id="photo_agrandie" title=" - Photo : 1/20"/></a></td>
			</tr>
			 <tr><td class="auteur_photo">aa</td>
			 </tr>
			<tr><td class="legende_photo">dd</td>
			</tr>
		</table>
	</div>
	<div id="mini_galerie" class="sous_bloc_float">
			
		<script type="text/javascript">
			<!--
			js_proposer("Diaporama");
			-->
		</script>
		<noscript> <div id="boutons_galerie">
		  <p>Activez le Javascript pour visualiser la galerie <br/>
		    <a href="/2-photos.html#aide-photos" title="aide pour les photos" >aaaaaaaaaa</a></p></div></noscript>
	</div>

	<div id="galerie">
<!-- Photos 1	-->
<a href="/Photos/2008/Sejour/Province/Photos/001.jpg" onclick="js_affiche_photo(2);return false;"><img src="/Photos/2008/Sejour/Province/vignettes/001.jpg" alt=" Vignette : 2/20" width="102" height="77" title="Vignette : 1/20"/></a>
	
<!-- Photos 2	-->
<a href="/Photos/2008/Sejour/Province/Photos/002.jpg" onclick="js_affiche_photo(2);return false;"><img src="/Photos/2008/Sejour/Province/vignettes/002.jpg" alt="Vignette : 2/20" width="100" height="75" title="Vignette : 2/20"/></a>

<!-- Photos 3	-->
<a href="/Photos/2008/Sejour/Province/Photos/003.jpg" onclick="js_affiche_photo(3);return false;"><img src="/Photos/2008/Sejour/Province/vignettes/003.jpg" alt="Vignette : 3/20" width="100" height="75" title="Vignette : 3/20"/></a>
</div>	
</div>	
</body>
</html>


/* Visionneuse.css */

* 
{
	margin:0;
	padding:0;
	font-family:Verdana,Arial,Helvetica,sans-serif; 
}

body  
{  
	font-size:75%;
	text-align:center;  
	background-color:#EEE;
	color:#000;
	margin:15px 0 15px 0;	
}

h1 	
{
	font-size:1.4em; 
	font-weight:bold; 
	text-align:center;
}
h2 	
{  
	font-size:1.0em; 
	font-weight:bold; 
	text-align:left; 
	margin:10px 0 5px 0; 
}

img 
{
	border:none;
	vertical-align:middle;
}

table 
{
	border:2px solid #6495ed;
	width:70%;
	text-align:center;
	border-collapse:collapse;
	margin:auto;
}

#conteneur 
{
	width:770px;
	height:auto;
	margin:0 auto 0 auto;
	border:2px #000 solid;
	background-color:#9ACBEF;
	color:#000; 
	text-align:left;
}

titre 
{
	width:766px;
	height:40px;
	line-height:40px;
	text-align:center;
	clear:both;
}

#milieu 
{
	width:604px;
	min-height:300px;
	background-color:#EEE;
	color:#000;
	text-align:justify;
	float:left;
	text-align:justify;
	border:2px solid #000;
	overflow:visible;
	margin-left: 80px;
}
	
#galerie 
{
	width:770px;
	height:120px;
	background-color:#000;
	color:#FFF;
	border-top:4px solid #000;
	padding:0;
	margin:0;
	text-align:left ;
	overflow:auto;
	float:left;
	white-space:nowrap;
}

#galerie a img
{
	height:100px;
}

#photo 
{
	border:2px solid #000; 
	width:100%;
	height:427px;
	text-align:center;
	border-collapse:collapse;
	margin:auto;
	background-color:#000;
	color:#FFF;
}

#photo_agrandie 
{
	background-color:#000;
	color:#FFF;
	text-align:center; 
	padding:0;
	margin:0; 
	border:0;
}

#mini_galerie 
{
   	text-align:center;
	width:770px;
	height:35px;
	margin:0; 
	padding:3px 0 8px 0; 
}

#boutons_galerie 
{
	margin:0 110px 0 110px;
}

#boutons_galerie a img
{
	margin:0 5px 0 5px; 
}

#boutons_galerie p 
{
	text-align:center;
	margin:0;
}
[/i][/i][/i][/i][/i]
Modifié par Felipe (10 Apr 2008 - 17:55)
Administrateur
Bonjour et bienvenue, Smiley smile

votre demande a été traitée.
Il vous était toutefois possible de le faire par vous-même grâce au bouton ÉDITER qui se trouve au-dessus de chacun de vos messages (on ne peut bien sûr éditer que ses propres messages et ce bouton n'apparait donc qu'au-dessus de nos propres messages, sauf pour les modérateurs)

Felipe
Bonjour,

Je ne peux vraiment pas croire qu'il ni a personne pour me donner un coup de main dans ce forum.

Je suis bloquer et mes connaissances ne me permette pas d'avancer, a ce jour lorsque je lance la lecture automatique les titres et les numéros des photos défilent, mais pas les photos.

Merci pour vos réponses.

Salutations
Ce serait beaucoup plus facile de t'aider si tu mettais uniquement le code concerné par le problème ou une page en ligne. Parce que la avec le code complet css/html de toute ta page c'est difficile.
Bonjour MatMat,

Merci pour ta réponse, et lorsque j'ai publié le code sur mon site la visionneuse fonctionne.

Maintenant je voudrais afficher un message d'attente pendant le chargement de la galerie.

Comment faire ?

Merci pour votre aide.

Salutations
Bonjour,

Je reprends le post de la visionneuse d’image.

J’ai rajouté une page de pré chargement avec une barre de défilement, mais l’affichage de la page de pré chargement et le pré chargement des photos par lui-même me parait très long.

Est-ce que j’utilise correctement le code que j’ai trouvé pour le pré chargement, et ne fait-il pas doublon avec la fonction js_charger_galerie(annee,sujet,galerie,n) de la visionneuse ?

Voici le lien pour accéder à la page,
http://arsf.free.fr/Informations/Sommaire-Informations-1.html

Choisir Essai Visionneuse.

Merci pour votre aide.

Salutations
Sujet clos
Aller à