Photo Gallery

The components of the player, the file structure, the XML and HTML file, the setups, and the bug reporting tools will be explained in detail in this documentation.

Download the Photo Gallery Starter Kit

Photo Gallery – Page View

Preview of the Photo Gallery - Page View

  1. Gallery page title
  2. Gallery page description
  3. Image pop-over – shows details of the current image.
    Image pop-over will show up only on desktop/laptop web browsers when the mouse cursor is over the image thumbnail. On mobile devices, tap the image thumbnail to see the title and description of the image in full view.
  4. Image title
  5. A snippet of the image description
  6. The image thumbnail – click to show the full image.
  7. Start slideshow button – click to view the gallery as a slideshow from the first image.
  8. Client agent indicator – show what devices the photo gallery page is currently viewed on.

Photo Gallery – Full-size Image View

Preview of Photo Gallery - Full-size Image view

  1. The full image
  2. Close button – click to close the full image.
  3. Previous button – hover over this area and the previous button will show up. Click to go to the previous image.
    On mobile devices, tap once to show the button and tap again to go to the previous or next slide.
  4. Next button – hover over this area and the next button will show up. Click to go to the next image.
    On mobile devices, tap once to show the button and tap again to go to the previous or next slide.
  5. Image duration indicator – the duration of image before moving to the next slide.
    The image duration indicator will show up only in slideshow view.
  6. Start Slideshow / Stop button – if the slideshow is started, click to stop. If not, click to start slideshow from the current image.
  7. Image title
  8. Full image description

File Structure

File Structure Diagram

The “source folder” is centralized. Thus no need to worry about where it should go in the directory. An HTML file or the index page is required since the photo gallery will be hosted in D2L via an iFrame. However, in the directory root level, a folder named “assets” is required. In the “assets” folder, two (2) folders and an XML file are required. The two (2) folders inside the “assets” folder are named “thumbs” and “images.”

  • The XML file should be named “gallery.xml“.
  • thumbs” folder contains all of the photo thumbnail images.
  • images” folder contains all of the full resolution images.

The file structure follows the UWEX multimedia team’s standards and naming conventions. The file and folder names should always be in lowercase letters with no spaces.

XML File

The following is how the XML file should be set up.

<?xml version="1.0" encoding="UTF-8"?>
<gallery>
 
    <!-- Gallery Setup -->
    <setup>
    
        <!-- the page title of the gallery -->
        <galleryTitle>Gallery Demo</galleryTitle>
        
        <!-- the description of the gallery; use <![CDATA[ ... ]]> for HTML elements -->
        <galleryDescription><![CDATA[<p>A description of the gallery goes here. Donec rhoncus pulvinar vehicula. Etiam pellentesque, leo ac ultrices sagittis, justo orci dignissim lacus, sed sollicitudin metus arcu id dolor. Nam lobortis tincidunt elit, ut iaculis nibh congue at. In tempus dignissim ligula, eget interdum diam ultrices vitae. Donec faucibus ultrices turpis vel sagittis.</p>]]></galleryDescription>
        
        <!-- the type of image: jpg, gif, or png will defaulted to png if not specified -->
        <imgFormat />
        
        <!-- the duration between each slide; will defaulted to 6 seconds if not specified -->
        <slideDuration />
    
    </setup>
    
    <!-- ROW 1 -->
    <image fileName="whiteLion">
    	<title>White Lion</title>
        <description><![CDATA[<p>The white lion is not a distinct subspecies, but a special morph with a genetic condition, leucism, that causes paler colouration akin to that of the white tiger; the condition is similar to melanism, which causes black panthers. They are not albinos, having normal pigmentation in the eyes and skin.</p>]]></description>
    </image>
    
    <image fileName="whiteTiger">
    	<title>White Tiger</title>
        <description><![CDATA[<p>A white tiger is caused by the homozygous occurrence of a recessive allele in the genome. Estimations show that around one in 15,000 wild Bengal tiger births will result in a white tiger.</p>]]></description>
    </image>
    
    <image fileName="stripelessWhiteTiger">
    	<title>Stripeless White Tiger</title>
        <description><![CDATA[<p>An additional genetic condition can remove most of the striping of a white tiger, making the animal almost pure white. One such specimen was exhibited at Exeter Change in England in 1820, and described by Georges Cuvier as "A white variety of Tiger is sometimes seen, with the stripes very opaque, and not to be observed except in certain angles of light."</p>]]></description>
    </image>
    
    <image fileName="snowLeopard">
    	<title>Snow Leopard</title>
        <description><![CDATA[<p>The snow leopard (Panthera uncia or Uncia uncia) is a moderately large cat native to the mountain ranges of Central Asia. The classification of this species has been subject to change and is still classified as Uncia uncia by MSW3 as of 2000 and CITES Appendix I. However with more recent genetic studies, the snow leopard is now generally considered as Panthera uncia and classified as such by IUCN.</p>]]></description>
    </image>
    
    <image fileName="whitePersian">
    	<title>White Persian (Cat)</title>
        <description><![CDATA[<p>The Persian is a long-haired breed of cat characterized by its round face and shortened muzzle. Its name refers to Persia, the former name of Iran, where similar cats are found. Recognized by the cat fancy since the late 19th century, it was developed first by the English, and then mainly by American breeders after the Second World War. In Britain, it is called the Longhair or Persian Longhair.</p>]]></description>
    </image>
    
    <!-- ROW 2 -->
    
    <!-- ROW 3 -->
    
    <!-- ROW 4, etc... -->
	
</gallery>

On the Photo Gallery, there are five images per row, and the images are sequentially listed in the XML. The Photo Gallery can have as many rows as needed.

XML Nodes Breakdown

XML file declaration. This is the first line of code and required. No changes should be made to it.

<?XML version="1.0" encoding="UTF-8"?>

Opening gallery node.

<gallery>

Setup Node

<setup>
    	
        <!-- the page title of the gallery -->
        <galleryTitle>Gallery Demo</galleryTitle>
        
        <!-- the description of the gallery; use <![CDATA[ ... ]]> for HTML elements -->
        <galleryDescription><![CDATA[<p>A description of the gallery goes here. Donec rhoncus pulvinar vehicula. Etiam pellentesque, leo ac ultrices sagittis, justo orci dignissim lacus, sed sollicitudin metus arcu id dolor. Nam lobortis tincidunt elit, ut iaculis nibh congue at. In tempus dignissim ligula, eget interdum diam ultrices vitae. Donec faucibus ultrices turpis vel sagittis.</p>]]></galleryDescription>
        
        <!-- the type of image: jpg, gif, or png will defaulted to png if not specified -->
        <imgFormat />
        
        <!-- the duration between each slide; will defaulted to 6 seconds if not specified -->
        <slideDuration />
        
    </setup>

The setup tag has the following inner nodes: title, description, imgFormat, and slideDuration.

  • galleryTitle – holds the photo gallery page title.
  • galleryDescription – holds the photo gallery page description.
  • imgFormat – holds the thumbnail image and full resolution image file type or extension. File types accepted are GIF, JPG, and PNG. If it is not specified or left blank, it will defaulted to PNG, and the imgFormat node can be written as <imgFormat />.
  • slideDuration – holds duration (in seconds) of the slide before moving on to the next.

Image Node

<image fileName="whiteLion">
    	<title>White Lion</title>
        <description><![CDATA[<p>The white lion is not a distinct subspecies, but a special morph with a genetic condition, leucism, that causes paler colouration akin to that of the white tiger; the condition is similar to melanism, which causes black panthers. They are not albinos, having normal pigmentation in the eyes and skin.</p>]]></description>
    </image>

The image node has the attribute of fileName. Inside the image node, there are two inner nodes: title and description.

  • fileName – holds the name of the thumbnail image file AND the full resolution image file. Thus, the thumbnail image and the full resolution image must be named the same.
  • title – holds the title of the image.
  • description – holds the description of the image.

NOTE The <![CDATA[ ... ]]> can be also be used in the title nodes if HTML elements are needed.

Make sure to close the gallery node when you are done listing video nodes.

</gallery>

HTML File

The HTML file MUST be set up the way shown below.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Gallery Demo</title>
<link href="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/photo_gallery/sources/css/gallery.min.css" rel="stylesheet" type="text/css" media="all">
<link href="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/photo_gallery/sources/fancybox/jquery.fancybox.pack.css" rel="stylesheet" type="text/css" media="all" />
</head>
 
<body>
 
<!-- begin gallery -->
<div id="gallery">
 
    <!-- gallery title -->
    <h1 class="title"> </h1>
    
    <!-- gallery description -->
    <div class="description"> </div>
    
    <!-- start slideshow button -->
    <div class="autoOpenPlay"><a class="btn openPlay" href="javascript:void(0);">Start Slideshow</a></div>
    
    <!-- begin images thumbs and decriptions -->
    <div id="images"> </div>
    <!-- end images thumbs and decriptions -->
    
    <footer>
    	<p class="errorMsg"> </p>
        <p class="device">You are viewing this website on </p>
        <p>Copyright © 2012 University of Wisconsin-Extension, Continuing Education, Outreach and E-Learning. All rights reserved.</p>
    </footer>
    
</div>
<!-- end gallery -->
 
<!-- scripts at the end to make page load faster -->
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/photo_gallery/sources/scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/photo_gallery/sources/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/photo_gallery/sources/scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/photo_gallery/sources/scripts/jquery.preloader.min.js" type="text/javascript"></script>
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/photo_gallery/sources/scripts/gallery.min.js" type="text/javascript"></script>
</body>
</html>

Setup (or How to Use) Introduction

Follow the instructions below on how to set up and use the Photo Gallery.

It would be wise to have the thumbnail images and the full resolution image files or embed codes handy before moving on to the next step.

  1. Thumbnail image’s dimensions should be no less and no greater than 150 × 80 pixels.
  2. The full resolution image’s dimensions should be no less than 640 × 360.
  3. The full resolution image’s and thumbnail image’s name must be the same.
  4. Download a copy of the starter kit.
  5. Place the thumbnail images in the “thumbs” folder, which is inside the “assets” folder.
  6. Place the full resolution images in the “images” folder, which is also inside the “assets” folder.
  7. The XML file must be set up the way documented above and named “gallery.xml“.
  8. Place the XML file in the “assets” folder.
  9. The HTML file must be set up the way documented above and named “index.html“.
  10. Place the HTML file in same directory with the “assets” folder.

Upload the HTML file and assets folder to its respective folder on the mediastreamer.


Known Bugs

  • None at the moment; however, please clear your cache when experiencing any abnormal activities.

Bug Reporting

If any bugs are found in the Storybook player, please report them in Basecamp. Login to the website is required. Once logged in, please write a bug report under the Photo Gallery Bugs list, which is under the Bug Reporting (Media Tools and Players). When reporting a bug, please write the report as detailed and specifically as possible. If possible, include screen captures. Also note down the steps to reproduce the bug.


Version Log

Initial release.

Published on September 04, 2013 at 1:29:33 pm CDT. Last modified on June 06, 2018 at 3:55:46 pm CDT.