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_with_Other_Libraries

From the official jquery site.

I have implemented the first fix.

<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>[/CODE]

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

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)
$("someid") has no properties
[Break on this error] $('someid').style.display = 'none';

And
thickbox.js line 21 $(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