what would be the proper way to add multiple functions to the jquery $(window).load function declaration?
Question by RandyMorris
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 by Felix Kling
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 by Starx
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
