18041 sujets

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

Problème: again! Galerie photo: photos doublons et ouverture externe

Rebonjour à tous!
Après la résolution (toute bête) de mon problème sur le menu déroulant vertical, mon problème se situe sur la galerie photo!
Je m'explique: j'ai repiqué le code du tuo, bien suivi toutes les instructions et fais les deux tris changements de nom de destination pour les photos.
Mais! Les photos apparaissent sur le dessus de mon écran, cliquable, mais s'ouvre sur une nouvelle page! Et elles sont en plus dans le cadre de la galerie!
Mais un bon screen vaut mieux qu'un long discours, donc:

[img=http://img169.imageshack.us/img169/26/sanstitre1rf9.th.png]

et voilà mes codes:
Le HTML/JS

<?php
session_start();
mysql_connect("localhost", "root", "");
mysql_select_db("blind_tears");

?>

<!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" xml:lang="fr" >
   <head>
       <title>Blind Tears - Galerie photos n°1</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="author" content="Dark Simoon"/>
	   <meta name="keywords" content="Blind Tears, Metal, metal, heavy, Dark Simoon, Frankette, Bat'Gland, Taillefine, 
	   Chtouf, groupe, band, Le Mans, Le mans, le mans, le Mans"/>
	   <meta name="Description" content="Le site du groupe de metal manceau Blind Tears"/>
	   <meta name="robots" content="index"/>
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="new 5.css" />
	   <link rel="icon" type="image/png" href="favicon.ico" />
	   <script type="text/javascript" src="script.js">
	   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>
<?php 
include("banniere.php");
?>

<?php 
include("menu2.php");
?>

<div id="corps">

<li><a href="grp1.jpg" title="Dark Simoon"><img src="grp1mini.jpg" alt="Dark Simoon" /></a></li>
<li><a href="grp2.jpg" title="Dark Simoon"><img src="grp2mini.jpg" alt="Dark Simoon" /></li>
<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="grp1.jpg" title="Dark Simoon"><img src="grp1mini.jpg" alt="Dark Simoon" /></a></li>

		<li><a href="grp2.jpg" title="Dark Simoon"><img src="grp2mini.jpg" alt="Dark Simoon" /></a></li>
	</ul>

	
	<dl id="photo">
		<dt>Dark Simoon</dt>
		<dd><img id="big_pict" src="grp1.jpg" alt="Photo 1 en taille normale" /></dd>
	</dl>
</div>


</div>


le CSS (à mon avis pas utile, mais sait-on jamais!):

div#galerie
{
	width: 410px ;
	background: #eed ;
	border: 1px solid #dcb ;
	padding: 15px ;
	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: left ;
}

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

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

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

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #dcb ;
}
[/i]

Merci d'avance!!
Modifié par kilik2049 (24 Jul 2008 - 21:47)
Pas de réponses? J'ai beau avoir cherché sur les anciens 'pic, je n'ai rien trouvé de semblable!
Help (nan pas les Beatles!)
Salut,

Je crois que tu tends le bâton pour te faire battre, là. Smiley biggrin

Tes photos apparaissent en double sur le site... et dans le code, juste après <div id="corps">, il n'y a rien qui te choque ? Smiley cligne
Mouaha effectivement, boulay kilik, boulay!! Smiley biggol
Donc 1/2 résolu! Le second problème est que les photos en grand s'ouvrent dans une nouvelle page! Et là, j'avoue que je ne comprend pas! J'avais lu des trucs comme quoi fallait virer le "script.js", mais j'ai pas tout bien compris! Smiley sweatdrop
Salut,

Si un script JS sur un onclick s'exécute bien (s'il n'a pas d'erreurs), il faut ajouter return false; à la fin de celui-ci pour empêcher le navigateur de suivre le lien.
<?php
session_start();
mysql_connect("localhost", "root", "");
mysql_select_db("blind_tears");

?>

<!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" xml:lang="fr" >
   <head>
       <title>Blind Tears - Galerie photos n°1</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="author" content="Dark Simoon"/>
	   <meta name="keywords" content="Blind Tears, Metal, metal, heavy, Dark Simoon, Frankette, Bat'Gland, Taillefine, 
	   Chtouf, groupe, band, Le Mans, Le mans, le mans, le Mans"/>
	   <meta name="Description" content="Le site du groupe de metal manceau Blind Tears"/>
	   <meta name="robots" content="index"/>
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="new 5.css" />
	   <link rel="icon" type="image/png" href="favicon.ico" />
	   <script type="text/javascript" src="script.js">
	   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>


Euh oui, mais le return false est déjà là! Je ne connait pas le JS, j'ai juste copier-coller le script sur le site...[/i]
Modifié par kilik2049 (25 Jul 2008 - 18:53)
Salut ton problème est simple .

Ta oublie de mettre ton liens dans la boucle . 


 liens[i].onclick = function() {
[/i]
Modifié par NiCeMaN30 (14 May 2009 - 02:45)
Sujet clos
Aller à