18041 sujets

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

Plusieurs galeries javascript dans même page

Pages :
bonjour,

J'ai fait le tutoriel de la galerie http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript ce W.E et j'ai le même problème qu'ici : http://forum.alsacreations.com/topic-23-30976-1-Prbl-fonctionnement-avec-plusieurs-galeries-javascript.html = je veux mettre plusieurs galeries dans la même page.
J'ai trouvé une solution, j'espère qu'elle vous intéressera.

Pour cela j'utilise la bibliothèque jquery (voir http://blog.alsacreations.com/2007/01/24/329-jquery-une-bibliotheque-javascript-simple-et-efficace )

et j'utilise une classe galerie au lieu des id (comme le conseille Florent V. )

Conclusion, la feuille de style devient 

div.galerie
{
	width: 100% ;
	background: #000 ;
	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.galerie_photo
{
	clear: both ;
	margin: 0 auto ;
}

dl.galerie_photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #dcb ;
}

dl.galerie_photo dd
{
	margin: 0 ;
}

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


le fichier html devient

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title></title>

	<link rel="stylesheet" type="text/css" media="screen,projection" href="css/style.css" />
	
	[b]<!-- jQuery library -->
	<script type="text/javascript" src="jquery/jquery.js"></script>

	<script type="text/javascript" src="jquery/galeries.js"></script>[/b]

  
</head>
<body>

<!-- Contenu du document -->
<div class="galerie" id="galerie1">
	<ul class="galerie_mini">
		<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
		<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
		<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
		<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
		<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
		<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
		
	</ul>

	
	<dl class="galerie_photo">
		<dt>Titre de la photo 1 : galerie 1</dt>
		<dd><img src="img/chat013.jpg" alt="Photo 1 en taille normale" /></dd>
	</dl>
</div>
<div class="galerie" id="galerie2">
	<ul class="galerie_mini">
		<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
		<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
		<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
		<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
		<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
		<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
		
	</ul>

	
	<dl class="galerie_photo">
		<dt>Titre de la photo 1 : galerie 2</dt>
		<dd><img src="img/chat013.jpg" alt="Photo 1 en taille normale" /></dd>
	</dl>
</div>



	


</body>
</html>


Remarque : j'ai bien deux galeries et je ne suis même pas obligée de les nommer. Attention , ne pas oublier l'appel à la librairie jquery ainsi que l'appel au fichier javascript à la sauce jquery galeries.js qui devient alors : 


$(document).ready(function(){
    
	/* pour chaque galerie */
	$('.galerie').each(function(i) {
		
		 /* trouver la grosse photo, son titre */
		 var big_photo = $(this).find('dl').find('dd').find('img');
		 var titre_photo =$(this).find('dt');
		 
		  /* pour chaque galerie */
		  $(this).find('ul').find('li').each(function(i) {
		  		
		  		 /* pour chaque lien de la minie galerie */
				 $(this).find('a').click(function() {
				 		
						/* modifier le comportement au click sur chaque lien */
				 		
				 		big_photo.attr('src',$(this).attr('href'));	 // On change l'attribut src de l'image en le remplaçant par la valeur du lien
						big_photo.attr('alt',$(this).attr('title')); // On change son titre
						titre_photo.html($(this).attr('title'));	// On change le texte de titre de la photo
						return false; // Et pour finir on inhibe l'action réelle du lien
						
				});
		  });	 
	});
});


Donnez moi votre avis ! Smiley biggrin

Salut
Modifié par eebee (11 Dec 2007 - 09:15)
Yo,
C'est parfais sur mon site (http://www.creactiv.fr/index.php?cat=Real) !!!
J'ai mis "gallerie" pour tous les id et les class et cela marche tres bien et je peux créer de nouvelles pages sans avoir à spécifier un numéro de galerie, ce qui est plutot pratique.
Merci bcp car mes bidouillages ne fesaient pas de miracles Smiley rolleyes

@+
bonjour a tous, j'ai fait les modifications sur mes fichiers et vu que j'ai un header.html , je ne sait pas si cela va fonctionner.
en fait, j'ai le header, puis le menu, qui lance, lui la gallerie... Mais le probleme est qu'on dirais que le script.jc et le galleries.js ne sont aps activés...
pourtant, j'ai fait les modifications...
donc ce que je n'est pas compris est que on doit mettre dans l'exemple:

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/galeries.js"></script>

alors que mon fichier script.js est a la racine et le fichier galleries.jc aussi... pouvez-vous m'editer votre fichier jquery.jc svp? pour voir si j'ai bien le meme...
voila le code du header.html =
je me suis peut etre tromper...

<!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>Bienvenue sur arve's ride, l'actualitée du ride dans la vallée d e l'arve...</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
       <!--[if lte IE 6]>
	<style type="text/css">
		li {
			height: 1px;
			}
	</style>
	<![endif]-->
       <link rel="stylesheet" media="screen" type="text/css" title="design" href="./design/design.css"/>   
 		 	<script type="text/javascript" src="jquery-1.2.3.js"></script>
			<script type="text/javascript" src="script.js"></script>
			<script type="text/javascript" src="galeries.js"></script>
			<script type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = $(this).text();
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
    </script>

  
   </head>
   <body>


et ensuite la gallerie: "gallerie.php"=

	<?php include("header.html");?> <!-- Encodage de la page -->
  
<!-- Code de la bannière -->
	<?php include("./design/baniere.php");?>
  
<!-- Menu du site -->
	<?php include("menu.php");?>
	



<div id="corps">
		
 		<h2>La gallerie des beaux paysages</h2>
 		

<div class="galerie" id="galerie1">

				<ul class="galerie_mini">

					<li><a href="./images/paysage/paysage_foret_chevran.jpg" title="forêt du chevran"><img src="images/paysage/minis/paysage_foret_chevran_m.jpg" alt="forêt du chevran" /></a></li>
		

				</ul>


				<dl class="galerie_photo">

						<dt>forêt du chevran</dt>

						<dd><img src="./images/paysage/paysage_foret_chevran.jpg" alt="forêt du chevran" /></dd>

				</dl>

		</div>

		<div class="galerie" id="galerie2">

	 			<ul class="galerie_mini">

					<li><a href="./images/paysage/hiver_froid.JPG" title="flaine... splendide"><img src="images/paysage/minis/hiver_froid_m.JPG" alt="flaine... splendide"/></a></li>
		

				</ul>


				<dl class="galerie_photo">

						<dt>flaine... splendide</dt>

						<dd><img src="./images/paysage/hiver_froid.JPG" alt="flaine... splendide" /></dd>

				</dl>

		</div>

	</div>		
 
</div>
				
				


 
<?php include("pied_de_page.php"); ?>
 
		

   </body>
		</html>


quelqu'un pourais m'aider svp??? Smiley confus
Bonjour,

avant tout si on inclut le fichier galeries.js, pas la peine de mettre le code suivant dans ton fichier : (cela fait doublon)
<!--

    $(document).ready( function () {

        // On cache les sous-menus

        // sauf celui qui porte la classe "open_at_load" :

        $("ul.subMenu:not('.open_at_load')").hide();

        // On selectionne tous les items de liste portant la classe "toggleSubMenu"

    

        // et on remplace l'element span qu'ils contiennent par un lien :

        $("li.toggleSubMenu span").each( function () {

            // On stocke le contenu du span :

            var TexteSpan = $(this).text();

            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;

        } ) ;

    

        // On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.toggleSubMenu > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($(this).next("ul.subMenu:visible").length != 0) {

                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );

                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        });

    

    } ) ;

    // -->


Ensuite, vérifie bien tes chemins (en général quand cela ne fait rien, moi je me suis trompée dans le nom du fichier jquery ...)
Tu as bien pensé à inclure la classe galerie dans ton.CSS.
Désolée les questions sont peut-être bête Smiley cligne mais cela m'arrive très souvent ...

Dis moi ce que cela donne.

eebee
rebonjour, merci de ta reponce
alors, j'ai verifier et je montre mon code:
le fichier gallerie.php:

 <!-- Encodage de la page -->	
	<?php include("header.html");?>
  
<!-- Code de la bannière -->
	<?php include("./design/baniere.php");?>
  
<!-- Menu du site -->
	<?php include("./structure/menu.php");?>
	



	<div id="corps">
		
 		<h2>La gallerie des beaux paysages</h2>
 		

		<div class="galerie" id="galerie1">

				<ul class="galerie_mini">

					<li><a href="./images/paysage/paysage_foret_chevran.jpg" title="forêt du chevran"><img src="images/paysage/minis/paysage_foret_chevran_m.jpg" alt="forêt du chevran" /></a></li>
		

				</ul>


				<dl class="galerie_photo">

						<dt>forêt du chevran</dt>

						<dd><img src="./images/paysage/paysage_foret_chevran.jpg" alt="forêt du chevran" /></dd>

				</dl>

		</div>

		<div class="galerie" id="galerie2">

	 			<ul class="galerie_mini">

					<li><a href="./images/paysage/hiver_froid.JPG" title="flaine... splendide"><img src="images/paysage/minis/hiver_froid_m.JPG" alt="flaine... splendide"/></a></li>
		

				</ul>


				<dl class="galerie_photo">

						<dt>flaine... splendide</dt>

						<dd><img src="./images/paysage/hiver_froid.JPG" alt="flaine... splendide" /></dd>

				</dl>

		</div>

	</div>		
 
</div>
				
				


 
	<?php include("./structure/pied_de_page.php"); ?>
 
		

   </body>
		</html>


ensuite, j'ai le fichier header, la ou ce trouve le lien de mon fichier javascript...:
<!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>Arve'N Ride, l'actualitée du ride dans la vallée de l'arve...</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
       <!--[if lte IE 6]>
	<style type="text/css">
		li {
			height: 1px;
			}
	</style>
	<![endif]-->
       <link rel="stylesheet" media="screen" type="text/css" title="design" href="./design/design.css"/>   
 		 	<script type="text/javascript" src="./javascript/jquery-1.2.3.js"></script>
			<script type="text/javascript" src="./javascript/script.js"></script>
			<script type="text/javascript" src="./javascript/galeries.js"></script>
			<script type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = $(this).text();
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
    </script>

  
   </head>
   <body>

voila, ensuite j'ai placé mon fichier javascript dans le dossier /javascript/fichier.js ....
donc normalment les liens sont bons...
Et j'ai rennomer les fichier. donc j'ai
galleries.js:
$(document).ready(function(){

    

	/* pour chaque galerie */

	$('.galerie').each(function(i) {

		

		 /* trouver la grosse photo, son titre */

		 var big_photo = $(this).find('dl').find('dd').find('img');

		 var titre_photo =$(this).find('dt');

		 

		  /* pour chaque galerie */

		  $(this).find('ul').find('li').each(function(i) {

		  		

		  		 /* pour chaque lien de la minie galerie */

				 $(this).find('a').click(function() {

				 		

						/* modifier le comportement au click sur chaque lien */

				 		

				 		big_photo.attr('src',$(this).attr('href'));	 // On change l'attribut src de l'image en le remplaçant par la valeur du lien

						big_photo.attr('alt',$(this).attr('title')); // On change son titre

						titre_photo.html($(this).attr('title'));	// On change le texte de titre de la photo

						return false; // Et pour finir on inhibe l'action réelle du lien

						

				});

		  });	 

	});


et le fichier script.js:

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


voila pour les fichier js...

merci a toi de m'aider Smiley smile
et désolé pour cette masse de code...

Ce que tu me dis c'est qu'on peut faire un seul fichier donc plus besoin du galleries.js ????
Donc il me semble que j'ai bien fait mes liens non? ?? Smiley rolleyes [/i]
bonsoir,

Je suis allée un peu vite ce matin. Désolée. Et en plus cette histoire de galleries avec jquery c'est un peu loin.
Tu veux utiliser jquery pour deux choses : gestion de ton menu et galleries ? Le menu marche-t-il sans les galleries ? En plus script.js ne doit pas être utilisé là (c'est la version une seule gallerie).

Dis moi ce que cela donne

ebee
Modifié par eebee (26 Mar 2008 - 22:59)
tu peux peut-être donner un lien pour que je voie ?

eebee
Modifié par eebee (26 Mar 2008 - 23:02)
rebonsoir, alors, oui le menu marche avec Jquery.Mais c'est encore un autre script: le jquery-1.2.3.js ... ce sont juste les galleries... Quand je clique sur la miniature, il m'ouvre l'image dans une autre page internet donc on dirait que le script pour les galleries seulement n'est pas pris en compte...

D'apres toi je dois enlever le lien vers le script.js ??? je dois utiliser seulement le galleries.js ?? ou rassembler les deux scripts?

merci de m'aider

Smiley smile c'est gentil.

et pour le lien, le site n'est pas encore en ligne car j'ai un probleme avec mon .htaccess ...(Laboite de dialogue se repete en boucle meme avec le bon login/met de pass). Donc ce serait pas bien de le mettre maintenant en ligne... Mais des que je corrige ce problemen je le met et j'envoie le lien Smiley biggrin
Bonjour,

oui enlève le lien vers script.js

J'ai fait un test chez moi, cela marche avec galleries.js et la gestion de menu.

Tu vas y arriver

eebee Smiley sweatdrop
Smiley sweatdrop Smiley sweatdrop Smiley sweatdrop

décidement, ca ne marche toujours pas. j'ai enlver le fichier script.js... et j'ai laisser sur mon header que le lien vers galleries.js ... et ca ne marche toujours pas, lesimages s'ouvrent toujours dans une autre fenetre...
je ne comprend vraiment pas...
dois-je reprendre le script de script.js et le copier dans le fichier galleries.js ???

Et tu dis que chez toi ca marche? comment fais tu...
tu as repris exactement mes scripts??

si tu as pris exactement mes scripts, est ce que une autre fichier (html, php, javascript) bloque celui-ci ??
merci encore pour essayer de m'aider Smiley biggrin
Bonjour,

Oui il faut supprimer carrément la ligne d'include de script.js. Et ne pas recopier son contenu dans galleries.js

J'ai repris exactement tes scripts, sauf qu'il me manque ton fichier ./design/baniere.php et menu.php et que j'ai changé le chemin vers des photos à moi.

Donc commence par regarder si cela marche en enlevant les include de banniere.php et menu.php car c'est à priori la seule différence.


a écrit :
j'ai laisser sur mon header que le lien vers galleries.js ...


et la biblothèque jquery quand même n'est-ce pas ?

a+
Modifié par eebee (28 Mar 2008 - 09:43)
oui, j'ai laisser le script jquery-1.2.3.js celui pour le menu donc...
j'ai enlever comme tu m'as dit le lien et le fichier script.js mais ca ne marche toujours pas...
je te renvoie juste le menu et le header...


<!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>Arve'N Ride, l'actualitée du ride dans la vallée de l'arve...</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
       <!--[if lte IE 6]>
	<style type="text/css">
		li {
			height: 1px;
			}
	</style>
	<![endif]-->
       <link rel="stylesheet" media="screen" type="text/css" title="design" href="./design/design.css"/>   
 		 	<script type="text/javascript" src="./javascript/galeries.js"></script>
 		 	<script type="text/javascript" src="./javascript/jquery-1.2.3.js"></script>
			<script type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = $(this).text();
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
    </script>

  
   </head>
   <body>


pour le header...

Et:

<div id="menu">
 
 
	<ul id="menu_horizontal">
		<li class="bouton_gauche"><a href="./index.php"><img src="./icons/home.png" alt="accueil" />Accueil</a></li>
		<li class="bouton_gauche"><a href="./forum.php"><img src="./icons/talk.png" alt="forum" />Le forum</a></li>
		<li class="bouton_gauche"><a href="./telechargement.php"><img src="./icons/download.png" alt="download" />téléchargements</a></li>
		<li class="bouton_gauche"><a href="./livreor.php"><img src="./icons/livreor.png" alt="livreor" />Livre d'or</a></li>
		<li class="bouton_droite"><a href="./sessions/inscription.php"><img src="./icons/inscription.png" alt="inscription" />Inscription</a></li>
	</ul> 
	

	
  	<ul id="navigation">
  	
      	<li class="toggleSubMenu"><span>Mtb</span>
        	 	<ul class="subMenu">
                <li><a href="./rider_mtb.php" title="riders_mtb">Les Riders</a></li>
                <li><a href="./gallerie_mtb.php" title="galleries_mtb">Les Galleries</a></li>
					 <li><a href="./spot_mtb.php" title="bons_spots_mtb">Les Bons Spots</a></li>
                <li><a href="./video.php" title="videos">Les Videos</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Ski</span>
            <ul class="subMenu">
                <li><a href="./rider_ski.php" title="riders_ski">Les Skieurs</a></li>
                <li><a href="./gallerie_ski.php" title="galleries_ski">Les Galleries</a></li>
					 <li><a href="./spot_ski.php" title="bons_spots_ski">Les Bons Spots</a></li>
                <li><a href="./video.php" title="videos">Les Videos</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Bmx</span>
            <ul class="subMenu">
                <li><a href="./rider_bmx.php" title="riders_bmx">Les Streeters</a></li>
                <li><a href="./gallerie_bmx.php" title="galleries_bmx">Les Galleries</a></li>
					 <li><a href="./spot_bmx.php" title="bons_spots_bmx">Les Bons Spots</a></li>
                <li><a href="./video.php" title="videos">Les Videos</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Skate</span>
            <ul class="subMenu">
                <li><a href="./rider_skate.php" title="riders_skate">Les Skateurs</a></li>
                <li><a href="./gallerie_skate.php" title="galleries_skate">Les Galleries</a></li>
					 <li><a href="./spot_skate.php" title="bons_spots_skate">Les Bons Spots</a></li>
                <li><a href="./video.php" title="videos">Videos</a></li>
            </ul>
        </li>
         <li class="toggleSubMenu"><span>Life-$tyle</span>
            <ul class="subMenu">
                <li><a href="./gallerie_paysage.php" title="paysage">Pics paysages</a></li>
                <li><a href="./gallerie_life-style.php" title="gallerie_life-style">pics life-style</a></li>
            </ul>
        </li>
    </ul>    


 
 

 	
		<div class="menu_session" >

			<?php include("./sessions/connexion.php");?>

		</div> 	
 
 
		<div class="menu_s_inscrire_newsletter" >

	<?php
    	if(isset($_GET['email'])) 		//on vérifie que la variable $_GET['email'] existe
    	{
 												/*on vérifie que la variable $_POST['email'] contient bien quelque chose, que la variable $_GET['email'] est égale à  1 et que la variable $_POST['new'] existe */
        	if( !empty($_POST['email']) AND $_GET['email']==1 AND isset($_POST['new']))			
        	{
        	if (preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $_POST['email'])) // on vérifie qu'on a bien rentré une email valide
        	{
 
            if($_POST['new']==0) 	//si la variable $_POST['new'] est égale a  0, cela signifie que l'on veut s'inscrire
            {

           									 //on définit les paramamètres de l'email
            	$email = $_POST['email'];
            	$message = 'Pour valider votre inscription à la newsletter de arvenride.free.fr, <a href="http://www.arvenride.free.fr/newsletter/inscription_newsletter.php?tru=1&amp;email='.$email.'">cliquez ici</A>.';
 
            	$destinataire = $email;
            	$objet = "Inscription à la newsletter de arvenride.free.fr" ;
 
            	$headers  = 'MIME-Version: 1.0' . "\r\n";
            	$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
            	$headers .= 'From: arvenride@free.fr' . "\r\n";
                if ( mail($destinataire, $objet, $message, $headers) ) //on envoie l'email
                {
 
                echo "Pour valider votre inscription, veuillez cliquer sur le lien qui est dans l'email que nous venons de vous envoyer.";
                }
                else
                {
                echo "Il y a eu une erreur lors de l'envoi du mail pour votre inscription.";
                }
            }
            elseif($_POST['new']==1) //si la variable $_POST['new'] est égale a  1, cela signifie que l'on veut se désinscrire
            {
 
            						//on définit les paramètres de l'email
            $email = $_POST['email'];
            $message = 'Pour valider votre désinscription de la newsletter de arvenride.free.fr, <a href="http://www.arvenride.free.fr/newsletter/desinscription_newsletter.php?tru=1&amp;email='.$email.'">cliquez ici</A>.';
 
            $destinataire = $email;
            $objet = "Désinscription de la newsletter de arvenride.free.fr" ;
 
            $headers  = 'MIME-Version: 1.0' . "\r\n";
            $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
            $headers .= 'From: arvenride@free.fr' . "\r\n";
                if ( mail($destinataire, $objet, $message, $headers) )
                {
 
                echo "Pour valider votre désinscription, veuillez cliquez sur le lien qui est dans l'email que nous venons de vous envoyer.";
                }
                else
                {
                echo "Il y a eu une erreur lors de l'envoi du mail pour votre désinscription.";
                }
            }
            else
            {
            echo "Il y a eu une erreur !";
            }
        }
        else
        {
        echo "Vous n\'avez pas entré une adresse email valide ! Veuillez recommencer !";
        }
        }
        else
        {
        echo "Il y a eu une erreur.";
        }
    }
    else // si les champs n'ont pas été remplis
    {
	?>
	
<h5>s'inscrire a la newsletter:</h5>
<form method="post" action="index.php?email=1">
Adresse email :<br/>
<input type="text" name="email" size="25" /><br />
<input type="radio" name="new" value="0" />S'inscrire<br/>
<input type="radio" name="new" value="1" />Se désinscrire<br />
<input type="submit" value="Envoyer" name="submit" /> <input type="reset" name="reset" value="Effacer" />
</form>

	<?php
    }
	?>			

		</div> 




		<div class="menu_information" >
		
	<?php
			if(strpos($_SERVER["HTTP_USER_AGENT"], 'Firefox') !== false)
        		$user_agent_name = 'Mozilla Firefox';
			elseif(strpos($_SERVER["HTTP_USER_AGENT"], 'Opera') !== false)
       		 $user_agent_name = 'Opera';
			elseif(strpos($_SERVER["HTTP_USER_AGENT"], 'Netscape') !== false)
       		 $user_agent_name = 'Netscape';
			elseif(strpos($_SERVER["HTTP_USER_AGENT"], 'Konqueror') !== false)
        		$user_agent_name = 'Konqueror';
			elseif(strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') !== false)
        		$user_agent_name = 'Internet Explorer / Avant Browser';
			else
        		$user_agent_name = '(navigateur inconnu)';
	?>

			<p> Vous naviguez avec:
			<strong>	
				<?php
					echo $user_agent_name;
				?>
			</strong>
			</p>
		
		</div>
		
		
	
		<div class="menu_sondage" >

	<?php
   					// on teste si formulaire de vote a été validé  
   		if (isset($_POST['go']) && $_POST['go']=='Vote') 
   		{ 
   			if (!isset($_POST['choix']) || !isset($_POST['sondage_en_cours'])) 
   			{ 
          		 $erreur = 'Aucune réponse n\'a été choisie.'; 
       		} 
      			  // on teste si le visiteur a bien choisi une réponse avant d'avoir clické sur "Vote". On teste aussi si la variable $_POST['sondage_en_cours'] n'est pas vide 
   			if (empty($_POST['choix']) || empty($_POST['sondage_en_cours'])) 
   			{ 
         		 $erreur = 'Au moins un des champs est vide.'; 
      		} 
      		else 
      		{ 
         		 // là le visiteur à choisi une réponse 
                // on se connecte à notre base 
       		$base = mysql_connect ('localhost','root','slopestyle'); 
         	mysql_select_db ('arve_s_ride',$base); 
    
         		// on prépare notre requête : on ajoute un vote pour la réponse choisie par le votant 
         	$sql ='UPDATE sondage_reponses SET nb_reponses = nb_reponses + 1 WHERE id_sondage="'.$_POST['sondage_en_cours'].'" AND id="'.$_POST['choix'].'"'; 
    
         		// on lance la requête 
         			mysql_query ($sql) or die ('Erreur SQL !'.$sql2.'<br />'.mysql_error()); 
    
        		  // on ferme la connexion à la base de donnée 
        				 mysql_close (); 
  
       		$erreur = 'Merci d\'avoir voté [smile]'; 
    			}  
   		}  
	?> 
    
 	<?php
   		// on se connecte à notre base de données  
  				$base = mysql_connect ('localhost','root','slopestyle');  
   			mysql_select_db ('arve_s_ride',$base);  
   
   		// on prépare une requête pour sélectionner l'id et la question du dernier sondage (on sélectionne les questions, et on en prend qu'une (le LIMIT 0,1) et ce, dans un ordre décroissent (DESC), soit en fait, la dernière question posée).  
   			$sql = 'SELECT id, question FROM sondage_questions ORDER BY id DESC LIMIT 0,1';  
 
   		// on lance la requête  
   			$req = mysql_query ($sql) or die ('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());  
   
  			// on récupère le résultat dans un tableau associatif  
  				 $data = mysql_fetch_array ($req);  
    
 				 $nb_sondage = mysql_num_rows($req);  
    
			 if ($nb_sondage == 0) 
			 { 
    				echo 'Aucun sondage.';  
   		 }  
  			 else 
  			 { 
      					// on libère l'espace mémoire alloué à cette requête 
     			mysql_free_result ($req); 
   
      					// on affiche la question 
     			echo stripslashes(htmlentities(trim($data['question']))),'<br />'; 
   
    					  // on prepare l'affichage de notre formulaire permettant de voter 
     			echo '<form action = "./index.php" method = "post">'; 
    
    					 // on prépare une requête permettant de sélectionner les réponses possibles se rapportant à ce même sondage 
    			$sql = 'SELECT id, reponse FROM sondage_reponses WHERE id_sondage="'.$data['id'].'"'; 
  
    					// on lance la requête 
    		   $req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error()); 
  
      				// on prépare notre boucle pour afficher les différents choix possibles de réponses 
    			while ($donnees = mysql_fetch_array($req)) 
    			{ 
         			// on affiche des boutons radio pour les différents choix de réponses possibles 
     					echo '<input type="radio" name="choix" value="' , $donnees['id'] , '"> ' , stripslashes(htmlentities(trim($donnees['reponse']))) , '<br />'; 
     			}
     			 
	?>
      	<input type = "hidden" name = "sondage_en_cours" value = "<?php echo $data['id']; ?>">
      	<input type = "submit" name="go" value = "Vote">
      	</form>
    <?php
  				}  
    
   				// on libère l'espace mémoire alloué à cette requête  
   		mysql_free_result ($req);  
   
   				// on ferme la connection à notre base de données  
   		mysql_close ();  
   ?>

		</div> 



</div>


pourtant j'ai fait les bons dossiers puisque le menu accede bien a la librairie du header le Jquery.js

Donc ce n'est pas un probleme de lien .... logiquement.

je ne sais vraiment pas ce qui ce passe dans ce code. Smiley confus
Bonjour,

c'est ./design/baniere.php qui me manque et pas header.php. Et puis ne crois-tu pas que ce serait plus simple de résoudre ton problème de .htaccess pour donner un lien et qu'on y voit enfin plus clair car je ne veux pas non plus recopier tout ton site chez moi ...
de toute façon, maintenant que j'ai "menu.php" , il manque /sessions/connexion.php et il y a un essai de connection à ta base qui échoue et probablement une sortie en échec car cela ne va plus jusqu'à l'affichage de la galllerie. Smiley decu

A+

eebee
oui c'est vrai, c'est mieux comme ca. désolé. Je met le site en ligne et je t'envoie un MP ou sur le forum sur ce post...
Merci de m'avoir aider. Smiley smile
re, ben j'ai rajouter l'acolade que tu m'a dit mais le resultat reste le meme

voici mon code galleires.js :
$(document).ready(function(){

    

	/* pour chaque galerie */

	$('.galerie').each(function(i) {

		

		 /* trouver la grosse photo, son titre */

		 var big_photo = $(this).find('dl').find('dd').find('img');

		 var titre_photo =$(this).find('dt');

		 

		  /* pour chaque galerie */

		  $(this).find('ul').find('li').each(function(i) {

		  		

		  		 /* pour chaque lien de la minie galerie */

				 $(this).find('a').click(function() {

				 		

						/* modifier le comportement au click sur chaque lien */

				 		

				 		big_photo.attr('src',$(this).attr('href'));	 // On change l'attribut src de l'image en le remplaçant par la valeur du lien

						big_photo.attr('alt',$(this).attr('title')); // On change son titre

						titre_photo.html($(this).attr('title'));	// On change le texte de titre de la photo

						return false; // Et pour finir on inhibe l'action réelle du lien

						

				});

		  });	 

	});
	});


voila, donc quatres accolades a la fin ca fait un peu beaucoups non?
Non c'est ce qu'il faut.
Je te suggère de mettre un 
alert("coucou");
après 
$('.galerie').each(function(i) {
pour voir si on accède bien à cette partie de code et si oui de déplacer ce alert ("coucou"); pour voir exactement jusqu'où tu vas ...

A+
Et inverse les deux lignes 

<script type="text/javascript" src="./javascript/galeries.js"></script>

 <script type="text/javascript" src="./javascript/jquery-1.2.3.js"></script>

pour avoir


 <script type="text/javascript" src="./javascript/jquery-1.2.3.js"></script>
<script type="text/javascript" src="./javascript/galeries.js"></script>
Pages :
Sujet clos
Aller à