Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  
</script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
 
  
  
  <div id="gallery">
    
    <div id="slides">
    
    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/1.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/2.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/3.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com" target="_blank"><img src="img/sample_slides/4.jpg" width="920" height="400" alt="side" /></a></div>
      
    </div>
    
    <div id="menu">
    
    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/thumb_1.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_2.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_3.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_4.png" alt="thumbnail" width="85" /></a></li>
    </ul>
    
    
    </div>
    
  </div>
    
</div>
</body>
</html>
 
$(document).ready(function(){
    
    
    var totWidth=0;
    var positions = new Array();
    
    $('#slides .slide').each(function(i){
        
        /* Traverse through all the slides and store their accumulative widths in totWidth */
        
        positions[i]= totWidth;
        totWidth += $(this).width();
        
        /* The positions array contains each slide's commulutative offset from the left part of the container */
        
        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }
        
    });
    
    $('#slides').width(totWidth);
    /* Change the cotnainer div's width to the exact width of all the slides combined */
    $('#menu ul li a').click(function(e,keepScroll){
            /* On a thumbnail click */
            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
            
            var pos = $(this).parent().prevAll('.menuItem').length;
            
            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
      
            /* Start the sliding animation */
            
            e.preventDefault();
            /* Prevent the default action of the link */
            
            
            // Stopping the auto-advance if an icon has been clicked:
            if(!keepScroll) clearInterval(itvl);
    });
    
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */
    
    
  //auto forwarding 
     
    var current=1;
    function autoAdvance()
    {
        if(current==-1) return false;
        
        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);   // [true] will be passed as the keepScroll parameter of the click function on line 28
        current++;
    }
    // The number of seconds auto-advance in:
    
    var changeEvery = 100;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers