Lightbox is causing other jQuery to malfunction

JavaScript
1

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:

<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

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

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

No probs.
Thanks for letting us know that this worked for you :slight_smile:

5

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

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

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:

// 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:

//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/854130/jquery-slimbox-rebind-after-ajax-callback

8

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

No problem.
Happy to help :slight_smile:

Nice site, by the way.