HTML5 Gallery / Banner with Thumbs

Last Update

27 May 2012

Regular License

$14

Extended License

$70

Sales

67

This gallery was coded for mobile devices and it is 100% mobile compatible and of course it will run just as great on PC. We have tested it on iPad3 and it runs great, you will interact with it as you would with a native app, you can see a video demo at the below link.

Demo on iPad3

The HTML5 Gallery / Banner with Thumbs can be used as a gallery or as a banner rotator, it has 16 transitions included and six of them are simulating the Ken Burns effect, they run really smooth and are implemented using the new HTML5 canvas element.

The entire color theme and skin can be modified and you can have more than one instance of the gallery in the same page (you may have as many galleries as you want in the same page), each instance having different settings and images. The setup and use of this gallery are extremely simple; everything is explained in detail in the help file.

Thumbnail support: this feature is optional, so it allows you to use the gallery with or without thumbs. The thumbs can be positioned top, bottom, left or right and the thumbs images can have any format and size.

Features

Fully XML driven this makes it really easy to install and maintain

Support for multiple instances in the same page: you may have as many galleries as you want in the same page and each one of the galleries / instances has its unique set of images and settings.

Buttons are optional and can be positioned anywhere by setting the x and y position for each of them, this is a unique and useful feature.

The entire color theme can be modified and also the graphics theme can be modified, each button can have different graphics, this mean that you can add your own skins, the buttons size does not have to be specific it will adjust based on the graphic (.jpg or .png) file used.

Support any type of image format (landscape, portrait or whatever)!

16 transition included, six of them are simulating the popular Ken Burns effect, you can see all of them running in the samples.

The transition length and transition delay can be set individually for each image in seconds.

Bulk image preloader, it’s a feature for fast loading and displaying the photos; the images are loading in the background, when you navigate through photos you don’t have to wait for loading pictures because the photos will already be loaded.

Open a new page each big image can have attach to it a url, this mean that if you click or touch up on mobile the big image a new page will open, the target for that window can be set (_self or _blank), please note that this feature can be activated individually for each image or disable it globally for all big images. you can see this feature in action in the last sample, the sample with the purple color theme, when the image is clicked or touched on mobile a new browser window will open.

The gallery width and height can be set to any size, this mean that you can use this gallery in any size you can think of.

The background color can be modified or it can be left transparent.

Thumbnail support, this feature is optional you can use it with or without thumbs, the thumbs can be positioned top, bottom, left or right and the thumbs images can have any format and size.

The thumbs border color, size and space between them can be configured to any value, this also include the animation color theme when a thumb is selected with the mouse or touched with the finger on mobile.

The thumbs can be hidden if the mouse leaves the gallery area and a delay in seconds can be set for this feature, this is also optional, this mean that the thumbs can be hidden once the mouse is not over the component area or always visible.

Slide show autoplay option.

Slide show preloader and images preloader, this preloders are highly customizable, you can change the radius, color theme and position.

The slide show prealoder can be position anywhere by setting it’s x and y position.

Slide show delay can be set individually for each image.

The slide show button is optional this mean that it can be disabled, also the graphics and position for this button can be modified.

Next and previous buttons to navigate between images, as mentioned above the graphics for this buttons can be modified, the position can be set anywhere inside the gallery area, this feature is optional this mean that the next and previous button can be removed.

Description window and description button for each image, this means that you can set a different description for each image, the text has full css support so you can stylize the window as you like. This feature is also optional.

The description for the selected image has full CSS support, it can be styled with a CSS class or with inline CSS . Please note that this window is optional, it can be disabled if you choose so.