Skip to content

Instantly share code, notes, and snippets.

@matherton
Created February 27, 2012 16:44
Show Gist options
  • Save matherton/1925290 to your computer and use it in GitHub Desktop.
Save matherton/1925290 to your computer and use it in GitHub Desktop.
Basic jQuery tools scroll
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-4 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
</div>
<!-- 4-8 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>
<!-- 8-12 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
<script>
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
</body>
</html>
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 585px;
height:150px;
/* custom decorations */
border:1px solid #ccc;
background-color: #f6f3ec;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:600px;
}
/* single scrollable item */
.scrollable img {
float: left;
margin: 20px 2.5px 20px 5px;
background-color: #fff;
padding: 3px;
border: 1px solid #ccc;
width: 130px;
height: 100px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
background:url(hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down {
background:url(../img/scrollable/arrow/vert_large.png) no-repeat;
float: none;
margin: 10px 50px;
}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
@matherton
Copy link
Author

To display the next and previous button you must include the hori_large.png (http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) sprite in the same directory you save the two above files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment