I'm using two scripts on single page and I'm not having experience in that. First is slideshow and second is lightbox. When I insert lightbox code (paths to lightbox files) slideshow stops working. Without lightbox everything works fine. Can anyone help me?

 

 

<link href="design.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<!-- InstanceBeginEditable name="head" -->
<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">  
function slideSwitch() {
   var $active = $('#slideshow IMG.active');

   if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

   // use this to pull the images in the order they appear in the markup
   var $next =  $active.next().length ? $active.next()
       : $('#slideshow IMG:first');



   $active.addClass('last-active');

   $next.css({opacity: 0.0})
       .addClass('active')
       .animate({opacity: 1.0}, 1000, function() {
           $active.removeClass('active last-active');
       });
}

$(function() {
   setInterval( "slideSwitch()", 3500 );
});
</script> 

<style type="text/css"> 

/*** set the width and height to match your images **/

#slideshow {
   position:relative;
   height:613px;
}

#slideshow IMG {
   position:absolute;
   top:0;
   left:0;
   z-index:8;
   opacity:0.0;
}

#slideshow IMG.active {
   z-index:10;
   opacity:1.0;
}

#slideshow IMG.last-active {
   z-index:9;
}

</style>  
<!-- InstanceEndEditable -->

Lightbox never works well with jQuery; Lightbox uses the Prototype library, jQuery is a different library, the whole thing just gets messy.

 

Have a quick Google for "jquery lightbox" - there's a free one out there that looks the same and uses jQuery. If you use that, you can take Scriptaculous, Prototype and your current lightbox off your page - that will sort out most of your problems.

 

Incidently, now is a great time to upgrade your version of jQuery - 1.2 is very old. The current version is 1.6 and it's a lot faster and can do more things.

Lightbox never works well with jQuery; Lightbox uses the Prototype library, jQuery is a different library, the whole thing just gets messy.

 

Have a quick Google for "jquery lightbox" - there's a free one out there that looks the same and uses jQuery. If you use that, you can take Scriptaculous, Prototype and your current lightbox off your page - that will sort out most of your problems.

 

Incidently, now is a great time to upgrade your version of jQuery - 1.2 is very old. The current version is 1.6 and it's a lot faster and can do more things.

 

This.

 

Or failing that, you could use jQuery's noConflict to run your scripts without worry of them getting in each other's way.

 

The noConflict allows you to pass control of $ back to the other library, in this case, Prototype.

 

http://api.jquery.com/jQuery.noConflict/

Thanks!!! I've done it.

 

I used jQuery Lightbox, page are loaded faster and everything is simpler. Using prototype.js Lightbox with other scripts is really messy.

Also, I tried noConflict but jQuery Lightbox seems to be better solution.