jQuery Image Gallery/News Slider with Caption

by g4165262

HTML

<script src="https://sites.google.com/site/amarzr21/js/jquery.scrollTo.js"></script>
<div id="slider">
 
    <div id="mask-gallery">
 
    <ul id="gallery">
        <li><img src="http://www.queness.com/resources/html/newsslider/images/pier1.jpg" width="300" height="186" alt=""/></li>
        <li><img src="http://www.queness.com/resources/html/newsslider/images/pier2.jpg" width="300" height="186" alt=""/></li>
        <li><img src="http://www.queness.com/resources/html/newsslider/images/pier3.jpg" width="300" height="186" alt=""/></li>
 
    </ul>
    </div>
     
    <div id="mask-excerpt">
    <ul id="excerpt">
        <li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
 
        <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
        <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
    </ul>
    </div>
 
</div>
 
<div id="buttons">
    <a href="#" id="btn-prev">prev</a> 
    <a href="#" id="btn-pause">pause</a> 
    <a href="#" id="btn-play">play</a> 
    <a href="#" id="btn-next">next</a>
 
</div>

CSS

#slider {
 
    /* You MUST specify the width and height */
    width:300px;
    height:186px;
    position:relative;  
    overflow:hidden;
}
 
#mask-gallery {
     
    overflow:hidden;    
}
 
#gallery {
     
    /* Clear the list style */
    list-style:none;
    margin:0;
    padding:0;
     
    z-index:0;
     
    /* width = total items multiply with #mask gallery width */
    width:900px;
    overflow:hidden;
}
 
    #gallery li {
 
         
        /* float left, so that the items are arrangged horizontally */
        float:left;
    }
 
 
#mask-excerpt {
     
    /* Set the position */
    position:absolute;  
    top:0;
    left:0;
    z-index:500;
     
    /* width should be lesser than #slider width */
    width:100px;
    overflow:hidden;    
     
}
     
#excerpt {
    /* Opacity setting for different browsers */
    filter:alpha(opacity=60);
    -moz-opacity:0.6;  
    -khtml-opacity: 0.6;
    opacity: 0.6;  
     
    /* Clear the list style */
    list-style:none;
    margin:0;
    padding:0;
     
    /* Set the position */
    z-index:10;
    position:absolute;
    top:0;
    left:0;
     
    /* Set the style */
    width:100px;
    background-color:#000;
    overflow:hidden;
    font-family:arial;
    font-size:10px;
    color:#fff; 
}
 
    #excerpt li {
        padding:5px;
    }
     
 
 
.clear {
    clear:both; 
}

JavaScript

$(document).ready(function() {
 
    //Speed of the slideshow
    var speed = 5000;
     
    //You have to specify width and height in #slider CSS properties
    //After that, the following script will set the width and height accordingly
    $('#mask-gallery, #gallery li').width($('#slider').width());    
    $('#gallery').width($('#slider').width() * $('#gallery li').length);
    $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
     
    //Assign a timer, so it will run periodically
    var run = setInterval('newsslider(0)', speed);  
     
    $('#gallery li:first, #excerpt li:first').addClass('selected');
 
    //Pause the slidershow with clearInterval
    $('#btn-pause').click(function () {
        clearInterval(run);
        return false;
    });
 
    //Continue the slideshow with setInterval
    $('#btn-play').click(function () {
        run = setInterval('newsslider(0)', speed);  
        return false;
    });
     
    //Next Slide by calling the function
    $('#btn-next').click(function () {
        newsslider(0);  
        return false;
    }); 
 
    //Previous slide by passing prev=1
    $('#btn-prev').click(function () {
        newsslider(1);  
        return false;
    }); 
     
    //Mouse over, pause it, on mouse out, resume the slider show
    $('#slider').hover(
     
        function() {
            clearInterval(run);
        }, 
        function() {
            run = setInterval('newsslider(0)', speed);  
        }
    );  
     
});
 
 
function newsslider(prev) {
 
    //Get the current selected item (with selected class), if none was found, get the first item
    var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
    var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
 
    //if prev is set to 1 (previous item)
    if (prev) {
         
        //Get previous sibling
        var...