Gallery2:Modules:Lightbox

This page is about the Light Box Integration with Gallery

Introduction

This page is a tutorial on how to modify your theme to add lightbox functionality, a module to add lightbox easily without file modification (coming soon) and the default gallery themes already modified for lightbox integration (some).

You can get more information on the Lightbox JavaScript Here

Differences

Module

The Module is simple and does not require any file modifications, the main default is that it makes a button underneath the picture to launch the Lightbox as opposed to replacing the default clicking behavior.

Theme Mod (following the tutorial provided here)

This will also work with any existing theme but requires modifications to the theme files

Existing Themes Modded

These are the default Gallery themes (or popular themes) already modified to be used with lightbox for convenience, the only drawback is that they are raw themes, no modification have been made so customization will have to be re-doneif their were any.

Tutorial

Steps by Steps: Editing a Specific Theme to make it use the LightBox Javascript

Basics

1.	Download the latest Javascript from the author's website
2.	Locate the theme you need to modify (for this tutorial, I will use matrix)
	- Mine is in gallery2/themes/matrix
3.	(Optional) Rename the theme to something different for identification purposes
	1. Open theme.inc
	2. Change Any reference of matrix to matrixlightbox
	3. Rename the theme folder matrixlightbox
	- Resulting folder gallery2/themes/matrixlightbox/
4.	Create a "includes" folder
	- You will have a resulting gallery2/themes/matrixlightbox/includes folder
5.	Unzip the file downloaded in that folder
	- You should have 3 new folders in gallery2/themes/matrixlightbox/includes/ called "js", "css" and "images"
6.	Configure the LightBox script
	1. Edit the file lightbox.js in the js folder
	2. Mine is in gallery2/themes/matrixlightbox/includes/js/lightbox.js
	3. Configure the path to the images:
	var fileLoadingImage = "/gallery2/themes/matrixlightbox/includes/images/loading.gif"; var fileBottomNavCloseImage = "/gallery2/themes/matrixlightbox/includes/images/closelabel.gif";
7.	Open the theme.tpl file in the templates folder
	- For my example: gallery2/themes/matrixlightbox/templates/theme.tpl
8.	Right before </head> add the following lines:
	<link rel="stylesheet" type="text/css" media="screen" href="{g->theme url="includes/css/lightbox.css"}" /> <script type="text/javascript" src="{g->theme url="includes//js/prototype.js"}"></script> <script type="text/javascript" src="{g->theme url="includes/js/effects.js"}"></script> <script type="text/javascript" src="{g->theme url="includes/js/lightbox.js"}"></script>
	--> This will activate the lightbox plugin for this theme
9.	Open the album.tpl file in the templates folder
	- For my example: gallery2/themes/matrixlightbox/templates/album.tpl
10.	Look for the following lines of code: (repeated twice)
	<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
	- For matrix, it's located on line 84 and 90
11.	Change all of these lines for:
	<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.id`"}" rel="Lightbox[gallery]">
	- At this point, you can activate and use your new theme which would show a lightbox modal window when you click on an item.

Advanced

Custom Caption

• You can also control what is shown on the small white bar at the bottom below the picture by adding a title="" in the <a> tags modified above
  • For example:

  title="{$child.name}<br /><a href='{g->url arg1="core.ShowItem" arg2="itemId=`$child.id`"}'>Show This Photo Page</a>"

Controlling the size of the picture in the lightbox

• When using the above technique, you will see the full size picture which may not be the best, if you want to limit it to a specific size, read on :-)

1.	Open the Theme.inc
	- Mine is in gallery2/themes/matrixlightbox/theme.inc
2.	Find the following line:
	return array(null, 'theme.tpl');
3.	Add the following code before:
	foreach ($childIds as $childId){ list ($ret, $resizeTable) = GalleryCoreApi::fetchResizesByItemIds(array($childId)); if (isset($resizeTable[$childId][0])) { $theme['resizeId'][$childId] = $resizeTable[$childId][0]->getId(); } } foreach ($theme['children'] as $id=>$item){ if ($item['descendentCount'] >0 ){ list ($ret, $Descendent) = GalleryCoreApi::fetchItemizedDescendentCounts(array($item['id'])); $theme['children'][$id]['Descendent'] = $Descendent[$item['id']]; } }
4.	Open the album.tpl in the templates folder
	- Mine is in gallery2/themes/matrixlightbox/templates/album.tpl
5.	Find the following lines
	<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
6.	Change them for the following:
	{if $theme.resizeId[$child.id] neq ''} <a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$theme.resizeId[$child.id]`"}" rel="lightbox[gallery]"> {else} <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"> {/if}
7.	Now the pictures shown in the modal box will show the smallest size specified for the resized pictures in that album (default 640)
	If no resized picture is available, then lightbox is not used (in this example)

Module

• First rudimentary version (should work gallery 2.1 & 2.2): lightbox v0.5.0

Themes

Gallery 2.1

• MatrixLighBox(from the tutorial): File:Matrixlightbox v1.0.1.zip (also works in Gallery 2.2)
• SiriuxLighBox : File:Siriuxlightbox v1.0.zip

Gallery 2.2

• PGLightBox: Gallery2:Themes:PGlightbox

Showcase

Slightly modded siriux embedded in Wordpress