Wednesday, November 12, 2014

Orbit Javascript code (to modify slideshow setting)

Orbit Foundation Documentation

In order to make modification to the Foundation Orbit slideshow settings, be sure to following the instructions below

1. Comment out the following lines of code near the closing body tag
    <!--<script>
      $(document).foundation();
    </script>-->

    
2. Add the following javascript code before the closing body tag
   
<!--add for orbit slideshow-->
    <script>
    $(document).foundation({
  orbit: {
 animation: 'fade', // Sets the type of animation used for transitioning between slides, can also be 'fade'
 timer: true, // Does the slider have a timer active? Setting to false disables the timer.
 timer_speed: 5000, // Sets the amount of time in milliseconds before transitioning a slide
      pause_on_hover: true, // Pauses on the current slide while hovering
 resume_on_mouseout: true, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
 navigation_arrows: true,
 slide_number: false,
 bullets: false // Does the slider have bullets visible?
  }
});
    </script>

    
3. Following the provided html comment instructions to make adjustments to various slideshow settings

No comments:

Post a Comment