Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Liens contextuels :

Auteur Pages : [>]
eebee
# 11 Dec 2007 - 09:12:22
Citer
58 Posts
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" />

<!-- jQuery library -->
<script type="text/javascript" src="jquery/jquery.js"></script>

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



</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 ! biggrin

Salut
Modifié par eebee (11 Dec 2007 - 09:15)

en cours 
^
fafa007
# 17 Dec 2007 - 23:24:38
Citer
4 Posts
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 rolleyes

@+

http://francouize.free.fr 
^
guillaume6
# 26 Mar 2008 - 01:03:37
Citer
36 Posts
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??? confus

arvenride.free.fr bientot msn 
^
eebee
# 26 Mar 2008 - 09:07:43
Citer
58 Posts
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 cligne mais cela m'arrive très souvent ...

Dis moi ce que cela donne.

eebee

en cours 
^
guillaume6
# 26 Mar 2008 - 21:35:25
Citer
36 Posts
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.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 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? ?? rolleyes


arvenride.free.fr bientot msn 
^
eebee
# 26 Mar 2008 - 22:38:07
Citer
58 Posts
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)

en cours 
^
eebee
# 26 Mar 2008 - 22:58:59
Citer
58 Posts
tu peux peut-être donner un lien pour que je voie ?

eebee
Modifié par eebee (26 Mar 2008 - 23:02)

en cours 
^
guillaume6
# 26 Mar 2008 - 23:45:55
Citer
36 Posts
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

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 biggrin

arvenride.free.fr bientot msn 
^
eebee
# 27 Mar 2008 - 09:48:07
Citer
58 Posts
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 sweatdrop

en cours 
^
guillaume6
# 27 Mar 2008 - 17:53:59
Citer
36 Posts
sweatdrop sweatdrop 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 biggrin

arvenride.free.fr bientot msn 
^
eebee
# 28 Mar 2008 - 09:40:09
Citer
58 Posts
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.


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)

en cours 
^
guillaume6
# 29 Mar 2008 - 17:53:00
Citer
36 Posts
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. confus

arvenride.free.fr bientot msn 
^
eebee
# 30 Mar 2008 - 15:32:43
Citer
58 Posts
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. decu

A+

eebee

en cours 
^
guillaume6
# 30 Mar 2008 - 20:04:48
Citer
36 Posts
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. smile

arvenride.free.fr bientot msn 
^
eebee
# 31 Mar 2008 - 09:57:37
Citer
58 Posts
Salut,
OK à bientôt

eebee

en cours 
^
guillaume6
# 04 Apr 2008 - 07:41:27
Citer
36 Posts
rebonjour,
voila j'ai mis le site en ligne donc...

http://arvenride.free.fr/arvenride/

voila, peut tu me dire ce qui cloche stp...
merci d'avance
smile

arvenride.free.fr bientot msn 
^
eebee
# 04 Apr 2008 - 10:27:32
Citer
58 Posts
Bonjour,

Quand j'essaie de voir un de tes diaporama, sur firefox sur ma console d'erreur j'ai :

Erreur : missing } after function body
Fichier source : http://arvenride.free.fr/arvenride/javascript/galeries.js
Ligne : 49, Colonne : 3
Code source :
});


A mon avis tu n'as pas recopié la dernière ligne de galleries.js ...
});


Alors ?

eebee

en cours 
^
guillaume6
# 04 Apr 2008 - 12:13:40
Citer
36 Posts
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?

arvenride.free.fr bientot msn 
^
eebee
# 04 Apr 2008 - 13:32:40
Citer
58 Posts
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+

en cours 
^
eebee
# 04 Apr 2008 - 13:39:52
Citer
58 Posts
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>


en cours 
^
Pages : [>]

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.8 beta © dew
Contacter l'administrateur - 49.5 ms - Charte