Javascript scripts conflicting with each other?

[fuzzybabybunny]

I have two jquery javascript image slider scripts on my website:

A jquery image banner slider at the top.

A jquery image / gallery slider at the bottom.

On this page:

http://victorlinphoto.com/realestate/virtualtours.php

The top slider works but the bottom slider doesn't.

On this page:

http://victorlinphoto.com/realestate/images.php

Both sliders don't work.


I'm pretty much lost. If you look at the code for http://victorlinphoto.com/realestate/virtualtours.php, the code for the lower image/gallery slider is commented out. The moment I remove those comments and make that code active, which is what I did in the second link, http://victorlinphoto.com/realestate/images.php, both sliders get disabled.

I'd obviously like to have both sliders enabled.

Thanks in advance!

 

[aceO07]

On this page:

http://victorlinphoto.com/realestate/images.php

Firebug comes back with this error:

uncaught exception: Syntax error, unrecognized expression: [@rel*=lightbox]

That might be a good place to start. Unfortunately I don't understand it.

 

[PhatoseAlpha]

The @ selector syntax has been removed from jQuery in version 1.3. The lightbox plugin did not update their examples.

When the line is not commented out, it hit the @rel, and jQuery tosses an exception. It doesn't get caught, and the scripts stop running. Thus, the other slider doesn't get started.

Change this:

	<script type="text/javascript">
	$(function() {
		$('a[@rel*=lightbox]').lightBox();
    });
	</script>

to this:

	<script type="text/javascript">
	$(function() {
		$('a[rel*=lightbox]').lightBox();
    });
	</script>

 

[fuzzybabybunny]

Hmmm... removing the @ doesn't work completely in images.php

With the @ removed, I get this error in Chrome:

Uncaught TypeError: Object [object Object] has no method 'lightBox' - jquery.min.js:16
d.d.extend._Deferred.f.resolveWith
d.d.extend.ready
d.c.addEventListener.A


The thing is, the lightBox method is not even defined in jquery.min.js:16, it's defined in jquery.lightbox-0.5.js, but for some reason it's searching for it in jquery.min.js?

If I comment out:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="/js/slides.min.jquery.js"></script>

the lightbox (image slider at bottom) starts working again.

 

[PhatoseAlpha]

Why do you have 2 different versions of jQuery referenced in your page?

	<script type="text/javascript" src="../js/jquery.js"></script>
.....

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

That would definitely cause this error. The first version loads. Then you load the lightbox plugin, which adds the lightbox method to the $ function. Then you load the second version of jQuery, which replaces the $ function - and the lightbox method with it.

replace

	<script type="text/javascript" src="../js/jquery.js"></script>

	<script type="text/javascript" src="../js/jquery.lightbox-0.5.js"></script>
    <script src="../js/jquery.newsslider.js" language="javascript" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script src="/js/slides.min.jquery.js"></script>

with

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.lightbox-0.5.js"></script>
    <script src="../js/jquery.newsslider.js" language="javascript" type="text/javascript"></script>
   	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script src="/js/slides.min.jquery.js"></script>

or better, remove the reference to the jquery.min.js from google, and update your local version of jQuery.