CODEWITHSUNDEEP
javascriptjquery
Aaron McCann
Aaron McCann

Reputation: 11

Using jquery slide panels and javascript lightbox together causing conflict?

I'm using some jQuery to have some sliding panels. It's for a portfolio website I'm building for myself. I have a panel sliding in that contains thumb nails that I want to link to images to be displayed inside of a Lightbox using JavaScript.

When all the scripts are inside my head, the sliding panels work but the Lightbox does not. If I remove the jQuery script link from my head in order to "temporarily disable the sliding panels the Lightbox works properly. I'm assuming that I have some sort conflict, but I am new to jQuery and JavaScript so I don't even know where to begin.

Heres my code inside my head tags.

<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js2/lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js1/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js1/slidepanels.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />

Upvotes: 1

Views: 623

Answers (2)

korywka
korywka

Reputation: 7653

pfff why do u use jquery+prototype? they do almost the same things. better to find jquery lightbox and remove prototype. or use prototype, but not both.

Upvotes: 0

Steve Lewis
Steve Lewis

Reputation: 1302

You should include JQuery before Prototype, and then switch it into NoConflict mode.

After this, load Prototype / Scriptaculous and see if that works.

Upvotes: 1

Related Questions