SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbox is causing other jQuery to malfunction

    I'm sure that I am just missing something simple, but I have been using JFLOW Slider and BXSlider on the same page with no problems or conflicting jquery, but now that I have tried adding lightbox to the page as well it screws up both of the other jquery items, allowing only lightbox to function correctly. I have narrowed it down to which section of the code I believe to be causing the issue because when removed, both WOW Slider and BXSlider work correctly again, however the lightbox does not function correctly without this one line of code. However, if I add it back, ONLY lightbox will function and neither of the other two do. The code below is with everything there, the line that seems to be causing the issue is this one: <script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>

    I also know that multiple jQuery references can cause issues, but I have tried removing a few of the different .js references and looked for duplicate callings but it hasn't solved the issue.

    Here is the code in it's entirety:

    HTML Code:
    <link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script src="scripts/jflow.plus.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    	$(document).ready(function(){
    
    	    $("#myController").jFlow({
    
    			controller: ".jFlowControl", // must be class, use . sign
    
    			slideWrapper : "#jFlowSlider", // must be id, use # sign
    
    			slides: "#mySlides",  // the div where all your sliding divs are nested in
    
    			selectedWrapper: "jFlowSelected",  // just pure text, no sign
    			
    			effect: "flow", //this is the slide effect (rewind or flow)
    
    			width: "1343px",  // this is the width for the content-slider
    
    			height: "218px",  // this is the height for the content-slider
    
    			duration: 400,  // time in milliseconds to transition one slide
    			
    			pause: 5000, //time between transitions
    
    			prev: ".jFlowPrev", // must be class, use . sign
    
    			next: ".jFlowNext", // must be class, use . sign
    
    			auto: true	
    
        });
    
    });
    
    </script>
    
    <link rel="stylesheet" href="lightbox_assets/css/lightbox.css" type="text/css" media="screen" />
    [COLOR="#FF0000"]<script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>[/COLOR]
    <script src="lightbox_assets/js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="lightbox_assets/js/lightbox.js" type="text/javascript"></script>
    
    <script src="scripts/jquery.bxslider.min.js"></script>
    <link href="styles/jquery.bxslider.css" rel="stylesheet" />
    
    <script type="text/javascript">
    $(document).ready(function(){
      $('.bxslider').bxSlider({
    						  adaptiveHeight: true,
    						  adaptiveHeightSpeed: 500,
    						  slideWidth: 100,
    						  height: 150,
    						  minSlides: 1,
    						  maxSlides: 8,
    						  moveSlides: 1,
    						  slideMargin: 15
    						
    						  });
    });
    </script>

    I'd appreciate any help I can get, I'm newer to using jQuery and while I can get these elements to function fine separately, when combined they seem to be conflicting.

    Thank you!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums.

    If you are using the Prototype library, then you are probably using an old version of Lightbox (it was updated to use jQuery a while back).
    Try downloading the latest Lightbox version and use that.

    If that doesn't work, try running jQuery in compatibility mode.
    Prototype overwrites the $ function, which causes problems when using both libraries together.

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!! You were exactly right, I didn't realize the plug in I was using utilized an old version, I went and downloaded slimbox2 and it works like a charm.

    Thanks very much : )

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No probs.
    Thanks for letting us know that this worked for you

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This question might be one for the BXSlider people, but I thought I might try since you nailed that last one. Now that I have it functioning, the images on the bxslider when clicked on are shown in slimbox2, as they should be and each works fine, that is until you click the next or previous arrows on the slider, at which point it causes any of the newly scrolled to images to open in a new window (seemingly removing the rel="lightbox" tag) as each image is scrolled through on the slider. The initial images if you use previous to scroll back to them work correctly, but all of the images scrolled to using the slider (which are actually just the same ones, the bxslider duplicates them as it scrolls) won't open using lightbox anymore, even though they are technically the exact same ones. I would think since it is just re-using the same code for the images as it scrolls that it would keep the rel="lightbox" code but instead it seems to remove it. Any ideas? You can see it in action here: http://www.ryamedia.com on the thumbnail image scroller toward the bottom of the page.

    Thank you again for your help, at least the first group of images are working correctly now.

  6. #6
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even stranger, the previous arrow doesn't cause this issue. It appears only scrolling forward causes it. As long as you scroll to previous all of the images open in lightbox but as soon as you scroll using the forward option the new images produced lose the lightbox feature.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    the problem is that when you scroll the slider, BXSlider is dynamically reinserting the images into the page and you need to rebind the slimbox method to them.

    This will involve a bit of hacking.

    Open the slimbox plugin and change the last few lines from this:

    Code JavaScript:
    // 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({loop:true/* Put custom options here */}, null, function(el) {
    			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    		});
    	});
    }

    to this:

    Code JavaScript:
    //AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    $("a[rel^='lightbox']").livequery(function(){ 
        $(this).slimbox({/* Put custom options here */}, null, function(el) {
        		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        }), function() {
        	//remove slimbox? this is called when elements no longer match
        }
    });}

    Then, download and include the livequery mplugin on your page.

    After that, things will work as expected.

    Here's a demo.

    I hope that helps you.

    Reference: http://stackoverflow.com/questions/8...-ajax-callback

  8. #8
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. You are sharp. I understood the issue to some extent, or at least what was happening, but I had no idea how to bind it, great example and it worked exactly as you said.
    I have only recently ventured out of html, I try to stick to more of the graphic design side of things as that's where my degree is, though I have enjoyed learning more code and working with jquery.
    For the most part, I think I will leave that stuff up to guys like yourself and hire people more gifted in scripting languages. I can appreciate talent when I see it though and thank you so much, very helpful and you explained everything so that I could understand it (our IT guys have some issues in the department of conveying what they mean). Thank you again, that was exactly what was needed.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No problem.
    Happy to help

    Nice site, by the way.


Bookmarks

Posting Permissions

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