You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Another gallery with many scrollables


Scrollable demo 4 / 11 : Another gallery with many 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:


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">
		<img src="http://farm1.static.flickr.com/114/299183878_4feac12b04.jpg" />
		<img src="http://farm1.static.flickr.com/200/507751258_5f13e3d802.jpg" />
		<img src="http://farm1.static.flickr.com/30/37446217_14bc95631a.jpg" />
	</div>
</div>

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 actively scrollabled item that can be styled. 

/* root element for single scroll */
.scroll {
	position:relative;
	overflow:hidden;
	width: 394px;
	height: 266px;
	float:left;
}

/* root element for the scroll pics */
.scroll .pics {
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scroll item */
.pics img {
	float:left;
	cursor:pointer;
	width:400px;
	margin:0px;
}

/* possible settings for the active scroll */
.scroll.active {

}

JavaScript coding

Setting up scrollables is done with a simple one-liner as follows: 

// enable scrolls. a simple magical one liner
$(".scroll").scrollable({size: 1, loop: true});

Here is the standalone version of this demo. You can freely study and copy its source code.