PDA

View Full Version : Conflicting Javascripts


WotNow
07-02-2011, 12:58 AM
Hi! I have used quite a bit of javascript on this site. There is lightbox, analytics and a sliding navigation. If I use the sliding navigation the lightbox doesn't work and vice versa. Site http://flowersonsavillest.com.au/weddings.html. (http://flowersonsavillest.com.au/weddings.html)

I have not implemented lightbox on the other pages as yet. This site is under construction. Is there a work around for this? Thanks for your time.

gentleone
07-02-2011, 05:38 AM
Using 2 different javascript libraries (scriptaculous for the lightbox and jQuery for the slide-effect) is asking for conflicts. Try the jQuery lightbox alternative.
http://leandrovieira.com/projects/jquery/lightbox/

WotNow
07-02-2011, 09:10 AM
Hi Thanks Gentleone, you always come through for me. I have implemented new JQuery lightbox but am unable to get it to work. Would you mind looking at it for me.

gentleone
07-02-2011, 09:25 AM
check this path, Kimberley cause the lightbox script is not there where you say it is.
<script type="text/javascript" src="LightboxJs/jquery.lightbox-0.4.js"></script>

WotNow
07-02-2011, 09:56 AM
Thanks for that. I was sure I changed that, noticed it was not the same as the supplied code from the website. All working but back to scratch one when I enable sliding navigation script, lightbox doesnt work.

gentleone
07-02-2011, 01:12 PM
can you uncomment the slider_effect.js, but leave (for now) jquery.js in between the comment tags?

Can you also post a link to the page where you got that slider_effect.js script from? Is there a demo on it?

WotNow
07-02-2011, 02:08 PM
Hi this is the link to the sliding navigation http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

Have uncommented sliding navigation effect and commented out lightbox.
Thanks so much for your help with this.

gentleone
07-02-2011, 03:47 PM
Okay... we're going to order things different and delete one call to the jquery library. You have two in there... one is enough.
Replace this:

<!--<script type="text/javascript" src="LightboxJs/jquery.js"></script>
<script type="text/javascript" src="LightboxJs/jquery.lightbox-0.5.js"></script>

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
With this:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript" src="LightboxJs/jquery.lightbox-0.5.js"></script>

<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox();
});
</script>
I've tested it like this locally on my machine and both scripts/effects are working now.

WotNow
07-02-2011, 04:36 PM
Voila! You are awesome! Thanks!

gentleone
07-02-2011, 04:49 PM
you're welcome ;)