[siriux] lightbox.js Customization

Hello all,

Lokesh Dhakar developed a brilliant script that allows displaying an image as an overlay to the existing page, see LightBox JS on his website.

I have attempted to integrate it in the Siriux (1.0.2) theme. Please keep in mind that I am not a PHP developer so this customization will not be up to the standards which Gallery adheres to, for example, you should use the local directory. But, as a proof of concept, it will certainly give you a starting point if you want to do this for your own Gallery.

Here are the steps I took (I will use the patch syntax to illustrate code changes):

1) Download the 5 files from the download section of the page linked above
2) Copy the images (gif and png) into themes/siriux/images
3) Copy lightbox.css and lightbox.js in themes/siriux
4) Modify lightbox.js to indicate the path to the images (I haven't used the overlay picture feature)

38,39c38,39
< var loadingImage = 'loading.gif';		
< var closeButton = 'close.gif';		
---
> var loadingImage = 'http://localhost/gallery2/themes/siriux/images/loading.gif';		
> var closeButton = 'http://localhost/gallery2/themes/siriux/images/close.gif';	
284c284
< 	
---
> 

5) Modify the lightbox.css (#lightboxDetail) to align the caption to the left. This is a minor cosmetic change to make sure that the caption and the View Photo URL are left-aligned on the overlay

9a10
> 	text-align: left;

6) Modify templates/theme.tpl (version 1.5) to include the lightbox stylesheet and script in the HEAD section

12c12
< 
---
>     
19a20
>     <link rel="stylesheet" type="text/css" href="{g->theme url="lightbox.css"}"/>
28a30,32
>     
>     <script type="text/javascript" src="{g->theme url="lightbox.js"}"></script>
> 	

7) Modify theme.inc (version 1.5) to load the resized images IDs in the ShowAlbumPage function so that they are available to album.tpl

103a104,111
> 		
> 		/* Lightbox customization - Fetch resize IDs */
> 	        foreach ($childIds as $childId){ 
> 			list ($ret, $resizeTable) = GalleryCoreApi::fetchResizesByItemIds(array($childId));
> 			if (isset($resizeTable[$childId][0])) {
> 				$theme['resizeId'][$childId] = $resizeTable[$childId][0]->getId();
> 			}
> 		}

8) Modify templates/album.tpl (version 1.5) to change the thumbnail URL to point the resized picture and use Lightbox to overlay it. (Replace the line right underneath <div class="gallery-thumb">) Lightbox will show whatever you pass in title as a caption to the overlay. Mine looks a bit complicated because I wanted to add a link to the normal photo view.

59c59
< 	  <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
---
> 	  <a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$theme.resizeId[$child.id]`"}" title='{$child.title|markup}<br><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Photo Page</a>' rel="lightbox">

And that's it! I also use the SquareThumbs module, set the thumbnail size to 100 and set 20 items per page.

I have attached two screenshots (sorry, I do not have a demo site available)

1) Album page before clicking on thumbnail
2) Image shown in overlay on current page

Cheers,
treqx

Hi !

Its not working for me...
in the album overview the loading .gif appears but nothing happen...
sure because there gallery should load a page...not a picture !

Could you attach your zipped siriux folder ?

Or post more information...where the excatly youve modified the files ?

THX

X_Burner

Is there a way to make this working without JavaScript "transparently"?

* If JavaScript is available => display photo with LightBox
* If JavaScript is *not* available => display photo page like before the patch

I'm sorry to dig up an old post, but I'd like to implement this on my gallery. The problem is that both lightbox.js and gallery have both changed and I have no clue how to do this. I tried my best to adapt the instructions to the new version of lightbox and theme, but It just doesn't work. It would be greatly appreciated if someone could modify the theme and include the new version of lightbox or at least tell me what I need to do. Thanks.

hi,

I was just browsing around the site to try to figure out how I would build a theme incorporating the light box script. It looks like u may have beaten me to it though! Although admittedly I haven't looked at ur method in enough detail to figure out if it is exactly what i want though.

My idea is to have a one webpage a bit like a splash screen that when clicked on came up with not a slide show as such but this white box. Basicly it would collaberate all images from say an album.

--
Website: http://me.sllewellyn.com
Gallery: http://www.something-beautiful.org/mygallery

Bucky, are you using WordPress? The new version of the Lightbox plugin attempts to wrap G2 images but fails. Closer, anyway.

Weird, that's the exact same symptoms on Gallery images I'm seeing with the latest WordPress Lightbox plugin. Hmm, gotta be a solution, but I know way less about Gallery theming and plugins than WordPress.

I take it you've contacted h0bbel about his implementation? Any help there?

I guess it all depends on what kind of integration you want:

http://www.eduo.info/2006/04/04/los-15-mejores-paisajes-urbanos/

I decided I didn't want the integration in Gallery itself, although it'd be nice. What I really wanted was integration of lightbox in wordpress for the images I included from G2.

Plugins:
Wordpress:
- WPG2: http://www.blogyourphotos.com/
- Lightbox2: http://www.4mj.it/lightbox

Gallery2:
- DirectImage

So now I include the images from WPG2's interface, change the /v/ with /i/ in the URLs and add the 'rel="lightbox"' bits. I'd want a Lightbox Siriux theme but, to be true, I have no use for anything in any themes until embedded galleries can call their own themes, independently from the theme being used in the album itself.

Eduo
---
www.eduo.info
www.eduo.info/gallery/
www.hamsterspit.com

For others stumbling across this discussion, I recently added a Lightbox JS integration tutorial for Gallery 2.1.2 to this forum. http://gallery.menalto.com/node/55329 . Maybe it will help you!

-Sara