Galerie Photo

par **JeanJean** » 01 avr. 2009, 08:29

Oki.

Bah c'est simple j'ai copié collé celui du site pour voir comment ça marchait et si ça marchait.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photos - Le Blog de Hel0ck</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>

<body>
<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="Sans titre-1.jpg" title="Titre de la photo 1"><img src="Sans titre-1.jpg" alt="Le titre de la photo 2" /></a></li>

		<li><a href="2.jpg" title="Titre de la photo 2"><img src="2.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="images/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/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/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/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/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/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/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
	</ul>
	<dl id="photo">
	  <dt>Titre de la photo 1</dt>
		<dd><img id="big_pict" src="1.jpg" alt="Photo 1 en taille normale" /></dd>
  </dl>
</div>

</body>
</html>

La page script.js

Code : Tout sélectionner

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

Et le CSS pour finir.

Code : Tout sélectionner

body {
	background-color:#FFF;	
}

#header{
	position:absolute;
	width:800px;
	height:100px;
	margin: auto;
	margin-left: -400px; /* moitié de la largeur */
	left: 50%;
	background-image:url(Marc.jpg);	
}

#contenu{
	position:absolute;
	width:800px;
	height:700px;
	top:6.25em;
	margin: auto;
	margin-left: -400px; /* moitié de la largeur */
	left: 50%;
	background-color:#000;
}

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 ;
}

Voilà le code complet.

Merci.

par **thehawk** » 01 avr. 2009, 00:05

Personnelement avec TON code je verrai peut etre mieux non ?

par **JeanJean** » 31 mars 2009, 18:40

Bonjour,

Je dois créer une petite galerie phot en JS de ce type. http://www.alsacreations.com/xmedia/tut ... _photo_js/

Cependant, avec mon script, qui est le même que le tuto : http://www.alsacreations.com/tuto/lire/ ... cript.html

Les images dans la mini galerie et dans le grand rectangle sont de même taille. Et j'aimerais pouvoir mettre une dimension maximum sur les deux endroits.
Merci de m'aider.

Galerie Photo

Répondre

Étendre la vue Revue du sujet : Galerie Photo

Galerie Photo