what would be the proper way to add multiple functions to the jquery $(window).load function declaration?

Question

I am using the following javascript to animate two slideshows using the nivo slider object in jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(window).load(function() {  
    $('#sliderone').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
});  
$(window).load(function() {  
    $('#slidertwo').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
});  
</script>    

This code works in internet explorer but not in chrome/firefox. I suspect it is because I am using the $(window).load(function() twice/incorrectly.

Any advice on how this can be properly done would be greatly appreciated.

Answer 1

You only need one declaration of window.load and you can put both functions into it.

$(window).load(function() {  
    $('#sliderone').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });   
    $('#slidertwo').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
});

Answer 2

You can call both functions inside the load function. Perhaps it is better to let jQuery decide when the document is loaded by using the syntax below.

$(function() {

    $("#Slider1"). ..

    $("#Slider2"). ..

});

Answer 3

As the code of the both callbacks is nearly identical, I would refactor it to:

$(window).load(function() {  
    $('#sliderone, #slidertwo').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
});

Also consider to use the document ready event instead: $(document).ready(function(){...}) or short $(function(){...}).

Starx mentioned to use a class instead of IDs, which is also a good advice!

---

Assuming that both sliders should look and work exactly the same, this code makes it way more easier to make changes to them, as you only have make the change once (increases maintainability and readability).

Answer 4

Try using class instead of id. Looks likes all the options are same so you dont need to use the same code twice. Try using class and queuing up multiple window.load function dont create any trouble

Like this

$(window).load(function() {  
    $('.sliders').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
}); 

Now give both yours sliders class sliders