• View
• Edit
• History
• Attach
• Print
• Backlinks

Galleria

Summary

Galleria can be used to convert bullet lists of images into a set of stylish thumbnails in a carousel, each thumbnail clickable for the full image, without needing to refresh the page with a reload.

Table of contents

Description

Convert lists of images into a panel of clickable thumbnails, or a scrollable carousel of clickable thumbnails, without requiring a page reload.

Comments

Show your support and leave a comment, or check out other user websites, or help out and let me know if you have a suggestion or a problem. Love it or hate it, I'd like to know!

Installation

To install:

• Download either the ZIP or TAR, and extract all files in the pub and the cookbook directory into your pub and cookbook directories respectively. You should end up with a galleria directory in both cookbook and pub. After extracting the files you should have:

 cookbook/galleria/
      |- galleria.php
      |
 pub/galleria/
      |- galleria-X.X.X.js
      |- galleria-X.X.X.min.js
      |- LICENSE
      |
      |- /themes/
                |- classic
                |      |- SEVERAL THEME FILES

 cookbook/galleria.php 

 cookbook/galleria/galleria.php

• Add this line to your config.php:

Usage

Many more examples on solidgone.org.

Use markup to create gallery

Simply create a list of images, and then use the galleria markup to with a reference to the image list using an xpath reference to the list container, or the list itself.

(:div id="demo1":)
* Attach:P5123230.jpg
* Attach:P5123234.jpg
* Attach:P5123241.jpg
(:divend:)
(:galleria list="#demo1")

Class based galleries

Rather than using a markup, you can have galleria applied to all elements with a specific class from config.php. Don't combine this method with the markup -- use one or the other.

include_once("$FarmD/cookbook/galleria/galleria.php");
$HTMLFooterFmt['galleria-global']=galleria();

And then in the page just make sure your image list is within the "galleria" class, or specify an alternate class.

(:div class="galleria":)
* Attach:P5123230.jpg
* Attach:P5123234.jpg
* Attach:P5123241.jpg
(:divend:)

OR

>>galleria<<
* Attach:P5123230.jpg
* Attach:P5123234.jpg
* Attach:P5123241.jpg
>><<

Options

The main option you need to set is list which is the xpath to the image list. In addition you can use any of the options available to Galleria. Options are set within the $galleria array:

• list: The full xpath to the image list container. Use ".pmGalleryWrapper" with pmGallery.
• width/height: The maximum width/height to display the main image.

All options can either set in your config.php, where you know they will apply site wide, or at each (:galleria:) directive.

• Global Options: Options set in config.php will be applied across all galleries. Markup specific values will override global values:

   $galleria['option_name'] = 'value';

• Gallery Specific Options: In order to set options for each gallery, use the markup directive. Only use quotes for string values, or where the value contains spaces.

   (:galleria option_name="STRING" :) 

   (:galleria option_name=BOOLEAN :) 
   (:galleria option_name="FUNCTION" :)  Only available if safe mode is not set

Safe Mode

Some galleria.js options may be javascript functions. Allowing unknown page editors to execute javascript via markup options is potentially unsafe, so Galleria prevents javascript options from being specified as markup options. You can specify these options from config.php. If you have locked down edit access, or trust your editors you can allow javascript based options to be specified from markup by setting $galleria_safe_mode to true.

Unsafe options are:

• dataConfig
• extend

Changing Themes

Galleria comes with a single sample theme, classic. If you load or create additional themes, update the $HTMLHeader with the apprropriate path, before you include the Galleria cookbook:

$HTMLHeaderFmt['galleria-theme'] = '<script type="text/javascript">Galleria.loadTheme("'. $PubDirUrl. '/galleria/themes/classic/galleria.classic.min.js");</script>';

Notes

Galleria is based on:

• The jQuery library Galleria:

Bugs and Suggestions

• bug: Passing string based parameters via markup fails.

Change log / Release notes

v0.5.2 (18-Sep-2011)

''Contributors: DaveG, BruceK

• bug: Fixed conflict with BlogIt function bi_json_encode().
• Update to Galleria 1.2.5.

v0.5.1 (22-Jun-2011)

''Contributors: DaveG

Provides a mechanism for specifying global options in config.php applying across all galleries.

• bug: Passing string based parameters via markup fails.
• chg: Provide a mechanism to specify javascript based options from markup. Use $galleria_safe_mode=false.

v0.5.0 (21-Jun-2011)

Contributors: DaveG, Petko

This upgrade incorporates the latest version of the Galleria javascript library.

• bug: Passing some parameters (like height, and width) caused errors due to use of json_encode. Galleria requires that some attributes be passed as non-text (ie, not quoted). This change allows the use of javascript as parameters, ie for dataConfig.
• chg: Default list to '.galleria' class.
• chg: Update to Galleria 1.2.4.
• chg: Remove galleria.txt from archive, and move galleria.php to cookbook root, rather than a separate Galleria sub-directory. Alter include path:

v0.4.1 (5-May-2011)

Contributors: DaveG

• chg: Ensure $HTMLHeaderFmt values can be overridden by using SDVA (ie, allow jquery to be stored locally).

v0.4.0 (29-Apr-2011)

Contributors: Mauro Bieg, DaveG

Release Summary

This upgrade incorporates the latest version of the Galleria javascript library. It's a significant change, with easier setup, multiple carousels per page, less options to worry about, and optional integration with Lightbox. With simplification we did loose some of the sample skins, and also lost the ability to display vertical carousels.

If you are upgrading, make sure you:

• Remove all current $galleria[] options, except list, height, and width.
• $galleria['list'] should now specify the container for the list of images, not the list itself. So, prrobably a change to remove the

  UL@:
  ** From: [@$galleria['list'

  = 'MY_DIV UL';
  • To: $galleria['list' = 'MY_DIV';
• Replaces the use of Skins, with a theme concept -- only one sample is provided.
• You may need to either add global width and height options, or accept a default of 500px.

Release Details

• chg: Updated documentation.
• chg: Removed use of Carousel script.
• chg: change $gallery['list'] from ".pmGalleryWrapper ul" to ".pmGalleryWrapper"
• chg: Upgraded to Galleria 1.2.3.
  • new: Add option to open allow integration with image 'viewers' like ThickBox, LightBox, etc.
  • new: Allow multiple galleries on a page.
  • Removes the use of Skins. Provides Themes, only one sample provide "Classic".
  • All prior options removed, and ]new options are now added.
  • Loose vertical carousels.
• new: Added defaults for height and width.
• new: Provide mechanism to capture Galleria javascript options from PHP settings.
• bug: IE7 displays the UL list of images briefly before correctly showing the image thumbs.

v0.3.1 (31-Jul-2009)

Contributors: IDB :)

• chg: Corrected version number!

v0.3.0 (8-Dec-08)

Contributors: DaveG

• new: Added fade in/out for caption.

v0.2.0 (8-Dec-08)

Contributors: DaveG

• new: Added dark theme for the PhotoGallery skin.

v0.1.0 (20-Jul-08)

Contributors: DaveG

• Initial beta release.

See also

• Mini with Galleria Galleria carousel/slideshow for the Mini gallery (with that recipe actual thumbnails of the large pictures are used in the trail).