11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Plusieurs galeries .js sur une même page

Bonjour à vous,

Ici http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript il y a un tutoriel pour réaliser une galerie photo en Javascript.

J'aurais voulu en mettre plusieurs sur une même page. Or, on n'est pas censé donner un même identifiant à plusieurs <div> différentes. Quelles sont alors mes possibilités?

Si je donne un autre id et que je rajoute ce nouvel id dans le css du genre : 

div#galerie, div#galerie2
{
	width: 510px ;
	background: #F8FBF6;
	border: 1px solid #dcb ;
	padding: 15px ;
	margin: 15px 30px ;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

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

ul#galerie_mini, ul#galerie_mini2 li
{
	float: left ;
}

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

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

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

dl#photo, dl#photo2 dt
{
	font: 2em/1.5em Verdana, serif ;
	color: #6F6F37 ;
}

dl#photo, dl#photo2 dd
{
	margin: 0 ;
}

dl#photo, dl#photo2 img
{
	border: 1px solid #6F6F37 ;
}


...avec à chaque fois un petit "2" pour la galerie suivante, ça me semble réalisable, mais quand même très lourd. De plus, je ne sais pas quoi changer dans le fichier javascript. Ou alors avec une class?

Suis un peu paumé, si quelqu'un pouvait me mettre sur la route...

Merci beaucoup,

Manu
Modifié par manuwatt (15 Aug 2007 - 17:15)
Modérateur
Salut,

En passant les identifiants en arguments de la fonction, on peut en mettre autant qu'on veut...

Essaie ça :
var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	oId: function(sId)
	{
		return document.getElementById(sId);
	},
	
	aTag: function(oEl, sTag)
	{
		return oEl.getElementsByTagName(sTag);
	},
	
	getSource: function(e)
	{
		return e.target || e.srcElement;
	},

	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	displayPics: function(sGallery, sPicture, sPhoto)
	{
		var oPhotos = oO.oId(sGallery);
		var aLiens = oO.aTag(oPhotos, 'a');
		var iLiens = aLiens.length;
		
		do
			oO.connect(
				aLiens[--iLiens],
				'click',
				function(e)
				{
					var oSrc = oO.getSource(e);
					var oBig_photo = oO.oId(sPicture);
					var oTitre_photo = oO.aTag(oO.oId(sPhoto), 'dt')[0];

					while(oSrc.nodeName.toLowerCase() === 'img' || oSrc.nodeType != 1)
						oSrc = oSrc.parentNode;
					
					oBig_photo.src = oSrc.href;
					oTitre_photo.firstChild.nodeValue = oBig_photo.alt = oSrc.title;

					return oO.cancelClick(e);
				},
				false
			);
		while(iLiens > 0);
	},

	init: function()
	{
		oO.displayPics('galerie_mini', 'big_pict', 'photo');
		oO.displayPics('galerie_mini2', 'big_pict2', 'photo2');
	}
};

oO.connect(window, 'load', oO.init, false);
Bonjour,
J'ai modifié un peu ton script, Koala et simplifié pour n'avoir plus qu'une class en remplacement de plusieures id. Pas d'initialisation > on peut cliquer avant la fin du chargement des images. T'en penses quoi?

<!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">
var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},


	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	displayPics: function(e)
	{
	e=e||window.event
	el=e.target || e.srcElement;
	if(!el.tagName)el=el.parentNode // vieux gecko
	if(el.tagName=="A")el=el.childNodes[0 ]; //clavier
	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 oO.cancelClick(e);
	}
} 
};

oO.connect(document, 'click', oO.displayPics, false);
</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/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/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/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/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/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/m_photo6.png" alt="Le titre de la photo 6" /></a>

</div>

</body>
</html>
Modérateur
Salut,

L'idée de la classe est bonne, oui ; c'est plus souple et ça facilite la maintenance. Après, le fait de passer par document... pourquoi pas, en effet. Smiley smile

Il y a juste deux, trois petits points qui me dérangent :

- la sémantique des liens "vignettes" : ça reste une liste ou un paragraphe quand même. J'opterais plus pour la liste, essentiellement pour le rendu lorsque les images sont indisponibles.

- L'omission de certains var... Ici, ça ne prête pas à conséquence parce qu'il n'y a que ça mais si le script est amené à être développé ou remanié, ça peut poser problème.

- L'utilisation de with : Ce n'est qu'un sentiment personnel mais je trouve que ça rend le script plus difficile à lire.

Bref, en repartant de ton principe, j'arrive à celà :
<!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"><!--

@media screen, projection
{
	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 ul
	{
		padding: 0;
	}
	.galerie li
	{
		display: inline;
		list-style-type: none;
	}
	.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"><!--

var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	displayPics: function(e)
	{
		var oEvent, oSrc, oDiv, aChilds, iChilds;
		
		oEvent = e || window.event;
		oSrc = oEvent.target || oEvent.srcElement;

		while(oSrc && oSrc.nodeName.toLowerCase() != 'a')
			oSrc = oSrc.parentNode;
		
		if(oSrc)
		{
			oDiv = oSrc.parentNode.parentNode.parentNode;
			aChilds = oDiv.childNodes;
			iChilds = aChilds.length;
		
			do switch(aChilds[--iChilds].nodeName.toLowerCase())
			{
				case 'p':
					aChilds[iChilds].firstChild.nodeValue = oSrc.title;
				case 'img':
					aChilds[iChilds].src = oSrc.href;
					aChilds[iChilds].alt = oSrc.title;
				case 'a':
					oO.cancelClick(e);
			}
			while(oDiv.className === 'galerie' && iChilds > 0);
		}
		
		return true;
	} 
};

oO.connect(document, 'click', oO.displayPics, false);

		//--></script>
	</head>
	<body>

<p>
	<a href="http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript">Retour au tutoriel</a>
</p>

<div class="galerie">
	<ul>
		<li><a href="images/photo1.png" title="Légende de la photo 1"><img src="images/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
		<li><a href="images/photo2.png" title="Légende de la photo 2"><img src="images/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
		<li><a href="images/photo3.png" title="Légende de la photo 3"><img src="images/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
	</ul>
	<p>Légende 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>Légende de la photo 4</p>
	<ul>
		<li><a href="images/photo4.png" title="Légende de la photo 4"><img src="images/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
		<li><a href="images/photo5.png" title="Légende de la photo 5"><img src="images/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
		<li><a href="images/photo6.png" title="Légende de la photo 6"><img src="images/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
	</ul>
</div>

	</body>
</html>
Ouai la classe!
koala64 a écrit :
Salut,

- la sémantique des liens "vignettes" : ça reste une liste ou un paragraphe quand même. J'opterais plus pour la liste...

Mon but premier était de simplifier, mais tu as raison bien sûr. J'ajouterai que la présence des grandes images avec leur titre n'a lieu d'être qu'avec Javascript activé. Elles pourraient être créées par le script pour aboutir à ceci par éxemple (qui n'est pas encore au top Smiley sweatdrop ).

a écrit :


- L'utilisation de with : Ce n'est qu'un sentiment personnel mais je trouve que ça rend le script plus difficile à lire.


Moi, c'est while sans garde-fou qui me fait peur.

Vu ton exellente maitrise du js, peut-être pourrais-tu m'aider à améliorer le script genre ligthbox que j'essaie de parfaire pour qu'il soit compatible XML1.1 Smiley cligne
Oulalalala...merci beaucoup beaucoup!
Je vais devoir bosser pour comprendre ces modifications mais je le ferai avec grand plaisir!
Je vous remercie et je reviendrai vous voir quand j'aurai essayé tout ça!
Bonne après-midi!
Manu
Tout fonctionne parfaitement comme ça! Je vous remercie pour le temps consacré, peut-être cela servira-t-il à d'autres aussi!
Sujet clos
Aller à