“jbGallery” Image Gallery

• Live Demo

This is a Gallery Script that allows showing a single big image, multiple images, multiple galleries, slideshows, as a site’s background, in a “dialog” mode or as a common pop-up.

JavaScript

In order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code in order to include the jbGallery-2.0.js script and the jQuery framework:

The

Here script attributes define the following values:

• style: ‘centered’ – gallery style (‘ zoom’ or ‘centered’);
• menu: ‘slider’ – menu style (‘slider’ or ‘simple’ or ‘numbers’ or false);
• slideshow: false – enable slideshow (true or false);
• fade: true – enable fade effect (true or false);
• popup: false – show close button (true or false);
• caption: true – show info button in menu (true or false);
• autohide: false – autohide interface (true or false);
• clickable: false – images are clickable (true or false);
• current: 1 – set the initial photo number (true or false).

HTML

There are three kinds of HTML structure.

1. Below you can see general HTML script representation for ‘Minimal Menu’ kind:

2. Below you can see general HTML script representation for ‘Thumbnails – Menu With Slider’ kind:

3. Below you can see general HTML script representation for ‘Caption’ kind:

CSS

You can find script related stylesheet in the main style.css file.

This part of style.css is specifically for ‘Thumbnails – Menu With Slider’ kind of script: