I have a Nivo Slider in my web page header across by website, and that's working fine.

 

I have just put that code in. However, by doing that it has prevented other scripts from working. I have Galleria on a couple of pages, and on a few different ones I have Lightbox2 by Lokesh Dhakar for certain things. These were working fine before I implemented Nivo slider.

 

I have tried in Firefox, IE and Chrome - exactly same problem.

 

Just look at Light box for now: When I click on an image I get taken to a new page with just that image and doesn't seem like the Light box is being loaded or anything. I have tried using Firebug, but in my limited knowledge I am stumped.

 

Website: http://bit.ly/k0FfhR

 

If anyone can point me to my mistake I will be most grateful.

Code in Header

 

<link href="/css/mainstyle.css" rel="stylesheet" type="text/css" />
<link href="/css/lightbox.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/scripts/lightbox.js"></script>
<script type="text/javascript"src="/scripts/jquery.nivo.slider.pack.js"></script>

 

 

Code at end of site

 

<script type="text/javascript">
$(window).load(function() {
   $('#slider').nivoSlider({
       effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
       slices:19, // For slice animations
       boxCols: 8, // For box animations
       boxRows: 4, // For box animations
       animSpeed:500, // Slide transition speed
       pauseTime:3000, // How long each slide will show
       startSlide:0, // Set starting Slide (0 index)
       directionNav:true, // Next & Prev navigation
       directionNavHide:true, // Only show on hover
       controlNav:false, // 1,2,3... navigation
       controlNavThumbs:false, // Use thumbnails for Control Nav
       controlNavThumbsFromRel:false, // Use image rel for thumbs
       controlNavThumbsSearch: '.jpg', // Replace this with...
       controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
       keyboardNav:true, // Use left & right arrows
       pauseOnHover:true, // Stop animation while hovering
       manualAdvance:false, // Force manual transitions
       captionOpacity:0.8, // Universal caption opacity
       prevText: 'Prev', // Prev directionNav text
       nextText: 'Next', // Next directionNav text
       beforeChange: function(){}, // Triggers before a slide transition
       afterChange: function(){}, // Triggers after a slide transition
       slideshowEnd: function(){}, // Triggers after all slides have been shown
       lastSlide: function(){}, // Triggers when last slide is shown
       afterLoad: function(){} // Triggers when slider has loaded
   });
});
</script>

So the scritps are conflicting huh...

It's happened to me before...

You can try and have a look at jQuery no conflict function.

 

Also, change the order of your script files.

 

And maybe also change the code at the bottom of your site from: $(window).load(function() to $(document).ready(function()

or try a different lightbox. Like colorbox for example.

 

Whenever I see scriptaculous there's a conflict issue.

You're using multiple Javascript libraries. You should really only be using one.

 

If you absolutely insist on using Prototype and Jquery, read this: http://forum.jquery.com/topic/jquery-conflicts-with-prototype-and-the-fix

You're using multiple Javascript libraries. You should really only be using one.

 

If you absolutely insist on using Prototype and Jquery, read this: http://forum.jquery.com/topic/jquery-conflicts-with-prototype-and-the-fix

 

But on other page where I don't have lightbox and I have Galleria the Galleria does not work at all. Far as am aware the Lightbox that I am using needs Scriptilous, Prototype and others. May have to check that though.

Try slimbox 2. It's what I use and it uses Jquery. Works perfectly, and it's very lightweight.

Have a look at: - http://api.jquery.com/jQuery.noConflict/

 

Add the jQuery.noConflict():

 

Then Replace all $ with jQuery instead

I will try slimbox 2 now and see what happens.

That's brilliant. Slimbox 2 is working with Nivo. Even Galleria is now working. Thanks all