11550 sujets

JavaScript, DOM et API Web HTML5

Probleme sur un tuto ( gallerie javascript )

Salut a tous
jai un probleme sur ce tuto
lien du tuto :http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript

voila en gros je veux faire une gallerie dynamique ( cele ci est tres bien sauf que dans mon cas les miniatures sont dans une div et l'emplacement des grandes images sont dans une autre div.

Comment je pourrais faire ?
merci
Smiley biggrin
normalement rien ne t'empeche que ca fonctionne
File le code HTML que toi tu as de ton coté, on va voir ce qu'on peut faire.

Car pas de code, pas de réponses
salut Smiley smile
bien malheuresement j'ai reecri le css .. des que je lai refais je repost ici merci de ta reponse en tout cas !
le code JS ne depend pas de la CSS ici, donc tu peux tres bien filer ton code HTML pour qu'on adapte le JS à ton besoin, ou plutot qu'on t'xplique comment faire
Salut ! donc voila mon code html (j'ai volontairement enlever des meta et le title .. ) 

<!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">
<head>

<meta name="language" content="francais"/>
<meta name="author" content="damien bouré"/>
<meta name="robots" content="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="css.css" rel="stylesheet" type="text/css"/>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>

<body>
   <div class="site" id="global">
<div class="haut" id="menu">
<div id="flashcontent">
	Bannière en flash-studio de création freelance-graphisme-web-photographie</div>
        <script type="text/javascript">
	// <![CDATA[
		
	var fo = new SWFObject("images/swf/header.swf", "bannière de dam'z", "679", "116", "9.0.28.0", "#ffffff");
	fo.write("flashcontent");
		
	// ]]>
        </script>
</div>
<div class="milieu" id="milieu">
<div id="liens">
<table border="0" cellspacing="0">
<tr>
<td id="lien1"><a href="http://damz-graphic.fr/sitehtml/index.html" rel="stylesheet"></a></td>
<td id="lien2"><a href="#" rel="external"></a></td>
<td id="lien3"><a href="#" rel="external"></a></td>
<td id="lien4"><a href="#" rel="external"></a></td>
</tr>
</table>
</div>
</div>
<div class="contenu">
<div class="imgreal"></div>

<div class="galerie">
<ul id="galerie_mini">
		<li><a href="images/photo1.png" title="Titre de la photo 1" target"photo"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
		<li><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></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>
        <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>
    </div>
    </div>
<dl id="photo"><span>Titre de la photo 1</span><span><dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd></span></dl>


<div class="bas"><img src="images/footer-accueil.png" alt="Damien/bouré/artiste/freelance" width="679" height="31" /></div>

</div></body></html>




voila je voudrais que lorsquon clique sur une miniature , l'image saffiche ds le div ( class="photo")
merci Smiley smile
Modifié par koukiks (16 Aug 2008 - 00:44)
slt ! oui desoler UP ! Smiley smile
J'ai entendu parler de la fonction DOM mais la encore je ne sais pas l'utiliser afin de resoudre mon probleme ..
au passage je post mon javascript
function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = galerie_mini.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



	// 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_pict.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_pict.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
[/i]
Modifié par koukiks (16 Aug 2008 - 00:50)
YOUPI J'ai resolu le pb tout seul !!
au final j'ai trouver la technique des <iframe> ma galerie marche
I LOVE IFRAME lol ca fesais 2 jours que je cherchais je suis happy ( oui il me faut pas grand chose haha )
Sujet clos
Aller à