Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
<style type="text/css">
img { border: 0 }
.image_reel { list-style: none; }
.image_reel img { width: 200px; } 
a { color: #fc0; }
  
.main_view {
    float: left;
    overflow:hidden;
    position: relative;
    width:280px; 
    height:450px; 
    background-color:black; 
    border:0; 
    margin:2px; 
    padding:2px 0px 2px 0px; 
    text-align:center;
}
.window {
    height:290px;   
    width:200px;
    overflow: hidden;
    position: relative;
    background-color:black; 
    border:0; 
    padding:0px; 
    margin:0px;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
    margin-left:-40px;
}
.image_reel img {float: left;}
​
.botTextBox {
    height:87px;
    width:1800px;
    overflow:hidden;
    position:relative;
    background:url(/content/template_images/black-side-bottom-170x87.png) no-repeat; 
    margin:0px; 
    padding:0px;
}
.botText {
    position:relative;
    top:0; left:0;
    margin:32px 0px 0px 0px; 
    padding:0; 
    text-align:center;
}
.botText p {width:200px; float: left;}
​
.paging {
    position: relative;
    bottom: 70px; right: 0px;
    width: 250px; height:47px;
    z-index: 100; 
    text-align: center;
    line-height: 40px;
    display: block;
  background: red;
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
​
</style>
</head>
<body>
<div class="main_view">
    <div style="width:165px; height:98px; margin:0; padding:0; border:0;">
        <img src="/content/template_images/wanalogo-blackBG-165x98.png" />
    </div>
    <div class="window">
        <ul class="image_reel">
        <li><a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies"><img src="http://i28.tinypic.com/eap7nq.jpg" alt="Phillies" /></a></li>
        <li><a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><img src="http://i34.tinypic.com/2hx50qp.jpg" alt="Eagles" /></a></li>
        <li><a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><img src="http://i34.tinypic.com/2hx50qp.jpg" alt="Flyers" /></a></li>
        <li><a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><img src="http://i34.tinypic.com/2hx50qp.jpg" alt="76ers" /></a></li>
        <li><a href="/NCAA-Basketball" title="NCAA Basketball"><img src="http://i34.tinypic.com/2hx50qp.jpg" alt="NCAA Basketball" /></a></li>
        <li><a href="/Concerts-Tickets" title="Concerts"><img src="http://i34.tinypic.com/2hx50qp.jpg" alt="Concerts" /></a></li>
        <li><a href="/Theatre-Tickets" title="Theatre"><img src="http://i34.tinypic.com/2hx50qp.jpg" alt="Theatre" /></a></li>
        <li><a href="/Other-Events-Tickets" title="Family Events"><img src="http://i34.tinypic.com/2hx50qp.jpg" alt="Family Events" /></a></li>
        </ul>
    </div>
    <div style="width:170px; height:290px; border:0; padding:0; margin: -290px 0px 0px 0px;">
        <img src="/content/template_images/black-fade-border-170x290.png" />
    </div>
    <div class="botTextBox">
        <center>
        <div class="botText">
        <a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies"><p>Phillies</p></a>
        <a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><p>Eagles</p></a>
        <a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><p>Flyers</p></a>
        <a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><p>76ers</p></a>
        <a href="/NCAA-Basketball" title="NCAA Basketball"><p>NCAA Basketball</p></a>
        <a href="/Concerts-Tickets" title="Concerts"><p>Concert</p></a>
        <a href="/Theatre-Tickets" title="Theatre"><p>Theatre</p></a>
        <a href="/Other-Events-Tickets" title="Family Events"><p>Family Event</p></a>
        </div>
        </center>
    </div>
​
</div>
​
</body>
</html>
 
$(document).ready(function() {
 $(".paging").show();
 $(".paging a:first").addClass("active");
​
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size() + 1; // add one, since we are adding the first image to the end
 var imageReelWidth = imageWidth * imageSum;
​
 $(".image_reel, .botTextBox").css({'width' : imageReelWidth });
​
 // clone first image & text and add it to the end, include dummy paging
 $(".image_reel li:first").clone().appendTo( $(".image_reel") );
 $(".botText a:first").clone().appendTo( $(".botText") );
 $(".paging").append('<a href="#" rel="' + imageSum + '"></a>'); // don't include the number in the link
​
 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, .botText").animate({
   left: -image_reelPosition
  }, 1000, function(){
   // callback function (called when animation is done)
   if (triggerID == imageSum - 1) {
    // if we're back to the first image, reset the window position
    $(".image_reel, .botText").css('left',0);
   }
  });
 };
​
 //Rotation  and Timing Event
 rotateSwitch = function(){
  play = setInterval(function(){ //Set timer - this will repeat itself every X seconds
   $active = $('.paging a.active').next(); //Move to the next paging
   if ( $active.length === 0) { // If paging reaches the end...
    $active = $('.paging a:eq(1)'); // go back to second image (the first is now the last)
   }
   rotate(); //Trigger the paging and slider function
  }, 3000); //Timer speed in milliseconds (7 seconds)
 };
​
 rotateSwitch(); //Run function on launch
​
 //On Hover
 $(".image_reel a").hover(function(){
  clearInterval(play); //Stop the rotation
 }, function(){
  rotateSwitch(); //Resume rotation timer
 }); 
​
 //On Click
 $(".paging a").click(function() {
  $active = $(this); //Activate the clicked paging
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation timer
  return false; //Prevent browser jump to link anchor
 });
​
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers