Galleria Helper

The Galleria Helper file contains functions which assist in generating JavaScript code for Galleria, a JavaScript image gallery you can download at https://galleriajs.github.io/. The helper comes in two flavors. In it's first form the helper generates the required JSON array (based on a static meta data text file) and Galleria initialization code, writes the data to disk and returns either a reference to the JavaScript file or the data itself to be inserted in a view file. In it's second form the helper generates the JSON array based on dynamically created meta data, adds initialization code and returns the JavaScript code enclosed in "script" tags.

The Galleria version currently supported is 1.6.1.

Requirements

Images Folder Structure

/myImagesFolder
       myGalleriaCaptions.tsv
       myImage1.png
       myImage2.png
       myImage3.png
       /big
              myImage1.png
              myImage2.png
              myImage3.png
       /thumb
              myImage1.png
              myImage2.png
              myImage3.png

The file name for your image data properties ("myGalleriaCaptions.tsv" in this case) is arbitrary but the "tsv" (tab-separated-values) suffix is mandatory. This file is only needed if you don't provide the data programmatically. If you want to provide separate images for thumbnails and fullscreen mode (recommended) include them in a folder called "thumb" and "big" respectively.

Note: This folder must be writable. Use identical file names for standard, thumbnail and fullscreen versions of your images.

Galleria Framework Modification

There are minor modifications necessary in order for the helper to work properly.

The Image Data File

The image data file you have to provide if you use the helper in it's first form is a simple text file with a "tsv" (tab-separated-values) suffix containing a list of tab delimited Galleria image properties and has the following form for each line:

image file name or video URL or iFrame URL<tab>title<tab>description<tab>image link URL<tab>image HTML layer<tab>IMG element reference[(for videos and iFrames only)<tab>thumbnail file name] (for dynamically generated data prepend the thumbnail file name with a root relative path)

Data File Example


img1.jpg	Image img1 Title	Image img1 Description			<img src="http://mydomain.com/imgs/test.jpg">
img2.jpg	Image img2 Title	Image img2 Description			<img src="http://mydomain.com/imgs/test2.jpg">
img3.jpg	Image img3 Title	Image img3 Description
http://www.youtube.com/watch?v=GCZrz8siv4Q	Video Title	Youtube video Description
img4.jpg	Image img4 Title	Image img4 Description
http://aino.com	iFrame Title	iFrame Description				iFrameThumb.jpg
img5.jpg	Image img5 Title	Image img5 Description

Keep in mind that, if you provide a data file, the only mandatory property is the image file name, video URL or iFrame Url respectively. See Using Image Data https://galleriajs.github.io/docs/references/data.html for further information regarding image data properties.

Note: Using static meta data gallery images are sorted alphabetically. Videos and iFrames are sorted according to the order determined in your meta data file.

Dynamically Generated Image Data

In case you don't want to use static image meta data saved on disk you may create the meta data programmatically for example from data stored in a database. Dynamically generated meta data has the same form as the static image data described above with two exception:

Note: Using dynamically created meta data gallery images are sorted according to the order determined in your meta data.

Loading this Helper

This helper is loaded using the following code:

rigLoadHelper "galleria"

Handler Reference

rigGalleriaData(pGalleryPath, pOptions, pContainerID, pDataVariableName, pCacheBuster, pReplaceDataFile, pReturnReference, pNonce)

This function generates the required JSON array based on a meta data tsv (tab-separated-values) file, adds Galleria initialization code, writes the data to disk and returns either a file reference or the data itself.

Parameters

rigDynamicGalleriaData(pMetaData, pOptions, pContainerID, pDataVariableName, pCacheBuster, pNonce)

This function generates the required JSON array based on dynamically created meta data, adds initialization code and returns the JavaScript code enclosed in "script" tags.

Parameters

Note: If you place more than one gallery on a page you need to include the third and fourth parameter as you need different IDs and variable names for each gallery. This applies to both functions.

Note: Enclose literal Galleria option values with single quotes and double quotes like: put "'galleriaIn'" into tOptions["easing"]. This applies to both functions.

Gallery Example (Using Static Meta Data)

For this example put your gallery images and your image properties file in assets/img/galleriaPics, this path is arbitrary for your own projects though. Download the Galleria framework. Put the file galleria-1.4.7.min.js in assets/js. Assuming you use the Galleria classic theme put a modified version (see above) of galleria.classic.min.js in assets/js. Put a modified version (see above) of galleria.classic.css in assets/css. Create the following view file and let's call it galleriaView.lc:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<title>[[gData["pageTitle"] ]]</title>

		<? return rigCssAsset("galleria.classic.css") ?>

	</head>
	<body>

		<div class="content">
			<div id="galleria"></div>
		</div>

		<? return rigJsAsset("jsGoogleapis-jquery-2.2.4") ?>
		<? return rigJsAsset("galleria-1.6.1.min.js") ?>
		<? return rigJsAsset("galleria.classic.min.js") ?>
		<? return rigGalleriaData("assets/img/galleriaPics") ?>

	</body>
</html>

Note: rigGalleriaData("assets/img/galleriaPics") returns a reference to a Galleria JSON array including Galleria initialization code, or false on failure.

Now create a controller called galleria.lc:

<?lc

put "galleria,index" into gControllerHandlers


command galleria
	rigLoadHelper "asset"
	rigLoadHelper "galleria"
end galleria


command index
	# SET PAGE TITLE
	put "Galleria Helper Example" into gData["pageTitle"]

	# LOAD THE VIEW FILE
	get rigLoadView("galleriaView")
end index



--| END OF galleria.lc
--| Location: ./application/controllers/galleria.lc
----------------------------------------------------------------------

Try it!

To view your gallery, visit your site using a URL similar to this one:

example.com/index.lc/galleria/