Image Scrolling Using Jquerry

For this example we can only scroll by clicking on the arrow buttons or using the left and right arrow keys from your keyboard because we are aiming for a minimal setup. It's important to understand how this example works because it teaches you the theory behind HTML scrolling. Understanding this helps you to build any kind of scrolling you want. We are using a very primitive look and feel for most of these demos because we are focusing only on their functionality and not their visual style. On your own pages you can use standard HTML/CSS techniques to style your scrollables.

HTML code

This is how you lay out your scrollables. You must have a root element for the scrollable and inside that another wrapper element for the items. The items can contain anything you want including images, Flash, HTML text and forms. Items can have any amount of child elements and they can be any size. Here we have just simple thumbnail images from www.flickr.com:

<a class="prev browse left">a>


<div class="scrollable">   
   
   
   <div class="items">
   
      
      <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" />
         <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
      div>
      
      
      <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" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      div>
      
      
      <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" />
         <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
      div>
      
   div>
   
div>


<a class="next browse right">a>

Next/prev buttons

The scrollable tool looks for elements whose CSS class name is prev and next and automatically binds the seeking action to them. You can specify other names for the CSS class names to avoid any clashes with your existing CSS.

CSS code

Our example is using two CSS files: scrollable-horizontal.css for basic setup for the scrollable and scrollable-buttons.css for the next/prev action buttons.

Here are the minimal CSS settings for enabling a horizontal scrollable. Except for the width property these settings don't have any impact on the appearance. You will have probably have to tweak your width property yourself to have as many items visible at once as you want.

/*
 root element for the scrollable.
 when scrolling occurs this element stays still.
*/
.scrollable {

 /* required settings */
 position:relative;
 overflow:hidden;
 width: 660px;
 height:90px;
}

/*
 root element for scrollable items. Must be absolutely positioned
 and it should have a extremely large width to accommodate scrollable items.
 it's enough that you set width and height for the root element and
 not for this element.
*/
.scrollable .items {
 /* this cannot be too large */
 width:20000em;
 position:absolute;
}

/*
 a single item. must be floated in horizontal scrolling.
 typically, this element is the one that *you* will style
 the most.
*/
.items div {
 float:left;
}

CSS coding is actually the hardest part of making scrollables and it's recommended that you have more than just a basic understanding of it.

JavaScript setup

This is the easy part. Just select the elements from the page that will be made scrollable. This is achieved with a jQuery selectorfollowed by the scrollable constructor. This constructor accepts a configuration object as the first argument but in this minimal setup we can stick with the default settings.

<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

 // initialize scrollable
 $(".scrollable").scrollable();

});
script>

Show this demo as a standalone page

http://flowplayer.org/tools/demos/scrollable/index.html