18081 sujets

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

Modif Javascript pour Galerie photo sur 2 div

Bonjour à tous,

Je cherche à faire une galerie photo et je suis tombé sur le code de Chmel qui améliorait celui du tuto. J'aimerais le modifier de façon à avoir l'image et le titre dans un div et les vignettes sur un autre. Je me débrouille un peu en javascript mais là je ne comprend pas tout le script et quand je met les vignettes sur un autre div (avec une autre class car j'ai besoin de les différencier), cela ne marche pas.
Est-ce que quelqu'un aurait l'amibilité de m'aider svp.

Voici le code :

a écrit :
<!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" lang="fr">
<head>
<title>Galerie photo en xHTML CSS et JavaScript</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
body
{
margin: 0 ;
padding: 0 ;
font: 0.9em Georgia, serif ;
}
h1
{
margin: 15px 10px ;
text-decoration: underline ;
color: #dcb ;
}

p
{
line-height: 1.5em ;
text-indent: 1em ;
margin: 15px 10px ;
}

.galerie
{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
}

.galerie a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}

.galerie p
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}

.galerie img
{
border: 1px solid #dcb ;
}
</style>

<script type="text/javascript">
function displayPics(e)
{
el=window.Event?e.target:event.srcElement;
if(!el.tagName)el=el.parentNode // pour NS6+
if(el.parentNode.parentNode.className=="galerie")
{
with(el.parentNode.parentNode)
{
for(c=0;c<childNodes.length;c++)
{
if(childNodes[c].tagName=="P")
childNodes[c].firstChild.data=el.parentNode.title
if(childNodes[c].tagName=="IMG"){
with(childNodes[c]){
src=el.parentNode.href;
alt=el.parentNode.title;
}
}
}
}
return false
}
}
document.onclick=displayPics
</script>
</head>

<body>
<p><a href="http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript">Retour au tutoriel</a></p>
<div class="galerie">
<a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a>
<a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a>
<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>

<p>Titre de la photo 1</p>
<img src="images/photo1.png" alt="Photo 1 en taille normale" />
</div>

<div class="galerie">
<img src="images/photo4.png" alt="Photo 4 en taille normale" />
<p>Titre de la photo 4</p>
<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>
<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>
<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>

</div>

</body>
</html>


Merci d'avance.
eek eek a écrit :
Bonjour à tous,

avoir l'image et le titre dans un div et les vignettes sur un autre.
Merci d'avance.

bonjour, c'est un peut ce que j'ai fait ici non?
Merci pour l'info mais ce n'est pas ça.
En fait les 2 div ne sont pas l'un dans l'autre pour une raison visuelle.
De ce fait, je ne sait pas comment pointer de l'un sur l'autre avec les noeuds et tout ça.

Voici le 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" xml:lang="fr" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="fr" />
<LINK media=screen href="miseenpage.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="code.js"></script>
</head>
<body>
	<div class="conteneur">
		<div class="entete">
			<div class="logo"></div>
			<div class="titre"></div>
		</div>
		<div class="galerie">
			<div class="visuel">
				<img src="images/01.jpg" alt="" />
			</div>
			<div class="menu">
				<a href="images/01.jpg" title=""><img src="images/minis/01.jpg" alt="" /></a>
				<a href="images/02.jpg" title=""><img src="images/minis/02.jpg" alt="" /></a>
				<a href="images/03.jpg" title=""><img src="images/minis/03.jpg" alt="" /></a>
			</div>
		</div>
		<div class="pied2page">
		</div>
	</div>
</body>
</html>



Voici le js :
function displayPics(e) {
	k=5
	el=window.Event?e.target:event.srcElement;
	if(!el.tagName)el=el.parentNode // pour NS6+
	if(el.parentNode.parentNode.className.search(/visuel/)!=-1) {
		with(el.parentNode.parentNode) {
			for(c=0;c<childNodes.length;c++) {
				if(childNodes[c].tagName=="P")
				childNodes[c].firstChild.data=el.parentNode.title
				if(childNodes[c].tagName=="IMG") {
					with(childNodes[c]) {
						src=null;
						src=el.parentNode.href;alt=";
						style.width=el.offsetWidth*k+'px';
						style.height=el.offsetHeight*k+'px';
					}
				}
			}
		}
		return false
	}
}	
document.onclick=displayPics


Je pense qu'en voyant le code tu peux te faire une meilleur idée de ce que je recherche.

Merci d'avance pour ton aide. Smiley lol
Tu as bien trop de div, puisque tu ny connait rien en js, prends l'exemple du tutoriel Smiley biggrin
Sujet clos
Aller à