If you have a need to scroll through information on your site, then you will want to take a look at another component available within jQuery Tools: Scrollable. This tool can be used in many different ways, such as video galleries, product catalogues and news tickers—the structure is essentially the same throughout, but jQuery Tools' flexibility allows you to produce different designs, using the power of CSS.
This is the basic structure of Scrollable:
<!-- "previous page" action --> <a class="prev browse left">next</a> <!-- root element for scrollable --> <div class="scrollable"> <!-- root element for the items --> <div class="items"> <!-- 1-3 --> <div> <img src="image1.jpg" /> <img src="image2.jpg" /> <img src="image3.jpg" /> </div> <!-- 4-6 --> <div> <img src="image4.jpg" /> <img src="image5.jpg" /> <img src="image6.jpg" /> </div> <!-- 7-9 --> <div> <img src="image7.jpg" /> <img src="image8.jpg" /> <img src="image9.jpg" /> </div> </div> </div> <!-- "next page" action --> <a class="next browse right">previous</a>
You will see that the structure is made up of a number of images grouped together, encased in a number of div tags, with additional div tags to look after the navigation elements. Although the demo only shows three images per group, you can easily add more images to each group, if desired.
To really show how this could work, let's have a look at an example, which would not be out of place on a hypothetical client's site, such as that of a photographer.
The client has a number of images which need to be displayed on his site—he wants to be able to scroll through each group of images, and then click on one to show it in an enlarged viewer. Sounds simple enough, huh?
To get started, let's put together the basic HTML structure. Open up your favorite text editor, and paste in the following:
<html> <head> </head> <body> <div id="swapframe"> <div id="viewer"> <div class="loadingspin"> <img src="loadinfo.gif" alt="Loading..." /> </div> </div> <div id="caption">x</div> <div id="scrollablecontainer"> <a class="prev browse left"></a> <div id="overscroll"> <div class="items"> <div class="item"> <div> <a rel="odontoglossum" href="images/odontoglossum.jpg"> <img src="thumbnails/odontoglossum_tn.jpg" align="middle" /> </a> </div> <div> <a rel="forest orchid" href="images/forest%2520orchid.jpg"> <img src="thumbnails/forest%2520orchid_tn.jpg" align="middle" /> </a> </div> <div> <a rel="brassia" href="images/brassia.jpg"> <img src="thumbnails/brassia_tn.jpg" align="middle" /> </a> </div> <div> <a rel="paphiopedilum" href=" images/paphiopedilum.jpg"> <img src="thumbnails/paphiopedilum_tn.jpg" align="middle" /> </a> </div> <div> <a rel="zygopetalum" href=" images/zygopetalum.jpg"> <img src="thumbnails/zygopetalum_tn.jpg" align="middle" /> </a> </div> </div> <div class="item"> <div> <a rel="cactus flower" href=" images/cactus%2520flower.jpg"> <img src="thumbnails/cactus%2520flower_tn.jpg" align="middle" /> </a> </div> <div> <a rel="african violet" href=" images/african%2520violet.jpg"> <img src="thumbnails/african%2520violet_tn.jpg" align="middle" /> </a> </div> <div> <a rel="pink camelia" href=" images/pink%2520camelia.jpg "> <img src="thumbnails/pink%2520camelia_tn.jpg" align="middle" /> </a> </div> <div> <a rel="red camelia" href=" images/red%2520camelia.jpg "> <img src="thumbnails/red%2520camelia_tn.jpg" align="middle" /> </a> </div> <div> <a rel="white camelia" href=" images/white%2520camelia.jpg "> <img src="thumbnails/white%2520camelia_tn.jpg" align="middle" /> </a> </div> </div> </div> </div> <a class="next browse right"></a> </div> </div> </body> </html>
In previous examples, we used the template file that we created at the beginning of this chapter. This time around, I've provided the whole example, as there is some additional HTML included here. I've included a loading animated GIF, as well as space for an image caption.
It looks complicated, but in reality it isn't—it's following the same structure shown above, but has a number of additional DIVs enclosing the HTML code; this is largely to allow us to position the results on screen correctly, while still maintaining each element in the right place .
Okay, now that we have the structure in place, let's add in the JavaScript code. Copy in these two lines into your<head> area:
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> <script src= "http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"> </script>
This initiates the calls to the jQuery and jQuery Tools libraries, so you can start to use both. Here comes the critical part of this example, which you can copy in just below the previous lines:
<script>
$(function(){
$.ajaxSetup({
cache: false,
dataType: "text html"
});
$(".loadingspin").bind('ajaxStart', function(){
$(this).show();
}).bind('ajaxComplete', function(){
$(this).hide();
});
$.fn.loadimage = function(src, f){
return this.each(function(){
$("<img />").attr("src", src).appendTo(this).each(function(){
this.onload = f;
});
});
}
$(".item img:first").load(function(){
var firstpic = $(".item a:first").attr("rel");
$("#caption").text(firstpic);
$("#viewer").empty().loadimage("images/" + firstpic + ".jpg").hide().fadeIn('fast'),
});
$(".item a").unbind('click.pic').bind('click.pic', function(e){
e.preventDefault();
var picindex = $(this).attr("rel");
$("#caption").text(picindex);
$("#viewer").empty().loadimage("images/" + picindex + ".jpg").hide().fadeIn('fast'),
});
$("#overscroll").scrollable();
$("a.browse").click(function(){
$("#swapframe").load("ajax/" + state + ".html").hide().fadeIn('fast'),
});
</script>
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);
});
});
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>
These styles are crucial for setting up basic effects, such as providing navigation buttons and the scrollable container.
However, it could use some additional tweaks to make it really stand out. Let's add those in now:
<link href=
'http://fonts.googleapis.com/css?family=Cedarville+Cursive'
rel='stylesheet' type='text/css'>
<style>
#swapframe { height: 540px; width: 640px;
padding: 25px 25px 0 20px; margin: 0 auto;
background: transparent url(slideshow-bg.gif)
no-repeat; background-size: 680px 540px;}
#viewer { height: 355px; background: #000; }
.loadingspin { float: center; margin-top: auto;
margin-bottom: auto; }
#caption { position: relative; top: -10px; width: 200px;
margin: 0 auto; color: #000; text-align: center;
font-size: 30px; font-family: 'Cedarville Cursive',
cursive; padding-bottom: 35px; }
</style>
The code will transform the gallery into something useable; it even includes a handwritten font for the caption, which uses Google™ Fonts. If all is well, you should see something like the following:
This is just a small part of what you can do with Scrollable. You can go further, or even combine Scrollable with other elements of Tools, such as an Overlay, which would show a really impressive effect!