Lightbox 2 displays images in New window...
1) Script Title:
Lightbox 2
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm
3) Describe problem:
Hi,
I'm new to this forum. I'm also new to the world of web site coding, including JS.
I have a web page that already has JS in it. I added the js and the CSS for Lightbox 2 in my code. But for some reason, when I click on the thumbnail, the bigger picture is displayed on a new window...
Like I said I have lots of JS in my code. Can the JS for the lightbox2 get confused with all the other JS that I have.
Here's the code for my page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- LIGHTBOX 2 JS -->
<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="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/loopedslider.js"></script>
<script type="text/javascript">
$(document).ready(function (){
// Option set as a global variable
$.fn.loopedSlider.defaults.addPagination = false;
$.fn.loopedSlider.defaults.containerClick = false;
$('#loopedSlider').loopedSlider();
$(".slides div span").css("opacity", "0");
$(".slides div span").hover(function(){
$(this).animate({opacity:".8"}, "fast")
}, function(){
$(this).animate({opacity:"0"}, "fast")
});
});
</script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, h1 a, #loopedSlider .previous, #loopedSlider .next');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<div id="main">
<!-- header -->
<header>
<h1><a href="index.html">Swift</a></h1>
<nav>
<ul>
<li><a href="index.html">ACCUEIL</a></li>
<li><a href="index-1.html">Profil</a></li>
<li><a href="index-2.html">services</a></li>
<li class="current"><a href="produits.html">produits</a></li>
<li><a href="index-3.html">galerie</a></li>
<li><a href="index-4.html">contacts</a></li>
</ul>
</nav>
</header>
<!-- content -->
<section id="content">
<div class="inside">
<div id="banner">
<div class="wrapper">
<h2>VÉHICULE TOUT-TERRAIN</h2>
<p><a href="#"></a><span>Vous chercher une MOTO sÉcuritaire et de qualitÉ... Chez HR PERFORMANCE notre personelle d'expÉrience vous conseillera lors de l'achat de votre MOTO.
Notre prÉoccupation c'est VOTRE satisfaction. HR Performance, Le Centre de la Mini MOTO !
</span></p>
</div>
</div>
</div>
<div id="loopedSlider">
<div class="container">
<div class="slides">
<div> <strong><img src="images/atv.jpg" width="329" height="199"><span>sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod tinci- dunt ut laoreet dolore.<br>
<a href="images/gallery-img2_laf.jpg" width="987" height="509" rel="lightbox">détails</a></span></strong>
<strong><img src="images/ATV-img2.jpg" width="329" height="199"><span>ipsum dolor ser adipiscing elit, sed diam nonummy nibh euismod<br>
<a href="#">read more</a></span></strong>
<strong><img src="images/ATV-img3.jpg" width="329" height="199"><span>tincidunt ut laoreet dolore set.sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod<br>
<a href="#">read more</a></span></strong>
<strong><img src="images/ATV-img4.jpg" width="329" height="199"><span>ut laoreet dolore magna.orem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
<a href="#">read more</a></span></strong>
<strong><img src="images/ATV-img5.jpg" width="329" height="199"><span>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget<br>
<a href="#">read more</a></span></strong>
<strong><img src="images/ATV-img6.jpg" width="329" height="199"><span>Donec sagittis euismod purus. Ut enim ad minima veniam, quis nostrum exercitationem<br>
<a href="#">read more</a></span></strong> </div>
<div> <strong><img src="images/slide-img5.jpg"><span>sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.<br>
<a href="#">read more</a></span></strong> <strong><img src="images/slide-img6.jpg"><span>ipsum dolor ser adipiscing elit, sed diam nonummy nibh euismod<br>
<a href="#">read more</a></span></strong> <strong><img src="images/slide-img7.jpg"><span>tincidunt ut laoreet dolore set.sit amet consectetuer Aadipiscing elit, sed diam nonummy nibh euismod<br>
<a href="#">read more</a></span></strong> <strong><img src="images/slide-img8.jpg"><span>ut laoreet dolore magna.orem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
<a href="#">read more</a></span></strong> <strong><img src="images/slide-img9.jpg"><span>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget<br>
<a href="#">read more</a></span></strong> <strong><img src="images/slide-img10.jpg"><span>Donec sagittis euismod purus. Ut enim ad minima veniam, quis nostrum exercitationem<br>
<a href="#">read more</a></span></strong> </div>
</div>
</div>
<a href="#" class="previous"></a> <a href="#" class="next"></a> </div>
</section>
<!-- footer -->
<footer>
<div class="inside">
<div class="fright">
<!--{%FOOTER_LINK}-->
</div>
HR Performance © 2011 <a href="index-5.html">Privacy Policy</a> </div>
</footer>
</div>
</body>
</html>
Please Help !
Thanks in advance...
Marc
