Skip to end of metadata
Go to start of metadata

This macro displays a scrollable image gallery with a lightbox effect from images within the provided folder.

Icon

This macro does not yet support Foundation 4 pages. A workaround is in the comments section below.

 

Usage

Properties required

The bath.macros property must contain lightbox,gallery. The lightbox value must come first as it is used by one of the javascript files include by the gallery value. The macroFiles tag processes this property and includes the necessary Javascript and CSS files.

Macro usage

  1. Add the bath.macros property values as above.
  2. Create a folder where the images will be stored
  3. Within this create a folder called 'thumbnails' where the thumbnails will be stored
  4. Upload your full size images to the first folder using the Title property to add a description. This will be displayed under the image in the lightbox.
  5. Upload the thumbnails to the thumbnails folder. They MUST have the same filename as the corresponding full size image.
  6. Add the macro to your page specifying the pathof your image folder. Make sure you include the trailing slash.

Dimensions and other information

Thumbnails must be 140px wide and landscape.

If javascript is off only the first 4 images are displayed.

The gallery will always be 4 images wide.

Files

The macro can be found at /_admin/tags/gallery.tag. It also requires the following files (included by using the bath.macros property):

  • /common/js/tools.scrollable-1.2.3.min.js
  • /common/js/gallery.js
  • /common/css/gallery.css

1 Comment

  1. Unknown User (mnskchg)

    The gallery macro doesn't currently support the Foundation 4 template for galleries. Here are instructions on how to implement a Foundation 4 gallery until the macro can be switched in. 

    1. Thumbnail sizes are as per the main doc above, in a thumbnail folder. The bath.macro values, CSS JavaScript files from the main instructions above aren't required.
    2. The fragment below is an example that is used on the Foundation 4 version of the About site - http://test.bath.ac.uk/sandbox/about/city/index.html
    3. Ensure they have a class like <li class="clearing-featured-img"> on the first four images.
      1. This will make these will appear as thumbnails on the page.
      2. All the other images are hidden until you expand the gallery.
    4. Captions go on the <img> tag in a data-caption attribute (see example below).

    This gallery is a feature provided by Foundation 4. For more info see Build Your Clearing Lightbox and Start From a Featured Image and Including Captions sections of http://foundation.zurb.com/docs/v/4.3.2/components/clearing.html