jQuery Tools UI Library by 2012

Author:2012
Language: eng
Format: epub
Publisher: Packt Publishing

This code provides the gallery and scrollable effect, it loads in each image as you click on the thumbnail in the Scrollable. You can even add in an option effect that fades out images, if you are hovering over one:

<script type="text/javascript"> $(function(){ $('.item').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); });

Time for some styles

If you try to run the previous code, it will work, but will look terrible—there will be missing images, and you won't be able to navigate through the Scrollable, for example. This is where the true power of jQuery Tools comes into play, most of the real work is actually done in the CSS styling:

<style> #scrollablecontainer { position: relative; top: -30px; height: 52px; } /* prev, next, up and down buttons */ a.browse { background:url(hori_large.png) no-repeat; display: block; float: left; width: 30px; height: 30px; float: left; margin: 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: 0; } a.left:hover { background-position: -30px 0; } a.left:active { background-position: -60px 0; } /* disabled navigational button */ a.disabled { visibility: hidden !important; } #overscroll { position: relative; float: left; width: 550px; height: 50px; border: 1px solid #ccc; overflow: hidden; } .items { position: absolute; clear: both; width: 20000em; } .item { float: left; width: 550px; } .item div { float: left; width: 100px; height: 40px; margin: 5px; background: #ccc; } </style>

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.