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">
		<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>

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: 394px;
		height: 266px;
		float:left;
	}
	
	/* 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 {
	
	}

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();		
});

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