Sélection des types de liens ouverts par lightbox [Résolu]

Signaler
Messages postés
3
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
11 juillet 2008
-
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
-
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 :

<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>







Les Naufragés
de l'Arche








[photos/naufrages/1.jpg ][photos/naufrages/2.jpg ][photos/naufrages/3.jpg ][photos/naufrages/4.jpg ][photos/naufrages/5.jpg ]










[photos/naufrages/6.jpg ][photos/naufrages/7.jpg ][photos/naufrages/8.jpg ][photos/naufrages/9.jpg ][photos/naufrages/10.jpg ]









[photos/naufrages/11.jpg ][photos/naufrages/12.jpg ][photos/naufrages/13.jpg ][photos/naufrages/14.jpg ]









[naufrages2.html Page suivante]





* : Accueil


* Galerie
Photos :


<li>Naufragés
de l'Arche</li>

<li>L'oeil Oiseau</li>

<li>Cotentin Nord-Ouest</li>

<li>Portraits d'artistes</li>

<li>Normandie</li>

<li>Archives</li>









<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>







</html>



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

6 réponses

Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
<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>



Ce sont ici les méthodes d'utilisation de l'api. Etant donné que tu les a toutes mises, seule la dernières est prise en compte soit $('a').lightBox(); >> toutes les ancres.
Je te conseilles de virer ces lignes et ne garder que $('a[@rel*=lightbox]').lightBox();
Rajoute ensuite l'attribut rel="lighbox" à toutes tes ancres concerné par lightbox.
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
a la fin c'est un code qui dit que si tu veus que tel ou tel lien soit utiliser il faut utiliser la ligne corespondante enfin je crois !

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
A voir comme ça je ne vois pas d'erreurs.

Essai cette méthode pour voir :




$('a.lightbox').lightBox();

En ajoutant la classe 'lighbox' a tous tes liens :

ex :
Messages postés
3
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
11 juillet 2008

Merci, les liens fonctionnent maintenant mais les images ne s'affichent plus avec la lightbox :p

J'ai laissé ça à la fin comme tu me l'as suggéré :
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>

Et j'ai ajouté les rel="lightbox" comme ça :

[photos/naufrages/1.jpg ][photos/naufrages/2.jpg ][photos/naufrages/3.jpg ][photos/naufrages/4.jpg ][photos/naufrages/5.jpg ]






Ai-je fait une erreur?
Merci d'avance
Cordialement, Zuldar.
Messages postés
3
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
11 juillet 2008

Merci beaucoup !!!
Mon truc marche pleinement maintenant. C'est génial, merci.
Bonne fin de journée à vous.
Cordialement, Zuldar.
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
32
bonne journée !

a++

Si la réponse vous convient, pensez : Réponse acceptée !