Lightbox pb pop up

Question

26 Jan 2010 à 18:03

Bonjour,

J'utilise lightbox 2 pour la galerie d'un site que je suis en train d'intégrer, mais voilà petit soucis, lorsque je clique sur l'image miniature pour déclencher la pop up, la grande image apparait dans une nouvelle fenêtre. je ne sais pas comment faire pour régler ce pb.
merci de votre aide.
je joins le code ci dessus :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Congrès CJD 2010</title>


<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>



<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery- 1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('a.link').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 800);
setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')
$('a.link').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
function setPosition(check, div, p1, p2, p3, p4) {
if(check==='#box1')
{
$(div).scrollTo(p1, 800);
}
else if(check==='#box2')
{
$(div).scrollTo(p2, 800);
}
else if(check==='#box3')
{
$(div).scrollTo(p3, 800);
}
else
{
$(div).scrollTo(p4, 800);
}
};
</script>


</head>

<body>
<table>
<tr>
<td>
<div id="container">
<div id="header">
<div id="logo"></div>
<ul id="menu">
<li><a id="menu1" href="#box1" class="link"></a></li>
<li><a id="menu2" href="#box2" class="link"></a></li>
<li><a id="menu3" href="#box3" class="link"></a></li>
<li><a id="menu4" href="#box4" class="link"></a></li>
<li><a id="menu5" href="#box5" class="link"></a></li>
<li><a id="menu6" href="#box6" class="link"></a></li>
</ul>
</div>
<div id="wrapper">
<ul id="mask">
<li id="box1" class="box">
<a name="box1"></a>
<div class="content1"><div class="inner">
<h1>THÈME DU CONGRÈS 2010</h1>
<p class="text">
Le CJD a 70 ans.
<br/>
Mais pas de besoin de botox ! Le miracle c’est que le CJD échappe tout processus de vieillissement.
<br/>
Plus que jamais jeune, sans cesse en mouvement, furieusement entreprenant, le CJD a décidé de fêter dignement son anniversaire en réunissant tous ceux qui ont marqué son histoire, JD actuels, anciens et amis.
<br/>
Moment pour saluer la mémoire de son passé riche en événements, mais aussi et surtout vivre le présent et anticiper l’avenir.
<br/>
Qu’est ce qui révolutionne aujourd’hui le métier de chef d’entreprise et porte en germe l’entreprise de demain ? Quels sont les changements de modèles qui sont à l’œuvre et ceux qu’il faut impulser ?
<br/>
Le CJD a toujours considéré l’utopie comme l’inverse du renoncement.
De « Révolutions » à « rêvons l’évolution », ce congrès sera l’occasion d’exprimer nos rêves et nos combats.</p>
</div></div>
</li>

<li id="box2" class="box">
<a name="box2"></a>
<div class="content2"><div class="inner">
<h1>Programme</h1>

</div></div>
</li>

<li id="box3" class="box">
<a name="box3"></a>
<div class="content3"><div class="inner">
</div></div>
</li>

<li id="box4" class="box">
<a name="box4"></a>
<div class="content4"><div class="inner"></div></div>
</li>

<li id="box5" class="box">
<a name="box5"></a>
<div class="content5"><div class="inner"></div></div>
</li>

<li id="box6" class="box">
<a name="box6"></a>
<div class="content6"><div class="inner">
<h1>Galerie</h1>
<div class="thumbnail">
<a href="images/galerie/fullscreen/1.jpg" rel="lightbox Smiley plants

" title="test1."><img src="images/galerie/thumbnails/1.jpg" width="60" height="60" alt="Plants: image 1 0f 5 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/galerie/fullscreen/2.jpg" rel="lightbox Smiley plants

" title="test2" ><img src="images/galerie/thumbnails/2.jpg" width="60" height="60" alt="Plants: image 2 0f 5 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/galerie/fullscreen/3.jpg" rel="lightbox Smiley plants

" title="test3"><img src="images/galerie/thumbnails/3.jpg" width="60" height="60" alt="Plants: image 3 0f 5 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/galerie/fullscreen/4.jpg" rel="lightbox Smiley plants

" title="test4"><img src="images/galerie/thumbnails/4.jpg" width="60" height="60" alt="Plants: image 4 0f 5 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/galerie/fullscreen/5.jpg" rel="lightbox Smiley plants

" title="test4"><img src="images/galerie/thumbnails/5.jpg" width="60" height="60" alt="Plants: image 5 0f 5 thumb" /></a>
</div>
</div></div>
</li>

</ul>
</div>
<div id="entreprise">
</div>
<div id="footer">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Laurie-Anne

27 Jan 2010 à 08:17

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Sujet clos

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

Lightbox pb pop up