prototype.js and jquery.js conflict problems? (Lightbox and Thickbox) simple?

iseee01 · 08-01-2007, 02:51 PM

I will try to be as specific as possible in describing the issue.

I am running both lightbox (which uses prototype and scriptalicious) and thickbox (which uses jquery.js) on my site.

lightbox 2 works fine.
Lightbox 2:
huddletogether.com/projects/lightbox2/

thickbox is installed but works fine.
Thickbox:
jquery.com/demo/thickbox/

Implementation instructions are on the sites above (respectively). I have double checked they are both installed correctly, I think they are!

None of the scripts work when both are installed together, however this fix is supposed to make them work together without conflict.

http://docs.jquery.com/Using_jQuery_...ther_Libraries

From the official jquery site.

I have implemented the first fix.

[QUOTE}The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, "global" objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses "$" as a shortcut for "jQuery"
However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

Code:

<html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').style.display = 'none';
   </script>
 </head>
 <body></body>
 </html>

This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.[/QUOTE]

I am wandering If I have implemented this fix rignt, simply by adding that script above int he head section of my site.

You may view the source of my site to see if I am going wrong as far as implementing this fix goes, and to find a solution as to how I can go about fixing this.

Section removed by WA as user requested

The problem lines are:

advertising.php (line 55)

Quote:

$("someid") has no properties
[Break on this error] $('someid').style.display = 'none';

And
thickbox.js line 21

Quote:

$(domChunk) has no properties
tb_init("a.thickbox, area.thickbox, input.thickbox")thickbox.js (line 21)
(no name)()thickbox.js (line 14)
to the wait list jQuery.readyList.push()jquery.js (line 1534)
(no name)()jquery.js (line 1558)
each([function(), function()], function(), undefined)jquery.js (line 339)
ready()jquery.js (line 1557)
[Break on this error] $(domChunk).click(function(){

I know Lightbox and Thickbox can work together - im just not sure how

Im a complete javascript novice as you may have guessed!

Thank you in advance for your help and suggestions,

Kind Regards

iseee01 · 08-02-2007, 12:06 AM

I managed to fix this, I Replaced all $ in thickbox.js with jQuery and removed the example code below noConflict call.

taffy006 · 01-17-2008, 02:37 AM

could you post your fix? I am trying to use the scrollpane.js which uses jQuery and slimbox which uses prototype.js

can't seem to get them to coexist....

DeadlyDave · 02-07-2008, 02:14 PM

Step 1. In your html file put:

<script type="text/javascript" src="path-to/prototype.js"></script>
<script type="text/javascript" src="path-to/scriptaculous.js"></script>
<script type="text/javascript" src="path-to/jquery.js" charset="utf-8"></script>
<script>jQuery.noConflict();</script>

(followed by your Thickbox & Lightbox javascript includes...)

Step 2. In the thickbox.js add the following lines of code...

At the top, add the following red text line:

var tb_pathToImage = "path-to-images/loadingAnimation.gif";

/*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/

(function($) { //* hide the namespace

......And then at the very bottom (end of file) add:

})(jQuery); //* hide the namespace

That should work... This fix seems to allow the '$' dollar sign to be exchanged for 'jQuery' in the thickbox.js and so avoids conflicts with the prototype javascript library.

NB. I was using the uncompressed version of Thickbox.
Versions I tested and got working are:
Thickbox 3.1
Lightbox 2.03.3
Prototype 1.6.0
JQuery 1.2.2

Hope that helps!

A1ien51 · 02-07-2008, 03:07 PM

All I can say is I hope you are using the compressed versions of all the libraries because that is a lot of JavaScript code that has to be downloaded to the client!

Eric

DeadlyDave · 02-07-2008, 04:27 PM

Just tried it on the compressed version of thickbox.js - and it works!

... Funnily enough its even easier to paste the code 'fix' into the compressed version, as everything else is on 1 big line of code!

(function($) {
eval(function(p,a,c,k,e,r).............
})(jQuery);

crabom · 10-11-2008, 04:45 AM

I had same problem when includes both Lightbox and Yshout5 (Ajax shoutbox using Yshout.js + Jquery.js ) in one page
None of the scripts work when both are installed together.
Can anyone fix this for me?
Thank you very much

sjames0077 · 01-22-2011, 10:11 PM

I have a query.js and a lightbox.js javascripts running on the same page and they are conflicting. They both work great separately but when combined the scripts stop working.

I've reference'd this solution:

<script>
jQuery.noConflict();

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>

However, I am unsure of what to do with it. The forum referenced changing the name of the 'someid' but I don't know what to change it to.

Here are my conflicting codes:

<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>

<script>
jQuery.noConflict();

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.boxgrid.caption').hover(function(){
jQuery(".cover", this).stop().animate({top:'50px'},{queue:false,duration:160});
}, function() {
jQuery(".cover", this).stop().animate({top:'300px'},{queue:false,duration:160});
});
});
</script>

Thanks for any help I'm so lost

venegal · 01-23-2011, 04:53 AM

If that's indeed the order you are using:

You can't make any calls to jQuery before actually including it.

sjames0077 · 01-23-2011, 04:58 AM

I was able to move the jQuery above like this:

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

<script type="text/javascript">
jQuery.noConflict();
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.boxgrid.caption').hover(function(){
jQuery(".cover", this).stop().animate({top:'50px'},{queue:false,duration:160});
}, function() {
jQuery(".cover", this).stop().animate({top:'300px'},{queue:false,duration:160});
});
});

</script>

Still not getting the jQuery to function, however the lightbox script does work now. ... Ideas ?

venegal · 01-25-2011, 10:20 AM

Can you show this on an example site?

sjames0077 · 01-25-2011, 11:39 AM

http://www.bluebarngraphics.com/baboo/

venegal · 01-25-2011, 12:52 PM

Hm, I don't see your code in there. I actually meant an example site with your code not working properly, so we can debug it.

And please describe in detail what you expect it do do, and what it's actually doing.

Dwhitte · 10-24-2011, 07:10 PM

Hello,

I'm new to JQuery but have an issue when using JQuery script with Lightbox.
Slider.js works fine until I add lightbox script. I'm not sure what I need to do to get these to work together. Thank you.
- Dave

current sample site (with conflict):
http://davidkwhittemore.com/default04.php

slider.js works (without lightbox script)
http://davidkwhittemore.com/default04_noLightbox.php