Using Bibble Web Galleries

Top  Previous  Next
Learn more at BibbleLabs.com

Bibble Pro and Bibble Lite allow you to simply and quickly share your images by creating Web Galleries to display your images.  These Galleries can be edited like any other Web Page using an HTML editor, and are fully customizable using CSS Style Sheets to control colors and fonts.

Gallery Styles

There are three Gallery Styles available and a view of the Full Image page included with all three styles.  The styles are:

Columns Style

gallery_columns

Thumbnails are presented in multiple columns, and multiple pages are created when more images are in the gallery that what fits on a single page.

Selecting a thumbnail will show a preview image to the right.

Clicking the preview will show that image in a separate page.

Single Row Style

gallery_row

Thumbnails are presented a single row on a single page of images.

Selecting a thumbnail will show a preview image to the top.

Clicking the preview will show that image in a separate page.

Grid Style

gallery_grid

Thumbnails are presented in a grid filling the screen, and multiple pages are created when more images are in the gallery that what fits on a single page.

Selecting a thumbnail will show that image in a separate page (there is no preview image).

Full Image Page

gallery_full_image

Single image view, with links to the previous and next images.

Basic shooting information is included with the image if your Bibble preferences are set to export EXIF information (default).

IPTC caption shown below the image, and IPTC Image Name shown as the heading,  if your Bibble preferences are set to export IPTC information (default).

Keyboard Navigation

The Galleries created by Bibble offer navigation by mouse-clicks, like any other web gallery, and also allow navigation by using the keyboard.  When viewing your Gallery using a Web Browser, the use the following keys to speed you through your images:

From Gallery Index pages:

 

ARROW Keys: Used to select a thumbnail to view its preview image.  Note, the Grid Gallery style does not include Preview Images.
HOME: Selects the first image in your gallery
END: Selects the last image in your gallery
Page Up: Moves to the Previous Page of thumbnails (not available with Row Style galleries)
Page Down: Moves to the Next Page of thumbnails (not available with Row Style galleries)

From Single Image pages:

 

Left / Right ARROW Keys: Move to the Previous or Next Single Image page
HOME: Returns to the Gallery Index

 

IPTC and EXIF Information

The image name under thumbnail images will show the IPTC Image Name if this has been defined, and if not the filename will be displayed.

The image caption under preview images will show the IPTC Caption if this has been defined, and if not the filename will be displayed.

On the Full Image Page, the Title is set to IPTC Image Name if it is defined, and filename otherwise. The IPTC Caption is shown with basic EXIF shooting information at the bottom of the page.

 

Advanced Gallery Editing

The pages that make up the web gallery are standard HTML, CSS, and Javascript files.  After a Web Gallery has been created by a Web Gallery Batch, you may customize these pages using a Text Editor (like Wordpad or TextEdit).  Changes to the CSS file will allow you to customize the fonts, colors, and layout of the various pages and items within your web gallery, and the changes you make will not be overwritten if you add more images to this gallery in a later Batch conversion.    There is a brief description of the CSS selectors documented within the style.css file.  Changes to index.html will, however, be overwritten during subsequent Batch Conversions.

The style of the gallery is determined by the "style" javascript variable in the index.html file, found towards the bottom of the file, that appears as:

               var style = 3;

You can change this to 1 for Columns, 2 for Single Row, or 3 for Grid styles.  Editing other javascript items is discouraged and not supported.

Creating and Editing Batch Queues

Adjusting Web Gallery Options