Bulleted Image Gallery Slider

by Nick Hulea

HTML

<div class="main_view" >
    
            <div class="window">    
                <div class="image_reel">

                <img src="http://imagine.wsu.edu/past/2011/images/winners/Behavior-1_3677.jpg" />
                <img src="http://imagine.wsu.edu/past/2011/images/winners/Behavior-1_3677.jpg" />
                <img src="http://imagine.wsu.edu/past/2011/images/winners/Behavior-1_3677.jpg" />
                <img src="http://imagine.wsu.edu/past/2011/images/winners/Behavior-1_3677.jpg" />
                

            </div>
               <div class="paging">
                <a href="#" rel="1">&#8226;</a>
                <a href="#" rel="2">&#8226;</a>
                <a href="#" rel="3">&#8226;</a>
                <a href="#" rel="4">&#8226;</a>
              </div>
          </div>
          </div>

CSS

/*--Main Container--*/
.main_view {
    position: relative;
}

/*--Window/Masking Styles--*/
.window {
    width: 455px;
    height:351px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
    float: left;
    }
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left; border:none; z-index:100;}


/*--Paging Styles--*/
.paging {
    z-index: 1000; /*--Assures the paging stays on the top layer--*/
    text-align: right;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
    padding: 0 15px 15px 0;
    height: 15px;
    background: #000000;
    opacity: 0.7;
    width: 440px;
    margin-top: 282px;
}
.paging a {
    font-weight: normal;
    text-decoration: none;
    color: #981e32;
    height: 5px;
    width: 10px;
    outline:none;
    padding: 3px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 20px;
}
.paging a:hover{
    color:  #ffffff;

}
.paging a.active {
    font-weight: normal;
    color:  #ffffff;

}
.paging a:hover {font-weight: normal;}

JavaScript

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel").animate({ 
            left: -image_reelPosition
        }, 500 );
        
    }; 
    
    //Rotation + Timing Event
    rotateSwitch = function(){        
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 5000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation
    });    
    
    //On Click
    $(".paging a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the...