1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Sélection des types de liens ouverts par lightbox

Résolu
ZuldarKeops Messages postés 3 Date d'inscription vendredi 28 mars 2008 Statut Membre Dernière intervention 11 juillet 2008 - 11 juil. 2008 à 14:55
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 - 11 juil. 2008 à 16:09
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

Réponse 1 / 6
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
11 juil. 2008 à 15:27
<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.
3
Réponse 2 / 6
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
11 juil. 2008 à 15:35
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 !
3
Réponse 3 / 6
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
11 juil. 2008 à 15:46
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 :
3
Réponse 4 / 6
ZuldarKeops Messages postés 3 Date d'inscription vendredi 28 mars 2008 Statut Membre Dernière intervention 11 juillet 2008
11 juil. 2008 à 15:35
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
ZuldarKeops Messages postés 3 Date d'inscription vendredi 28 mars 2008 Statut Membre Dernière intervention 11 juillet 2008
11 juil. 2008 à 15:56
Merci beaucoup !!!
Mon truc marche pleinement maintenant. C'est génial, merci.
Bonne fin de journée à vous.
Cordialement, Zuldar.
0
Réponse 6 / 6
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
11 juil. 2008 à 16:09
bonne journée !

a++

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