Timeline-seekbar

Timeline seekbar for the timeline project.

by Ankit Patidar

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div id="listImg1">
       <li class="active" id="start"><img src="http://54.187.229.65/Hub/hub/includes/timthumb/timthumb.php?src=http://54.187.229.65/Hub/hub/storage/contentLibrary/1406151889-Nature_and_People.jpg&a=t&h=150&w=150&zc=3"></li>
       <li><img src="http://54.187.229.65/Hub/hub/includes/timthumb/timthumb.php?src=http://54.187.229.65/Hub/hub/storage/contentLibrary/1406151889-Nature_and_People.jpg&a=t&h=150&w=150&zc=3"></li>
       <li><img src="http://54.187.229.65/Hub/hub/includes/timthumb/timthumb.php?src=http://54.187.229.65/Hub/hub/storage/contentLibrary/1406151889-Nature_and_People.jpg&a=t&h=150&w=150&zc=3"></li>
       <li><img src="http://54.187.229.65/Hub/hub/includes/timthumb/timthumb.php?src=http://54.187.229.65/Hub/hub/storage/contentLibrary/1406151889-Nature_and_People.jpg&a=t&h=150&w=150&zc=3"></li>
       <li><img src="http://54.187.229.65/Hub/hub/includes/timthumb/timthumb.php?src=http://54.187.229.65/Hub/hub/storage/contentLibrary/1406151889-Nature_and_People.jpg&a=t&h=150&w=150&zc=3"></li>
    
    
</div>
           <br>
<input type="text" id="listImg" value="0" style="width:100%">
<input type="range" id="seek-bar" value="0" style="width:100%">

    
    <button>go</button>

CSS

li{display:inline-block}
.active{border:2px solid red}

JavaScript

var seconds;
var timeSlots;
var playInterval;
var seekValue;
var seekbar = document.getElementById("seek-bar");
var seekbarimg = document.getElementById("listImg");
createSeek(60);

function createSeek($seconds){
    timeSlots = 0;
    seekValue = 0;
    seconds = $seconds;
    playInterval = setInterval(playSeek, 1000);
}

function playSeek(){
    timeSlots++;
    seekValue = (timeSlots/seconds) * 100;
    seekbar.value = seekValue;
    seekbarimg.value = seekValue;
    if(timeSlots >= seconds){
        clearInterval(playInterval);
    }
}

var $curr = $( "#start" );
//$curr.css( "border", "1px solid #f99" );
$( "button" ).click(function() {
$curr = $curr.next();
$( "li" ).removeClass( "active" );
$curr.addClass( "active" );
});