2 separate javascript overriding one another

JavaScript
1

I am using the “lightbox” effect to open my images which uses javascript. I am also using jQuery for the changing banner at the top of the page. Ever since I put the jQuery script in, the “lightbox” script stopped working. When I remove the jQuery script, the “lightbox” script works again. Obviously they are conflicting for some reason. I have included the relevant code below. Can anyone see why this is happening? Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!-- TemplateBeginEditable name="Head" -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Company</title>
<link href="../include/global.css" rel="stylesheet" type="text/css" />
<!-- TemplateEndEditable -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

<body>
<center>
<!-- Top Start --> 
<div class="top"> 
	
    </div>
   
<!-- Top End -->
<div class="wrapper2">
 
<!-- jQuery Start -->
	
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
     // var $sibs  = $active.siblings();
     // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>
2

The prototype library demands the use of the $ variable, so you should tell jQuery to release it after you’ve finished using it.

See: http://api.jquery.com/jQuery.noConflict/

You can do it with:


jQuery.noConflict();
jQuery(function($) {
    setInterval( "slideSwitch()", 5000 );
});

The only potential trouble is, will the slideSwitch function retain knowledge of the passed $ variable when it’s being set that way?

One potential solution is to pass setInterval a function that knows about the $ variable:


jQuery.noConflict();
jQuery(function($) {
    setInterval(function ($) {
        return function () {
            slideSwitch();
        };
    }($), 5000);
});

This hasn’t been tested this yet, but see how it goes.

Failing that, you can use jQuery instead of $ for a guaranteed solution.

3

Thanks for the reply. I tried adding the below snippet of code, but the jQuery slideshow didn’t work. What do you mean I can use jQuery instead of $ for a guaranteed solution? Sorry, Javascript isn’t my strong point.

jQuery.noConflict();
jQuery(function($) {
    setInterval(function ($) {
        return function () {
            slideSwitch();
        };
    }($), 5000);
});
4

That’s because even though the returned function knows about the jQuery value of $, by the time the slideSwitch function is run the prototype one takes over.

Use this instead, where you pass $ to the slideSwitch function:


function slideSwitch($) {
    ...
}
jQuery.noConflict();
jQuery(function($) {
    setTimeout(function () {
        slideSwitch($);
    }, 1000 );
});

It’s either that, or you change the slideSwitch function so that jQuery is used instead of $

5

Thanks again for the reply (I think we’re getting close). Below is what I now have, and it is working, but the jQuery slideshow stops on the 2nd slide (there are a total of 7 slides that it runs through). Any idea on why it stops after the 2nd slide?

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

<script type="text/javascript">

function slideSwitch($) { 

    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
     // var $sibs  = $active.siblings();
     // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
jQuery.noConflict();
jQuery(function($) {
    setTimeout(function () {
        slideSwitch($);
    }, 5000 );
});

</script>
6

Yes. In my testing code I am using setTimeout so that I don’t become harassed and depressed by the constant bombardment of testing alerts.

You can set it back to setInterval so that it continues to trigger all of the time.

7

You just solved my problem 100%. Thanks a lot buddy!! I REALLY appreciate it :slight_smile: