Bonjour à tous.
On m'a conseillé votre forum pour obtenir de l'aide pour régler mon problème, c'est pourquoi je poste ici.
On m'a demandé de faire un site internet pour un photographe. Seulement voilà, n'ayant aucune connaissance allant plus loin que le HTML, cela reste du basique. J'ai voulu intégrer un truc en javascript ayant pour nom : jquery lightbox.
Tout fonctionnait bien jusqu'à ce que je me rende compte que tous les liens dans la page étaient comptés comme des photos (c'est-à-dire que les liens "page suivante" ou "menu" etc, sont ouverts par la lightbox qui essaye de les afficher comme des photos). Du coup, on peut pas naviguer dans le site, ce qui est un vrai problème :p.
Voici la source de la page en question :
[quote]
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css" media="screen">
<!-- body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 0px solid gray;
background: #333;
}
#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: center;
background: #333;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #333;
}
-->
</style>
<title>Les Naufragés de l'Arche</title>
</head>
<body style="background-color: rgb(51, 51, 51);">
<div style="text-align: center;">
<div style="text-align: center;"><big><big><big style="font-weight: bold;"><big><span style="color: rgb(255, 255, 255);">Les Naufragés
de l'Arche</span></big></big></big></big></div>
<br>
<div style="text-align: center;">
<div id="gallery"><a href="photos/naufrages/1.jpg" class="light" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/1.jpg" alt=""></a><a href="photos/naufrages/2.jpg" title="Image 2"><img style="width: 120px; height: 120px;" src="photos/naufrages/2.jpg" alt=""></a><a href="photos/naufrages/3.jpg" title="Image 3"><img style="width: 120px; height: 120px;" src="photos/naufrages/3.jpg" alt=""></a><a href="photos/naufrages/4.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/4.jpg" alt=""></a><a href="photos/naufrages/5.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/5.jpg" alt=""></a><br>
<br>
</div>
<div id="gallery">
<a href="photos/naufrages/6.jpg" class="light" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/6.jpg" alt=""></a><a href="photos/naufrages/7.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/7.jpg" alt=""></a><a href="photos/naufrages/8.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/8.jpg" alt=""></a><a href="photos/naufrages/9.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/9.jpg" alt=""></a><a href="photos/naufrages/10.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/10.jpg" alt=""></a><br>
<br>
</div>
<div id="gallery"><a href="photos/naufrages/11.jpg" class="light" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/11.jpg" alt=""></a><a href="photos/naufrages/12.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/12.jpg" alt=""></a><a href="photos/naufrages/13.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/13.jpg" alt=""></a><a href="photos/naufrages/14.jpg" title="Image 1"><img style="width: 120px; height: 120px;" src="photos/naufrages/14.jpg" alt=""></a><br>
<br>
</div>
<div style="text-align: center;"><a href="naufrages2.html"><span style="color: rgb(255, 255, 255);">Page suivante</span></a>
</div>
<div id="menu">
<dl style="color: rgb(255, 255, 255);">
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt style="color: rgb(255, 255, 255);" onmouseover="javascript:montre('smenu1');">Galerie
Photos</dt>
<dd style="color: rgb(255, 255, 255);" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="http://pierreberenger.free.fr/naufrages.html">Naufragés
de l'Arche</a></li>
<li><a href="index.html">L'oeil Oiseau</a></li>
<li><a href="#">Cotentin Nord-Ouest</a></li>
<li><a href="#">Portraits d'artistes</a></li>
<li><a href="#">Normandie</a></li>
<li><a href="#">Archives</a></li>
</ul>
</dd>
</dl>
<br>
</div>
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
</div>
</div>
</body>
</html>
[/quote]
A la fin de ce code, il est mentionné quelque chose pour n'utiliser que tel ou tel type de lien, seulement je n'arrive pas à mettre ça en place.
Quelqu'un pourrait-il m'aider à résoudre mon problème?
Merci d'avance
Cordialement, Zuldar