| OR |
« Why And How To Use Video Transitions In Enriching Web Video | Free jQuery For Overlay Dialog Box With Delayed Opening, Free HTML »
|
There is no dearth of ways to design an image gallery. Several of them have been discussed in this blog. Some of the popular ones are as under:
- Create Slideshow With iFrame Tag – Free & Easy
- An All-Purpose Free Versatile Photo Gallery You’ll Love
- Creating Free Photo Gallery Cum Slideshow With Galleria
- How To Create Sleek jQuery Slideshow Using Free JavaScript
- 3 Slideshows With Same jQuery Code – Free & Easy
In this video article a multiple scrollable image gallery is designed using minimal code. Each image below presents a gallery of 3 images. For 4 galleries there are 12 images.
You can make any number of images for each gallery, and have any number of galleries for that matter. In the HTML code below the top gallery is earmarked separately for easy understanding. Scroll down the code to see it.
The multiple image gallery below is created with the help of flowplayer’s scrollable jQuery script.
Click on any image and see how the other images in each gallery slide in. Once clicked, you can also control an image gallery using the left [< ] and right [>] arrows on your keyboard.
-:Image Credit:-
TL: kun-119 TR: livingwithwonderland
BL: robinparker BR: swampa
HTML Code
The HTML is easy and simple. The CSS code is mentioned in the head section. The only outside file referred to is the jQuery JS library. Feel free to copy the code for your use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Multiple Scrollable Image Gallery Demo</title>
<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
</head>
<style>
/* root element for single scroll */
.scroll {
position:relative;
overflow:hidden;
width: 300px;
height: 200px;
float:left;
}
/* root element for the scroll pics */
.scroll .pics {
width:200em;
position:absolute;
clear:both;
}
/* single scroll item */
.pics img {
float:left;
cursor:pointer;
width:300px;
margin:0px;
}
/* possible settings for the active scroll */
.scroll.active {
}
</style>
<body style="margin:0;">
<table border=0 style="padding:0;border:1px solid #999;"><tr><td>
<!-- scroll #1 -->
<div class="scroll">
<div class="pics">
<img src="kun-1119-1.jpg" />
<img src="kun-1119-2.jpg" />
<img src="kun-1119-3.jpg" />
</div>
</div>
<!-- scroll #2 -->
<div class="scroll">
<div class="pics">
<img style="margin:0 0 0 1px;" src="livingwithwonderland-1.jpg" />
<img style="margin:0 0 0 1px;" src="livingwithwonderland-2.jpg" />
<img style="margin:0 0 0 1px;" src="livingwithwonderland-3.jpg" />
</div>
</div>
<div style="clear:both;"></div>
<!-- scroll #3 -->
<div class="scroll">
<div class="pics">
<img style="margin:1px 0 0 0;" src="robinparker-1.jpg" />
<img style="margin:1px 0 0 0;" src="robinparker-2.jpg" />
<img style="margin:1px 0 0 0;" src="robinparker-3.jpg" />
</div>
</div>
<!-- scroll #4 -->
<div class="scroll">
<div class="pics">
<img style="margin:1px 0 0 1px;" src="swampa-1.jpg" />
<img style="margin:1px 0 0 1px;" src="swampa-2.jpg" />
<img style="margin:1px 0 0 1px;" src="swampa-3.jpg" />
</div>
</div>
</td></tr></table>
<br clear="all" />
<script>
// enable scrolls. a simple magical one liner
$(".scroll").scrollable({size: 1, loop: true});
</script>
</body>![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=943185ef-337a-4151-8276-0bba60ad6b3a)
Tags: image gallery, jquery, slideshow
This article of January 16th, 2010 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
