Galerie photo

Question

widi7070

17 Jul 2009 à 14:08

Bonjour à tous, comme beaucoup de personne j'ai un problème d'affichage apres avoir modifié le script de galerie photo, malheureusement je ne trouve pas d'ou vient le problème.
De plus sous internet explorer tout est ok, mais sur firefox lorsque je clique sur la miniature, elle s'affiche dans une autre page, dc....
Voici mon script:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
include "../fonction/connect.php";
?>
<html>
<head>
<html>
<head>

<style>
div#galerie
{
	width: 400px ;
	background: #FFFFFF ;
	border: 0px solid #FFFFFF ;
	
	margin: 15px 30px ;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: center ;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid #FFFFFF ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #FFFFFF ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #FFFFFF ;
}
	
}
</style>
<script>
function displayPics() 
{ 
    var photos = document.getElementById('galerie_mini') ; 
    // On récupère l'élément ayant pour id galerie_mini 
    var liens = photos.getElementsByTagName('a') ; 
    // On récupère dans une variable tous les liens contenu dans galerie_mini 
    var big_photo = document.getElementById('big_pict') ; 
    // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale 
 
    var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; 
    // Et enfin le titre de la photo de taille normale 
 
    // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini 
    for (var i = 0 ; i < liens.length ; ++i) { 
        // Au clique sur ces liens  
        liens[i].onclick = function() { 
            big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien 
            big_photo.alt = this.title; // On change son titre 
            titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo 
            return false; // Et pour finir on inhibe l'action réelle du lien 
        }; 
    } 
} 
window.onload = displayPics; 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page 
        
</script>
</head>

<body style='background-image:url(../images/ok.png);'>

<?php
$idproduit=$_GET['idproduit'];

$requeteproduit="select * from produit where IdProduit =".$idproduit." ";
$resultProduit=mysql_query($requeteproduit);
$tabProduit=mysql_fetch_array($resultProduit);

$IdProduit=$tabProduit['IdProduit'];
$IdFamille=$tabProduit['IdFamille'];
$LibelleProduit=$tabProduit['LibelleProduit'];
$DesignationProduit=$tabProduit['DesignationProduit'];
$CaracteristiqueProduit=$tabProduit['CaracteristiqueProduit'];
$OptionProduit=$tabProduit['OptionProduit'];
$PhotoProduit=$tabProduit['PhotoProduit'];
$PhotoProduit2=$tabProduit['PhotoProduit2'];
$PhotoProduit3=$tabProduit['PhotoProduit3'];
$PhotoProduit4=$tabProduit['PhotoProduit4'];
$PrixProduit=$tabProduit['PrixProduit'];
$PrixBarreProduit=$tabProduit['PrixBarreProduit'];
$NouveauProduit=$tabProduit['NouveauProduit'];
$AfficheProduit=$tabProduit['AfficheProduit'];
$positionProduit=$tabProduit['$positionProduit'];

	echo "<div id='galerie'>
						<script>
						function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale


	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
window.onload = displayPics;
						</script>
						<table>
						<tr><td colspan='4'>
						<dl id='photo'>
						
						<dd><img id='big_pict' src='../images/produits/".$PhotoProduit."' alt='".$LibelleProduit."' /></dd>
						</dl>
						</td></tr>
						<tr>
						<ul id='galerie_mini'>
						
						
						<td>
						<li><a href='../images/produits/".$PhotoProduit."' title='".$LibelleProduit."'><img src='../images/produits/".$PhotoProduit."' alt='".$LibelleProduit."' height='50' width='50'/></a></li>
						</td>
						<?
						if($PhotoProduit2!=''){
						?>
						<td><li><a href='../images/produits/".$PhotoProduit2."' title='".$LibelleProduit."'><img src='../images/produits/".$PhotoProduit2."' alt='".$LibelleProduit."' height='50' width='50'/></a></li></td>
						<?
						}else{
						}
						if($PhotoProduit3!=''){
						?>
		<td><li><a href='../images/produits/".$PhotoProduit3."' title='".$LibelleProduit."'><img src='../images/produits/".$PhotoProduit3."' alt='".$LibelleProduit."' height='50' width='50'/></a></li></td>
						<?
						}else{}
						if($PhotoProduit4!=''){?>
		<td><li><a href='../images/produits/".$PhotoProduit4."' title='".$LibelleProduit."'><img src='../images/produits/".$PhotoProduit4."' alt='".$LibelleProduit."' height='50' width='50'/></a></li><td>
						<?
						}else{}?>
</ul>
</tr></table>
</div>";

?>


</body>
</html>

Merci d'avance de votre aide[/i][/i]
Modifié par widi7070 (20 Jul 2009 - 11:41)

Sujet clos

Questions générales et questions de débutants

Galerie photo