prototype.js and jquery.js conflict problems? (Lightbox and Thickbox) simple?
Sam England
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.
On my site, if you click an image on the folowing page (wait until the
page has fully loaded - it may take a while ) you will see lightbox 2
working fine.
ivirtuaforums.com/amd-s-direction-and-next-gen-bulldozer-revealed-
t10594.html
If you go to the bottom of the following page page you will see the
text "AJAX Box"
ivirtuaforums.com/advertising.php
This should open the .htm file in thickbox by use of thickbox.js
It fails to do so.
In firefox firebug Im also getting two errors (for examples sake, on
ivirtuaforums.com/advertising.php - but they are on every page of the
site) - I havent a clue where to start as to how to fix them.
These 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
spea...@gmail.com
I'm not sure if you figured this out yet but here it goes.
You cannot just paste the code example found on the jQuery site. You
need to make a couple of adjustments so it is customized to your
needs.
As the documentation says, the $ character serves as a shortcut for
"jQuery". By using the noConflict() function, any regular jQuery calls
you were making before now need to reference "jQuery" instead of the $
character.
$("div#myDiv").fadeIn("slow");
becomes
jQuery("div#myDiv").fadeIn("slow");
The snippet from jQuery uses "someid" as an example. If you pasted
this code without making changes, it's looking for that "someid"
reference, which I doubt you have used.
I hope that helps.
Stephen
k_443
(domChunk). Did you ever figure out a way to rewrite it so that it
knows the function is defined?