Batch Web Gallery Output

« Previous  Next »
Show/Hide Contents

Bibble 5 allows you to simply and quickly share your images by creating Web Galleries to display your images.  The right side of the Web Gallery settings includes the same Additional Image Options as discussed in the previous section.  There is a second tab on this right panel for Gallery Settings.  These include:

Gallery Type - Choose the layout to use for this Gallery.  See the table below for examples.
Gallery Heading - A text label to show on the top of each Gallery webpage.
Gallery Title - The Title of the gallery, shown in the title bar of the web browser.
Display Metadata - Choose the Metadata Set that you want to include on the details page for each image.
Thumbnail Size - the height and width for thumbnail images
Preview Size - the height and width for preview images

batch-gallery

 

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

 

Metadata 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 = 1;

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.

« Previous  Next »