www.webdeveloper.com
Results 1 to 4 of 4

Thread: jquery plugin conflict

  1. #1
    Join Date
    Jul 2010
    Posts
    50

    jquery plugin conflict

    Hi there,

    I have two jquery plugins running.

    JQuery tools and slimbox a lightbox plugin
    Code:
    <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)
    HTML Code:
    <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
    Code:
    $("a[rel]").overlay();
    The other created a lightwindow (simple2.js)
    HTML Code:
    <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
    Code:
    // 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

  2. #2
    Join Date
    Jul 2010
    Posts
    50

    Error

    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?

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    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 ?

  4. #4
    Join Date
    Jul 2010
    Posts
    50
    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:-

    Code:
    $("a.overlay[rel]").overlay();
    Works perfectly

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles