Galleria Plugin
The Galleria Plugin file contains a function that assists in writing JavaScript code for Galleria, a JavaScript image gallery framework made by Aino http://galleria.aino.se/. The function generates the required JSON array including Galleria initialization code and returns a reference to the data file to be inserted in a view file. The Galleria version currently supported is 1.2.5.
Requirements
- JQuery JavaScript file or a reference to the Google Apis CDN (recommended).
- The Galleria Javascript file.
- Galleria theme files (JavaScript and CSS).
- A folder containing at least your gallery images and a text file containing an image file name, optional captions (title and description), an optional image link, optional layer data and an optional refernce to the original IMG element for each image you provide. This folder must be writable. See Using Image Data http://galleria.aino.se/docs/1.2/references/data/ for further information regarding image data properties.
- Optionally you can include in your images folder a folder for thumbnails called "thumb" and a folder for fullscreen mode images called "big".
Images Folder Structure
/myImagesFolder
myGalleriaCaptions.txt
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.txt" in this case) is arbitrary but the "txt" suffix is mandatory. If you want to provide separate images for thumbnails and fullscreen mode (recommended) include them in a folder called "thumb" and "big" respectively. 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 plugin to work properly.
- Remove the suffix of the css property in the JavaScript file of your theme, for example replace css:"galleria.classic.css" with css:"galleria.classic".
- Adjust all URLs in the CSS file of your Galleria theme dependent on where you store theme related images.
The Image Data File
The image data file you have to provide is a simple text file containing a list of tab delimited Galleria image properties and has the following form for each line:
image file name<tab>image title<tab>image description<tab>image link URL<tab>image HTML layer<tab>IMG element reference
Keep in mind that the only mandatory property is the image file name. See Using Image Data http://galleria.aino.se/docs/1.2/references/data/ for further information regarding image data properties.
Loading this Plugin
This plugin is loaded using the following code:
rigLoadPlugin "galleria"
The function:
rigGalleriaData(tGalleryPath, tOptions, tContainerID, tDataVariableName, tCacheBuster, tReplaceDataFile)
The first parameter is a root relative path to the folder containing the gallery images and the image properties file. The second parameter is optional and is an array of pairs of Galleria option names and Galleria option values. See List of Options http://galleria.aino.se/docs/1.2/options/. The default key value pair is "height" and 420. The optional third parameter is the ID of the <div> tag containing the gallery. The default ID is "galleria". The optional fourth parameter is the name of the JSON array data variable needed by Galleria. The default name is "galleriaData". The optional fifth parameter is a boolean which determines whether your gallery should be excluded from cache busting in case use_cacheBusters in system/application/config/config.lc is set to TRUE. The default value is TRUE. The optional sixth parameter is a boolean which determines whether the generated JavaScript file should be replaced every time the function is called. The default value is FALSE.
Note: Enclose literal Galleria option values with single quotes and double quotes like: put "'galleriaIn'" into tOptions["easing"].
Gallery Example
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.2.5.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-1.7.1") ?>
<? return rigJsAsset("galleria-1.2.5.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:
<?rev
global gControllerHandlers, gData
put "galleria,index" into gControllerHandlers
command galleria
rigLoadHelper "asset"
rigLoadPlugin "galleria"
end galleria
command index
# SET PAGE TITLE
put "Galleria Plugin Example" into gData["pageTitle"]
# LOAD THE VIEW FILE
get rigLoadView("galleriaView")
end index
--| END OF galleria.lc
--| Location: ./system/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/