cycle2 slideshow

Image pager with progress bar

by Roberto Apasajja

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-pager="#adv-custom-pager"
    data-cycle-pager-template="<a href='#' ><img src='{{src}}' width=40 height=40></a>"
    data-cycle-pause-on-hover=true
    >
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
    <div id="progress"></div>    
</div>
<!-- empty element for pager links -->
<div id="adv-custom-pager" class="center external"></div>

CSS

body {
  background: #ccc;
}
 
.cycle-slideshow img {
    width: 97%; /* allows frame to be visible */
    height: auto;
    display: block;

  border: 4px solid #FFF;  
  margin: 5px;
  overflow: hidden;
   
  -webkit-box-shadow: 3px 3px 3px #111;
          box-shadow: 3px 3px 3px #111;   
}

.center {
text-align: center;
}

.external img{
    position: static;
    opacity:0.6;
    padding:2px;
    
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;    
    
  border: 4px solid #fff;  
  margin: 5px;
  overflow: hidden;
   
  -webkit-box-shadow: 2px 2px 2px #0000AA;
          box-shadow: 2px 2px 2px #0000AA;   
     
}

a.cycle-pager-active img{
    opacity:1;
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);    
}

#progress { 
    position: absolute; 
    bottom: 0; 
    height: 32px; 
    width: 0px; 
    z-index: 500;
    background:url("http://www.joesboats.com/images/PuttPutt.png") no-repeat scroll;
    background-position: center right;
}

JavaScript

var progress = $('#progress'),
    slideshow = $( '.cycle-slideshow' );

slideshow.on( 'cycle-initialized cycle-before', function( e, opts ) {
    progress.stop(true).css( 'width', 0 );
});

slideshow.on( 'cycle-initialized cycle-after', function( e, opts ) {
    if ( ! slideshow.is('.cycle-paused') )
        progress.animate({ width: '125%' }, opts.timeout, 'linear' );
});

slideshow.on( 'cycle-paused', function( e, opts ) {
   progress.stop(); 
});

slideshow.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) {
    progress.animate({ width: '100%' }, timeoutRemaining, 'linear' );
});