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

Galleria

Summary

Galleria can be used to convert simple bullet lists of images into a set of stylish thumbnails, each one 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.

Features

Demo

Basic demo is over at solidgone.org. Demo will be added here when things stablize.

Being used at...

If you're using Galleria, feel free to add your site to this list. Let others see what Galleria can do!

Installation

To install:

• Extract all files in the pub and the cookbook directory from galleria.zipΔ 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.css
      |- jquery.jcarousel.css
      |- jquery.galleria.pack.js
      |- jquery.jcarousel.pack.js
      |- jquery.pack.js
      |
      |- /skins/
                |- tango
                |      |- credits.txt
                |      |- next-horizontal.png
                |      |- next-vertical.png
                |      |- prev-horizontal.png
                |      |- prev-vertical.png
                |      |- skin.css             
                |
                |- ie7
                           |- credits.txt
                           |- loading-small.gif
                           |- loading.gif
                           |- loading_small.gif
                           |- next-horizontal.gif
                           |- prev-horizontal.gif
                           |- skin.css             

• Add this line to your config.php:

Options

Changing Skins

Galleria comes with two skins, tango and ie7. tango is the default skin. Use another skin by adding this line into config.php before the include statement:

Create new skins by using one of these as a base, and changing the css found in pub/galleria/skins/tango or pub/galleria/skins/ie7.

Parameters

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

• In order to set parameters in config.php use this format:

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

• In order to set parameters with the markup directive use this format -- note that quotes are optional, but must be used if the value contains spaces.

   (:galleria parameter_name="value" :) 

Galleria Settings

These parameters are typically used within the markup directive:

• list: The full xpath to the image list UL element. Use ".pmGalleryWrapper ul" with pmGallery.
• image: The full xpath to the element in which you want the main image loaded. Leave this blank galleria will auto-create a div above the list, with the class "galleria_container". Use "#pmGallery_Image" if you've used auto-created groups with pmGallery.
• history: Default is false. If enabled then allows the use of the back button to return to previously viewed images.
• clicknext: Default is true. Clicking on the main image will load the next image in the list.
• fadein: Default is 600. The number of milli-seconds over which to fade-in the main image. Higher numbers result in a slower fade.

Carousel Settings

These parameters are typically used within the markup directive:

• carousel: Default is false. Determines whether to create a carousel like scroller container for the thumbnails.

The following parameters only apply if "carousel" is set to true.

• scroll: Default is 3. The number of images to scroll when the 'previous' and 'next' buttons are clicked. Usually set to the same number as 'visible', or one less than 'visible'.
• visible: Default is 3. The width/height of each thumbnail will be calculated and set depending on the width/height of the clipping, so that exactly that number of thumbnails will be visible.
• vertical: Default is false. Changes the carousel from a left/right style to a up/down style carousel.
• animation: Default is fast. The speed of the thumbnail scroll animation as string in jQuery terms ("slow" or "fast") or milliseconds as an integer. If set to 0, animation is turned off.
• width: Default is 245. The width of the css thumbnail container. This overrides values provided in the skin.
• height: Default is 75. The height of the css thumbnail container. This overrides values provided in the skin.

Examples

See demos on solidgone.org.

Styling

Coming later... (outer and inner classes)

Notes

Galleria is based on:

• The jQuery library Galleria:

• The jQuery library jCarousel:

Bugs and Suggestions

• IE7 displays the UL list of images briefly before correctly showing the image thumbs. In order to prevent this set the height equal to, or slightly larger than the thumbnail height, and the overflow property on the ul containing object. When using PmGallery, this would be:

Change log / Release notes

v0.3.0 (8-Dec-08)

Contributors: DaveG

• Added fade in/out for caption.

v0.2.0 (8-Dec-08)

Contributors: DaveG

• Added dark theme for the PhotoGallery skin.

v0.1.0 (20-Jul-08)

Contributors: DaveG

• Initial beta release.

Comments

See Discussion at Galleria-Talk.