slide show

by slawe

HTML

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable" id=chained>   
   
   <!-- root element for the items -->
   <div class="items">

      <!-- 1-5 -->
      <div>
        <img width="470" height="260" src="http://placekitten.com/470/260" alt="" />
        <div class="caption-bkgd"></div>
        <div class="caption">some text here 1</div>
      </div>
      
      <!-- 5-10 -->

      <div>
        <img width="470" height="260" src="http://placekitten.com/469/260" alt="" />
        <div class="caption-bkgd"></div>
        <div class="caption hide">some text here 2</div>
      </div>
      
      <!-- 10-15 -->
      <div>
        <img width="470" height="260" src="http://placekitten.com/468/260" alt="" />
        <div class="caption-bkgd"></div>
        <div class="caption hide">some text here 3</div>
      </div>
       <div>
           <img width="470" height="260" src="http://www.independent.co.uk/incoming/article8465213.ece/ALTERNATES/w620/v2-cute-cat-picture.jpg" alt=""/>
               <div class="caption-bkgd"></div>
        <div class="caption hide">some text here 4</div>
      </div>
      
   </div>
   
</div>

<!-- wrapper for navigator elements -->
<div class="navi"></div>

CSS

a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}
/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 470px;
    height:260px;
    background-color: #d9d9d9;

}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
    height: 260px;
}

.items div {
    float:left;
    width:470px;
    
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:0;
    background-color:#fff;
    width:470px;
    height:260px;
    position: relative;
}

.scrollable img.hover {
    background-color:#123;    
}
.scrollable .caption {
    color: #fff;
    position: absolute; bottom: 12px; 
    padding-left: 18px;
    font: bold 14px arial;
}
.scrollable .caption-bkgd {
    background-color: #000;
    height: 40px;
    position: absolute; bottom: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}


/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}
/* position and dimensions of the navigator */
.navi {
    margin: -26px 0 0 0;
    position: absolute;
    left: 380px;
    width:200px;
    height:13px;
    z-index: 9999;
}
/* NAVIGATOR */
.navi a {
    width:13px; height:13px;
    float:left;
    margin:0 4px;
    background-color: #d9d9d9;
    display:block;
}

.navi a:hover, .navi a.active  {background-color: green;}

.hide{display: none;}

JavaScript

$(document).ready(function() {

$("#chained").scrollable({circular: true, 
                          mousewheel: true,
                          onSeek: function(){
                              $('.caption').fadeIn('fast');
                          },
                          onBeforeSeek: function(){
                              $('.caption').fadeOut('fast');
                          }  
                          }).navigator().autoscroll({
    interval: 3000    
});    
});