jquery plugin conflict

[zebedeee]

Hi there,

I have two jquery plugins running.

JQuery tools and slimbox a lightbox plugin

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="js/libs/slimbox2.js"></script>

One creates an overlay (jquerytools)

<li><a href="#" class="library" rel="#overtwo"></a></li>
<div class="simple_overlay" id="overtwo">
   <p>Contents of my overlay</p>
</div>

This runs the overlay

$("a[rel]").overlay();

The other created a lightwindow (simple2.js)

<a href="img/slideshow/slide1.png" class="gallery" rel="lightbox"></a>
<a href="img/slideshow/slide2.png" class="gallery" rel="lightbox"></a>

This runs the lightwindow

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		$("a[rel^='lightbox']").slimbox({
			overlayOpacity: 0.6,
			loop: "true"
			}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
	});
}

Both work individually but not on the same page due to both plugins using the re attribute. How can I overcome this issue?

Thank you kind people

[zebedeee]

So after using firebug this is the error that's happening:

uncaught exception: Could not find Overlay: lightbox

I think the overlay is looking for a # at the beginning of the rel for the rel="lightbox" links.

Any ideas how I can over come this?

[007Julien]

You have to change the $("a[rel]").overlay(); to exclude the lightbox, otherwise the plug-in search an element with the id lightbox !

I am not an expert with jQuery. Perhaps $("a[rel][.library]").overlay(); to select only the links with a rel attribut and the class library ?

[zebedeee]

Thank you 007Julien I was being so dull!!!

I added a class to the a.overlay to the overlay triggers and this to the jquery:-

$("a.overlay[rel]").overlay();

Works perfectly