I have this code running from an external script for an image slider for every page on a site.
$(document).ready(function() {
$("#slideshow").show();
$('#slider1').anythingSlider({
buildNavigation: false,
delay: 8000
})
On one of the pages I don't want the image slider to rotate automatically so I need to add an extra variable. I've put a class on the body of the page and want to do something along the lines of...
If the body has a class of 'partnerCharitiesDetail' then run this script instead of the generic one
This is what I have tried below (without success). I have 2 questions really,
1) What happens in jQuery when there are 2 identical scripts running (like this example), will it overwrite the older one with the newer one?
2) Where am I going wrong?! Is my approach the best way to do it?
$(document).ready(function() {
$("#slideshow").show();
$('#slider1').anythingSlider({
buildNavigation: false,
delay: 8000
})
if ($('body.partnerCharitiesDetail').length > 0){
$('#slider1').anythingSlider({
buildNavigation: false,
delay: 8000,
startStopped: false
})
}
Thanks!
Use the hasClass()
method to check if an element has a certain class.
Also, your code is a little repetitive (and could even cause AnythingSlider to run twice) — I would write it like this instead:
$(document).ready(function() {
// Initialize options first
var options = {
buildNavigation: false,
delay: 8000
};
// Only disable startStopped if the body has this class
if ($('body').hasClass('partnerCharitiesDetail')) {
options.startStopped = false;
}
// Show the #slideshow element and start the slideshow
$('#slideshow').show();
$('#slider1').anythingSlider(options);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With