Lightbox 2 displays images in New window...

**Laf4sens** · 08-15-2011, 12:22 AM

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 &copy; 2011  &nbsp; &nbsp;<a href="index-5.html">Privacy Policy</a> </div>
   </footer>
</div>
</body>
</html>

Please Help !

Thanks in advance...

Marc

**jscheuer1** · 08-15-2011, 02:30 AM

That doesn't appear to be the version of Lightbox available here on Dynamic Drive, so I've moved this to the javascript forum.

To make a long story short Prototype/Scriptaculous conflict with jQuery. What I would recommend is switching to Slimbox2 for your lightbox functions:

http://www.digitalia.be/software/slimbox2

Slimbox2 does everything the version of Lightbox it appears you are using does with the exception of initializing content that is changed after DOM load. If you need that, use the alternate loading code for Slimbox found here:

http://www.dynamicdrive.com/forums/blog.php?b=247

In any case I would recommend updating to jQuery 1.5.2 or 1.6.2.

**Laf4sens** · 08-15-2011, 12:23 PM

Thanks John for the information...

I've downloaded slimbox2 and added the code to my script. I also put the JS and CSS scripts in the right directories...

But still NO LUCK :-(. The image is still displaying in a new window.

Here's the code:

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">
<!--<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>-->
<script type="text/javascript" src="js/jquery-1.6.2.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>
<!-- SlimBox 2 -->
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<!-- End of SlimBox 2 stuff -->

<!--[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-img1.jpg" rel="lightbox">read more</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 &copy; 2011  &nbsp; &nbsp;<a href="index-5.html">Privacy Policy</a> </div>
   </footer>
</div>
</body>
</html>

Thanks for your help !

Marc.

**jscheuer1** · 08-15-2011, 02:29 PM

Use the jQuery version of Slimbox:

http://www.digitalia.be/software/slimbox2

Download at:

http://code.google.com/p/slimbox/dow...imbox-2.04.zip

Get rid of that mootools version of it.

**Laf4sens** · 08-15-2011, 03:06 PM

Hi,

I've unzipped the slimbox zip file, and there are 2 versions of slimbox2.js...

One of them in the JS directory and the other in SRC, there's also autoload.js in the SRC. Which one do I put in MY JS directory ??

Thanks,

Marc.

**Laf4sens** · 08-15-2011, 03:53 PM

Hi John,

Here's a very basic piece of code that is supose to display the image in the slimbox when you click the link. But again, the image is displayed in a new window.

I have striped everything down is the code, just kept the JS stuff and the link:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<!--<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>-->
<script type="text/javascript" src="js/jquery-1.6.2.js" ></script>
<!-- SlimBox 2 -->
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<!--<script type="text/javascript" src="js/mootools.js"></script> -->
<script type="text/javascript" src="js/slimbox2.js"></script>
<!-- End of SlimBox 2 stuff -->

</head>
<body>

	  <div>
      <a href="images/gallery-img1.jpg" rel="lightbox">read more</a>
      </div>

</body>
</html>

Please advise...

Thanks,

Marc

**jscheuer1** · 08-15-2011, 04:29 PM

Use the one in the js folder.

It looks like you have the wrong version of Slimbox.

Make sure you're using the jQuery version of Slimbox:

http://code.google.com/p/slimbox/dow...imbox-2.04.zip

In its slimbox.js file it looks like so:

Code:

/*
	Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
	(c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
	MIT-style license.
*/
(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequ . . . (code removed)

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
	});
}

Get rid of mootools.js and all files associated with the mootools version of Slimbox. Use the files from the archive linked to in this post.