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