Skip to content

ChrisLTD/yo_fading_slideshow

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Yo Fading Slideshow

Version .03 | By Chris Johnson | https://github.com/ChrisLTD/yo_fading_slideshow

Yo Fading Slideshow is a jQuery plugin that uses just two elements on the page and swaps css background-images. It includes next and previous buttons and pill/dot navigation.

Animated Example

Usage Examples

Simple example

<div id="slideshow"></div>

<div class="slide_data" style="display: none;">
  <div data-src="img/yourImage01.jpg">Caption 1</div>
  <div data-src="img/yourImage02.jpg">Caption 2</div>
</div>

<!-- Include JQuery Core above this line -->
<script src="jquery.yofadingslideshow.js"></script>
<script>
$(".slide_data").YoFadingSlideshow();
</script>

Options

'childObject'             : 'div',          // Target object
'slideshowTarget'         : '#slideshow',   // Object to create the slideshow inside of
'shouldAutoAdvance'       : true,           // Should the slideshow auto advance
'autoAdvanceDelay'        : 3000,           // How much time in milliseconds between slides
'startAutoAdvanceDelay'   : 3000,           // How much time in milliseconds before auto-advancing starts
'includeNextPrevious'     : true,           // Display next and previous buttons
'includePills'            : true,           // Display pills navigation
'includeCaptions'         : true,           // Display captions
'pauseOnHover'            : false,          // Pause auto advance on hover
'fadeSpeed'               : 200,            // Speed of fade in miliseconds
'captionAnimationSpeed'   : 200,            // Value for caption animations
'nextText'                : 'Next',         // Text inside of the next link
'previousText'            : 'Previous',     // Text inside of the previous link
'preloadNextImage'        : true,           // Preload possible next image into hidden div
'touchEnabled'            : false,          // enabled the ability to swipe back and forth for navigation, jQuery mobile required
'randomizeSlides'         : false,          // randomize the order of the slides
'initCallback'            : function() {},  // Called if plugin initialized on an object
'beforeSlid'              : function() {},  // Called before the image has changed
'afterSlid'               : function() {}   // Called after the image has changed

Todo

  • Add option to disable the functionality that makes the user wait for the animation to finish before they can start another one

About

Yo Fading Slideshow is a jQuery plugin that uses just two elements on the page and swaps css background-images.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published