This is a message.

Gallery with multiple scrollables

Here is another innovative way of scrolling images. Click on the images to see it in action. Use the left/right keys to navigate between images within a single scrollable:

standalone demo

HTML coding

Here is a setup for a single scrollable. You can have as many of these on your page as you want.

  <!-- scroll #1 -->
<div class="scroll">
<div class="pics">
<div style="background-image:url(my-image-01.jpg)"></div>
<div style="background-image:url(my-image-02.jpg)"></div>
<div style="background-image:url(my-image-03.jpg)"></div>
</div>
</div>

HTML

CSS coding

Here is our CSS code. Nothing really special here. Scrollables are placed side by side with the float: left setting. We have a separate CSS block for the activated scrollable item that can be styled.

    /* root element for single scroll */
.scroll {
position:relative;
overflow:hidden;
width: 348px;
height: 266px;
float:left;
margin-left: 2px;
margin-bottom: 2px;
}
 
/* root element for the scroll pics */
.scroll .pics {
width:20000em;
position:absolute;
clear:both;
}
 
/* single scroll item */
.pics div {
float:left;
cursor:pointer;
width:400px !important;
height:300px;
margin:0px;
}
 
/* possible settings for the active scroll */
.scroll.active {
}


CSS

JavaScript coding

Here we enable our scrollables. All scrollables have the circular configuration option set to true so that there is no beginning or end. We also add a custom click handler which seeks the scrollable forward using the next() method of the Scrollable API.

      // enable circular scrollables with a click handler
$(".scroll").scrollable({ circular: true }).click(function() {
$(this).data("scrollable").next();
});


JavaScript