Setting Up Gallery 2 and Lightbox JS
I have done some research on integrating Lightbox 2 for my Gallery 2 set up. I come across the tutorial on Gallery’s website but it over-complicates thing a little. Although their instruction is the proper way to do the integration, an average person is going to have a hard time to follow their instruction. You have to hack the code anyway, why not following an easier hack. Here is my little instruction:
- Download and extract lightbox in your web root folder assuming all necessary files are extracted under the /lightbox directory.
- Modify theme.tpl (/themes/<your theme>/templates/local/theme.tpl) by including lightbox right before </head>. It should look something like this:
<link rel="stylesheet" type="text/css" href="/lightbox/css/lightbox.css"/><link rel="stylesheet" type="text/css" href="/lightbox/css/lightbox.css"/> <script type="text/javascript" src="/lightbox/js/prototype.js"></script> <script type="text/javascript" src="/lightbox/js/lightbox.js"></script> <script type="text/javascript" src="/lightbox/js/scriptaculous.js?load=effects,builder"></script> {* end stylesheet and javascript for Lightbox JS *} </head>
- Modify album.tpl (/themes/<your theme>/templates/local/album.tpl) by adding “rel=lightbox[photos]” to each photo. It should look something like this:
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.id`"}"
title="{$child.title|markup}"
pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
rel="lightbox[photos]" >
- Note that there may be multiple places where you need to modify depending on your theme. You may want to search for keywords such as “child.id” that’s within the anchor tag (”<a href=…”).
- Also note that if the /thems/<your theme>/templates/local directory does not exist, you will have to create it and copy both theme.tpl and album.tpl over.
Voila! Your Lightbox integration is done.
