Page tree
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.

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.

    {{gallery:path=/path/to/your/folder/}}
    

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

     

    <ul class="clearing-thumbs clearing-feature" data-clearing>
    <li class="clearing-featured-img">
        <a class="th" href="http://www.bath.ac.uk/about/images/city-lightbox/27899-0336.jpg">
            <img alt="27899-0336" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27899-0336.jpg" data-caption="The Circus was designed by John Wood the Elder. Its architecture is one of the key reasons Bath was awarded the title of World Heritage Site.">
        </a>
    </li>
    <li class="clearing-featured-img">
        <a class="th" href="http://www.bath.ac.uk/about/images/city-lightbox/27899-0569.jpg">
            <img data-caption="Queen's Square is a square of Georgian houses and hosts many attractions during the year, such as French and Italian markets and Boules weekends." alt="27899-0569" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27899-0569.jpg">
        </a>
    </li>
    <li class="clearing-featured-img">
        <a class="th" href="http://www.bath.ac.uk/about/images/city-lightbox/27899-0570.jpg">
            <img data-caption="Theatre Royal is one of the oldest theatres in Britain and was built in 1805." alt="27899-0570" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27899-0570.jpg">
        </a>
    </li>
    <li class="clearing-featured-img">
        <a class="th" href="http://www.bath.ac.uk/about/images/city-lightbox/27899-0583.jpg">
            <img data-caption="Pubs and restaurants on Queen's Street" alt="27899-0583" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27899-0583.jpg">
        </a>
    </li>
    <li>
        <a href="http://www.bath.ac.uk/about/images/city-lightbox/27899-0610.jpg">
            <img data-caption="Bath Guildhall Market has been operating from its current venue since the 16th century." alt="27899-0610" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27899-0610.jpg">
        </a>
    </li>
    
    <li>
        <a href="http://www.bath.ac.uk/about/images/city-lightbox/27959-0249.jpg">
            <img data-caption="Shopping in Bath" alt="27959-0249" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27959-0249.jpg">
        </a>
    </li>
    <li>
        <a href="http://www.bath.ac.uk/about/images/city-lightbox/27899-0610.jpg">
            <img data-caption="Bath Guildhall Market has been operating from its current venue since the 16th century." alt="27899-0610" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27899-0610.jpg">
        </a>
    </li>
    <li>
        <a href="http://www.bath.ac.uk/about/images/city-lightbox/27899-0615.jpg">
            <img data-caption="Pulteney Bridge was built for William Pulteney by Robert Adams. It is best viewed from Parade Gardens park by the crescent weir." alt="27899-0615" src="http://www.bath.ac.uk/about/images/city-lightbox/thumbnails/27899-0615.jpg">
        </a>
    </li>
    </ul>