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 PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
​
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
​
</head>
<body>
​
<table>
  <tr>
    <td align-"center" valign="middle" style="background:#000;">
​
      <div class="scrollable"> 
​
        <div class="items">
          
  
          <div>
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/001.png"> 
          </div>
​
          <div> 
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/002.png">
          </div>
​
          <div> 
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/003.png">
          </div>
​
          <div> 
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/004.png">
          </div>
​
          <div> 
            <img class="lazy foto" style="height:%;" src="http://thelocalgenius.com/sever/img/005.png">
          </div>
​
          <div> 
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/006.png">
          </div>
​
          <div> 
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/007.png">
          </div>
​
          <div> 
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/008.png">
          </div>
​
          <div> 
            <img style="height:%;" src="/sever/img/009.png">
          </div>
​
          <div> 
            <img style="height:%;" src="http://thelocalgenius.com/sever/img/010.png">
          </div>
​
​
​
        </div>
      </div>
​
    </td>
  </tr>
</table>
​
​
​
<div class="west">
  <a class="prev">ЗАПАД</a> 
</div>
​
<div class="east">
  <a class="next">ВОСТОК</a>
</div>
          
<div class="south">
  <span>ЮГ</a>
</div>
​
<div class="north">
  <span>СЕВЕР</a>
</div>
​
<p class="center">
I need no black space<br>
between the images.
</p>
​
​
</body></html>
 
body {
  margin:0; 
  padding:0;}
​
a {
  text-decoration: none; 
  cursor: pointer;
}
​
table {
  width: 100%; 
  height: 100%; 
  padding: 0; 
  margin: 0; 
  border-collapse: collapse; 
  border: 0;
}
​
td {
  width: 100%; 
  height: 100%; 
  padding: 0; 
  border: solid 1px #f00;
}
​
/* root element for the scrollable. when scrolling occurs this element stays still. */
.scrollable {
  position:relative; 
  overflow:hidden;
  width:100%; 
  height:100%; 
  max-height:1000px;
}
​
/* root element for scrollable items. Must be absolutely positioned
and it should have large width to accommodate scrollable items. */
.scrollable .items {
  width:25000px; 
  height: 100%; 
  position:absolute;
}
​
/* a single item. must be floated in horizontal scrolling. */
.items {float: center;}
​
.items div {
  float: left; 
  width: fit-content;
  padding: 0;
  margin:0;
}
​
.west {
  width: auto; 
  height: auto; 
  position: absolute; 
  left: 5%; 
  top: 50%;
}
​
.east {
  width: auto; 
  height: auto; 
  position: absolute; 
  right: 5%; 
  top: 50%;
}
​
.north {
  width: auto; 
  height: auto; 
  position: absolute; 
  left: 50%; 
  top: 5%;
}
​
.south {
  width: auto; 
  height: auto; 
  position: absolute; 
  left: 50%; 
  bottom: 5%;
}
​
.west a, 
.east a,
.north span,
.south span {
  font-family: 'Roboto Condensed', sans-serif; 
  font-size: 15pt;
  color:#fff;
  text-align: center;
  text-shadow: 0px 0px 10px #000;
}
​
p.center { 
  position: absolute; 
  left: 50%; 
  top: 50%;
  color:#fff;
  font-family: courier;
  font-size: 10pt;  
  line-height: 1.3em;
  font-size:15pt;
}
​
img {
  display:block;
}
 
​
$(window).load(function() {
$(".scrollable").scrollable();
var scrollable = $(".scrollable").data("scrollable");
var api = $(".scrollable").data("scrollable");
api.move(4);
var size = 1;
scrollable.onSeek(function(event, index) {
if (this.getIndex() >= this.getSize() - size) {
$("a.next").addClass("disabled");}});
scrollable.onBeforeSeek(function(event, index) {
if (this.getIndex() >= this.getSize() - size) {
if (index > this.getIndex()) {return false;}}});});
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers