CODEWITHSUNDEEP
javascriptjquerycss
user1843335
user1843335

Reputation: 43

Arrangement of javascripts in header file affecting functionality

I have a site where I use some jquery functionalities. On the home page I used Nivo Slider plugin, while on another page I used a Lightbox effect.

In the arrangement of links to the script in my header.php file, I have the lightbox link under Nivo Slider link. Lightbox works but Nivo slider does not work. When I re-arrange, slider works but lightbox does not work.

In this situation LightBox works, but slider does not work

<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>

<script src="js/prototype.js" type="text/javascript"></script>      
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

Is this normal? How can I make both work at the same time.

My Homepage that has the slider is Here

Page that has lightbox is here

Thank you.

Upvotes: 0

Views: 324

Answers (2)

icktoofay
icktoofay

Reputation: 129119

With lots of code from lots of places, some things stop working. One can not simply assume that adding little bits of code that individually work will work when integrated together. In this particular case, jQuery and Prototype are fighting.

This can be fixed by loading only one jQuery at the top, and then including this little snippet:

jQuery.noConflict();

Then jQuery no longer takes over the $ variable. (Your code will also need to account for this change by using jQuery rather than $, but all well-written plugins should interoperate decently with this change.)

After that, you should be able to include Prototype and your other plugins. In theory, anyways.

In practice, Prototype hooks some other things. In your particular case, it's hooking Array.​prototype.​reverse in a way that the jQuery plugins don't expect, and somehow, it's causing a stack overflow. I don't really know how to resolve Prototype's hijacking of that function without breaking one or the other, so you might just want to find a lightbox plugin that works with just jQuery.

Upvotes: 1

Daniel Smith
Daniel Smith

Reputation: 1034

jQuery is not available when you are trying to call it. You could try moving everything to the bottom of the body. Also worth noting that you are loading jQuery twice.

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.min.js"></script>

Upvotes: 0

Related Questions