Created
February 27, 2012 16:44
-
-
Save matherton/1925290 to your computer and use it in GitHub Desktop.
Basic jQuery tools scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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