5568 sujets

Sémantique web et HTML

[Résolu] Galerie photo avec JavaScript

Bonjour,

J'ai besoin de votre aide car j'ai créé une galerie photo avec le script se trouvant sur votre site ("tutoriel pour débutants propose la création d’une galerie d’images simple avec HTML, CSS et une surcouche JavaScript").
Le problème rencontré est que sur les miniatures apparaissent des numéros (en haut à droite, cf photo) et lorsque l'on clique sur l'une des miniatures, la photo s'affiche sur au premier plan sur un fond gris (cf photo), et on est obligé d'utiliser le bouton retour, pour revenir à l'ensemble de la galerie. upload/48589-Galerie.JPG upload/48589-Fondnoir.JPG .

Merci pour votre retour Smiley biggrin !!!
Merci de votre retour. Voici les codes:

/*MB STYLE*/
* { padding:0; margin: 0 }
body {
    background: #FFFFFF url(images/topbg.jpg) repeat-x top;
	font-family: Eras Medium ITC, Arial, sans-serif, Tahoma, Verdana;
	font-size: 10pt;
	color: #454545;
}

ul { padding-left: 30px; }
li { list-style-type: decimal; }
input, textarea  { border: 2px solid #aaa }
input:hover, textarea:hover  { border: 2px solid #888 }
img { border: 3px solid #e5e5e5; margin: 0 15px 5px 0; float: left; }
a { color: #064186; text-decoration: none; background: inherit }
a:hover { text-decoration: underline }
input, textarea  { border: 2px solid #aaa }
input:hover, textarea:hover  { border: 2px solid #888 }
input.text { color: #000000;	border: 2px solid #E6E6E6; background: inherit }
textarea.text { font-size: 8pt; border: 2px solid #E6E6E6 }
input.text:hover, textarea.text:hover { border: 2px solid #D6D6D6 }
form { display: inline; margin: 0; padding: 0 }

#content { padding: 0; margin: 0 auto; width: 780px; background: transparent }
#title {	margin: 0; padding:0; height: 80px; width: 100%; background: transparent  }
	#title .green { color: #D9FFD8; line-height: 30px; background: inherit }
	#title .pad { padding: 1px 0 }
	#title h1 { font: bold 2.0em Eras Medium ITC, Arial, Sans-Serif; margin: 0; letter-spacing: 1px; color: #fffffe; padding-top: 28px; background: inherit }
	#title #slogan { font: 1.0em Eras Medium ITC, Arial, Sans-Serif; margin: 0;	color: #aaa; background: inherit}
#menu {
	margin: 0px;
	padding: 0px;
	background: inherit;
	line-height: 35px;
	color: #81D7DF;
	width: 100%;
	height: 40px
}
#menu  a, #menu a:visited { color: #81D7DF; text-decoration: none; background: inherit }
#menu .submit { float: right; vertical-align: bottom  }
	#menu .submit ul { margin:0; padding:0px 10px 0 50px; list-style:none }
    #menu .submit li { display:inline; margin:0; padding:0 }
    #menu .submit a { float:left; background: transparent url(images/tableft.jpg) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none }
    #menu .submit a span { float:left; background: inherit; display:block; background:url(images/tabright.jpg) no-repeat right top; padding:0px 15px 0px 10px; margin-right: 2px; color:#FFF }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #menu .submit a span {float:none;}
    /* End IE5-Mac hack */
    #menu .submit a:hover span { color:#fffffe; }
    #menu .submit a:hover { background-position:0% -35px }
    #menu .submit a:hover span { background-position:100% -35px }
    #menu .submit  a.selected { background-position:0% -35px }
    #menu .submit  a.selected span { background-position:100% -35px }
#subheader {	width: 100%; margin:0; height: 87px }
	#subheader .rside { float: right; width: 355px; height: 87px; background: transparent; margin-left: 20px }
		#subheader .rside .padding  { padding-top: 30px }
	#subheader .lside { background: inherit; color: #FFF;  font-size: 120%; height: 87px}
		#subheader .lside .padding { padding-top: 15px; font-family: Eras Medium ITC, Tahoma, Verdana, Arial, sans-serif }
		#subheader .lside a, .lside a:hover  { color: #FFF; text-decoration: underline; background: inherit }
#maincontent { width: 100%; background: transparent; padding-top: 15px }		
	#maincontent h2 { color: #3A3A3A; font-family: Eras Medium ITC, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; text-decoration: none; line-height: 19px; margin: 0 0 5px 0; background: inherit }
	#maincontent h2 { color: #2FB432; font-family: Eras Medium ITC, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; text-decoration: none; line-height: 19px; margin: 0 0 5px 0; background: inherit }
	#maincontent h2 { color: #064186; text-decoration: none; background: inherit	}
	#maincontent .underline { border-bottom: 2px dotted #aaa; margin-bottom: 15px }
	#maincontent h3 { font-size: 130%; color: #6AA6AB; border-bottom: 1px dotted #aaa; background: inherit }
	#maincontent p { padding: 0 0 20px 0; color: #454545; font: 1.0em Eras Medium ITC, Arial, Sans-Serif; margin: 0;  text-decoration: none; background: inherit }
	#maincontent .mpnull { margin: 0; padding: 0 0 0 0; }
	#maincontent .textbox { float: right; color: #454545; width: 40%; background: #fefefe; padding: 10px; margin: 5px 0 15px 15px; border: 1px solid #e8e8e8 }
	/*#maincontent .box { float: center; color: #CFD4F9; width: 98%; margin: 25px auto; position: relative; min-height: 400px; border: 3px solid #e8e8e8 }*/
	#left_side { width: 545px; background: transparent; margin-bottom: 20px}
	#right_side { width: 200px; background: transparent; float: right }
		#right_side h3 { 
			height: 22px;
			background: transparent url(images/h3bg.gif) repeat-x;
			color: #FFF;
			border: 0;
			font: bold 1.2em Eras Medium ITC, Arial, Sans-Serif;
			padding: 1px 0 0 10px;
			line-height: 22px
		}
		#right_side .lcontent { background: #f8f8f8; border: 0px solid #e5e5e5; margin-bottom: 15px;	color: #888 }
		#right_side .lcontent p { padding: 8px; color: #777; background: inherit }
		#right_side ul { padding-left: 10px; background: inherit; color: #454545 }
		#right_side li { list-style: square }
		#right_side img { border: 1px solid #B6D6BB }
#footer {
	bottom:0;
	clear:both;
	text-align: left;
	border-top: 2px solid #e5e5e5;
	padding: 3px 0 0 0;
	margin-top: 0px;
	margin-bottom: 15px;
	color: #888;
	background: #FFF;
}
#footer .right { float: right }

/*CSS Calandrier*/
.main {
width:200px;
border:1px solid black;
}

.month {
background-color:#064186;
font:bold 12px Eras Medium ITC, verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px Eras Medium ITC, verdana;
color:white;
}

.days {
font-size: 12px;
font-family:Eras Medium ITC, verdana;
color:black;
background-color: #CFD4F9;
padding: 2px;
}

.days #today{
font-weight: bold;
color: #2FB432;
}
/*CSS Photo*/

div#galerie
{
  width: 528px ;
  position: relative;
  min-height: 520px;
  background: #eed ;
  border: 1px solid #dcb ;
  padding: 15px ;
  margin: 40px auto ;
  text-align: center ;
  font: 1em Eras Medium ITC, 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: 2px solid #dcb ;
}

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

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

dl#photo dd
{
  margin: 1px ;
}

dl#photo img
{
  border: 1px solid #dcb ;
}




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
    };
  }
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;




<!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="en" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
	<link rel="stylesheet" href="stylesheet.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
	<script type="text/javascript" src="js/basiccalendar.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<title>LP@</title>
</head>
<body>
	<div id="content">		
		<div id="title">
			<h1><span class="green">Formation Jeune</span></h1>
			<span id="slogan">FORMATION-AVENIR</span>
		</div>		
		<div id="menu">
			<div class="submit">
				<ul>
					<li><a href="index.html"><span>Acceuil</span></a></li>
					<li><a href="lelycee.html" class="selected"><span>Le Lycée</span></a></li>
					<li><a href="#"><span>Formations</span></a></li>
					<li><a href="#"><span>Demi Pension</span></a></li>
					<li><a href="#"><span>Restaurant</span></a></li>
					<li><a href="#"><span>Comenius</span></a></li>
					<li><a href="#"><span>Plan d'accès</span></a></li>
					<li><a href="#"><span>Contact</span></a></li>
				</ul>
			</div>
		</div>	
		<div id="subheader">
			<div class="lside">
				<div class="padding">	
					<p align="center"><strong> </br></br> </strong></p> 
				</div>
			</div>
		</div>			
		<div id="maincontent">
			<div id="right_side">
				<h3>Dernières Nouvelles</h3>
				<div class="lcontent">
					<p>
						<strong>Journée Portes Ouvertes</strong><br>
						<strong>Rénovation Restaurant</strong><br>
						<strong>Lancement Radio </strong><br>
						<strong>Sortie Pédagogique</strong><br>
						<strong>Echange inter-établissement</strong><br>
						<strong>Billet Cinéma Tarif Lycéen</strong>
					</p>
				</div>
				<h3>Liens Utils</h3>
				<div class="lcontent">
					
				</div>
				<div class="lcontent">
					<form>
						<script type="text/javascript">
						var themonths=['Janvier','Fevrier','Mars','Avril','Maï','Juin','Juillet','Août','Septembre','Octobre','Novembre','Decembre']
						var todaydate=new Date()
						var curmonth=todaydate.getMonth()+1 //Récupère le mois en cours (1-12)
						var curyear=todaydate.getFullYear() //Récupère l'année en cours
						function updatecalendar(theselection){
						var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
						var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)
						if (document.getElementById)
						document.getElementById("calendarspace").innerHTML=calendarstr}
						</script>						
						<script>
							//Ecrire sur le calendrier du mois en cours pour commencer
							document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))
						</script>						
					</form>
				</div>				
			</div>
		<div id="left_side">
			<h2 class="underline">Photos</h2>
			<img src="images/ban.png" alt="image"/>
			<strong>Salle de cours</strong> <br><br>
				<div id="galerie">
					<ul id="galerie_mini">
						<li><a href="images/grands/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
						<li><a href="images/grands/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
						<li><a href="images/grands/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
						<li><a href="images/grands/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
						<li><a href="images/grands/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
						<li><a href="images/grands/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
						<li><a href="images/grands/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
						<li><a href="images/grands/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
						<li><a href="images/grands/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
						<li><a href="images/grands/photo10.png" title="Titre de la photo 10"><img src="images/minis/m_photo10.png" alt="Le titre de la photo 10" /></a></li>
					</ul><br>
					<p>
						<dl>
							<p>
							<dt>Titre de la photo 1</dt><br>
							<dd><img id="big_pict" src="images/grands/photo1.png" alt="Photo 1 en taille normale" /></dd>
							</p>
						</dl>
					</p>	
				</div>
		</div>		
	</div>		
	<div id="footer">
		<p class="right">Copyright &copy; LP</p>
		<p><a href="" target="_blank"></a> | <a href="" target="_blank"></a> | <a href="" target="_blank"></a> | <a href="" target="_blank"></a> | <a href=""></a> |<br /></p>
	</div>
   </body>
</html>



Merci encore Smiley smile
Bien cordialement,[/i]
Bonjour,

Vous en êtes en xHTML Strict : "Un grand pouvoir implique de grandes responsabilités"...
Ceci n'est pas correct :
<p>
  <dl>
    <p>
      <dt>Titre de la photo 1</dt><br>
      <dd><img id="big_pict" src="images/grands/photo1.png" alt="Photo 1 en taille normale" /></dd>
    </p>
  </dl>
</p>

Le break line (<br />) est une balise auto-fermante et peut sans doute être remplacé avantageusement par des marges dans la feuille de styles.

Commencez par corriger les quelques erreurs qui trainent dans votre code via le validateur du W3C par exemple.

Pour les chiffres, ceci doit probablement interfèrer avec le code dédié à la galerie :
li { list-style-type: decimal; }

Au niveau du code JavaScript, la seule différence que je vois avec le script initial, ce situe sur cette partie :
for(var i = 0 ; i < liens.length ; i++)
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	{
		liens[_i].onclick = function()
		// Au clique sur ces liens

vs
for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    liens.onclick = function() {

Aucune certitude...
Mais il serait indéniablement plus facile de pouvoir constater les éventuels problèmes avec une page en ligne plutôt que de s'abimer les yeux sur des lignes de codes... Smiley cligne
Bonjour,

Merci de votre retour rapide. Le site n'est pas opérationnel; je travail en local donc je ne pourrais vous faire voir le problème en ligne.

Donc lors du clic sur la photo en miniature, la photo taille normale ne s'affiche pas dans le cadre correspondant; elle s'affiche en plein écran avec font noire sans la structure de page.

Merci et Bien cordialement,
Bonjour,
J'ai également suivi ce tuto et j'ai le même soucis.
Au click, l'image apparaît en grand je perd mon webdesign... il doit y avoir un hic ds le script ...
Je suis graphiste de formation et de profession, j'ai suivi une formation webdesign pendant laquelle j'ai eu le bonheur de découvrir le html et les css ... j'ai accroché tout de suite et là je m'entraîne un peu ... sur le coup je voulais débuter en js avec une galerie photo assez simple et pas de bol ça marche pô... Smiley fache

Help,
J'ai ma page sur ftp je peux la mettre à dispo si besoin pour voir où ça bug !

merci Smiley biggrin
Bonjour,

En effet, moi aussi je suis un débutant et je ne code pas souvent.
Tu peux mettre ton code en ligne en expliquant ton problème.
De mon côté j'ai juste suivi les conseils du modérateur j'ai vachement amélioré mon code ce qui m'a permis de trouver mon erreur.

Bien cordialement,
Re,

Excuses! tu as identifié ton problème j'ai pas fait attention. Donc mets ton code à disposition.

Bien cordialement, Smiley smile
Sujet clos
Aller à