Lightbox JS Tutorial for non-programmers

Lightbox Tut

This tutorial covers a minimal installation of Lightbox JS 2.0.2 onto a Gallery2.1.2 site. As far as I know, this modification is theme-independent; you can insert it into any theme and get going.

Sadly, I'm not a programmer and not capable of providing any meaningful support -- this is just my notes on my installation of Lightbox JS, which I wanted to share in the hopes of saving other users some time and effort.

NOTES WORTH MENTIONING BEFORE WE BEGIN:
If you are using one of the pre-release versions of Gallery2.2, I believe you would be better served by just downloading and using/adapting the PGTheme, rather than trying to follow these directions.

This tutorial includes URLs that you'll need to customize for your installation. I have started urls with /[path]/[to]/ -- you need to replace that with your own urls.

Like most computer weenies, I do all of my text-editing work on my computer, and then use FTP to upload my files to the server. These instructions are designed for working that way; if you edit directly on the server, I bow to your superior computer prowess, and you'll have to adapt these instructions to fit your method.

THE TUTORIAL PROPER:
Download Lightbox JS from http://www.huddletogether.com/projects/lightbox2/#download , unzip it, and open the lightbox folder.

In the lightbox folder, go to the js folder and open "lightbox.js" in the text editor of your choice.

replace lines 62 and 63 with the following lines, which sets the image paths. Change the image paths that I've written as necessary to refer to your installation of Gallery2 on your website.

/* customized URLs for this installation of Lightbox JS */
var fileLoadingImage = "/[path]/[to]/lightbox/images/loading.gif";		
var fileBottomNavCloseImage = "/[path]/[to]/lightbox/images/closelabel.gif";
/* end customized URLs for this installation of Lightbox JS */

Around line 426, you'll see a line that says this.preloadNeighborImages();. Immediately after this line, and before the line },", add the following line. This addition eliminates a flashing-cursor problem that occurs in Firefox (my guess is that future versions of Lightbox JS won't need this mod, so check which version you have before doing this).

if (!document.all) document.getElementById('prevLink').focus(); // modification added to fix Firefox flashing-cursor problem

Close lightbox.js, you're done with it. Upload the entire lightbox file folder to the top folder of Gallery2 on your website.

Now, you'll need to edit three files (at least) in your theme folder. So, download the folder for your theme (at a minimum, download the "theme.inc", "templates/local/theme.tpl" and "templates/local/album.tpl" files.).

Edit the "theme.inc" file for the Gallery2 theme(s) you are using. You'll need to ADD these lines of text to the file, after the line that says $theme['columnWidthPct'] = floor(100 / $params['columns']);:

				/* Add resizedId to child values, required for Lightbox JS */
				if ( $theme['children'] ){
				    foreach ( $theme['children'] as $key => $value ){
				        if ( $value['id'] ){
				            list($ret,$resizedIds) =  
                                                  GalleryCoreApi::fetchResizesByItemIds(array($value['id']));
				            if ($ret)
				                return $ret;
				        }
				        $theme['children'][$key]['resizedId'] = $value['id'];
				        if ( $resizedIds ){
				            /* Find the best resized option
				             * 
				             * Use width/height max=800; */
				            $lboxMaxEdge = 800;
				            $resizedEdge = NULL;
				            $resizedId = NULL;
				            foreach ( $resizedIds[$value['id']] as $resize ){
						$width = $resize->getWidth();
				                $height = $resize->getHeight();
				                $edge = ( $width > $height )? $width : $height;
				                if ( $edge <= $lboxMaxEdge ){
				                    if ( !isset($resizedEdge) ){
				                        $resizedId = $resize->getId();
				                        $resizedEdge = $edge;
				                    } else if ( $edge > $resizedEdge ){ 
				                        $resizedId = $resize->getId();
				                        $resizedEdge = $edge;
				                    } 
				                }
				            }
				            $theme['children'][$key]['resizedId'] = $resizedId;
				        }
				    }
				}
/* end add resizedId to child values, required for Lightbox JS */

Open your theme.tpl file in your text editor, and add the following stylesheet and javascript links, directly above the line that says </head>:

{* stylesheet and javascript for Lightbox JS *}
<link rel="stylesheet" type="text/css" href="/[path]/[to]/lightbox/css/lightbox.css" />
<script type="text/javascript" src="/[path]/[to]/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/[path]/[to]/lightbox/js/lightbox.js"></script>
<script type="text/javascript" src="/[path]/[to]/lightbox/js/scriptaculous.js?load=effects"></script>
{* end stylesheet and javascript for Lightbox JS *}

Close your theme.tpl file, you're done with it.

Open your album.tpl file. On or about line 80, you'll see the following code:

<div>
  {if isset($theme.params.$frameType) && isset($child.thumbnail)}
    {g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType width=$child.thumbnail.width height=$child.thumbnail.height}
{* alternate link code for Lightbox JS *}
{if $child.canContainChildren}
  <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
  {else}
    <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    arg2="itemId=`$child.resizedId`"}"
    title="{$child.title|markup}"
    pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    rel="lightbox[photos]" >
  {/if}
{*end alternate link code for Lightbox JS *}
   {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}
    </a>
    {/g->container}
  {elseif isset($child.thumbnail)}
 {if $child.canContainChildren}
{* alternate link code for Lightbox JS *}
{if $child.canContainChildren}
  <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
  {else}
    <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    arg2="itemId=`$child.resizedId`"}"
    title="{$child.title|markup}"
    pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    rel="lightbox[photos]" >
  {/if}
{*end alternate link code for Lightbox JS *}
   {g->image item=$child image=$child.thumbnail class="giThumbnail"}
    </a>
  {else}
    <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    class="giMissingThumbnail">
    {g->text text="no thumbnail"}
    </a>
  {/if}
</div>

Replace all of the above code with the following code:

<div>
  {if isset($theme.params.$frameType) && isset($child.thumbnail)}
    {g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType width=$child.thumbnail.width height=$child.thumbnail.height}
{* alternate link code for Lightbox JS *}
		{if $child.canContainChildren}
  			<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
  			{else}
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
    title="{$child.title|markup}"
    pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    rel="lightbox[photos]" >
    {/if}
{*end alternate link code for Lightbox JS *}
   {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}
    </a>
    {/g->container}
  {elseif isset($child.thumbnail)}
		{if $child.canContainChildren}
  			<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
  			{else}
 <a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
    title="{$child.title|markup}"
    pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    rel="lightbox[photos]" >
    {/if}
   {g->image item=$child image=$child.thumbnail class="giThumbnail"}
    </a>
  {else}
    <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    class="giMissingThumbnail">
    {g->text text="no thumbnail"}
    </a>
  {/if}
</div>

Okay, now you're done editing album.tpl. You should not need to edit photo.tpl; the installation as described here essentially replaces photo.tpl with the Lightbox JS function.

Upload your theme folder to the server (or, if you just edited the three files, upload your edits to theme.inc, theme.tpl and album.tpl ).

There! That should be it, and Lightbox JS should now work well for you.

WITHOUT WHOM, OR THE OSCARS SPEECH:
Many thanks to Mike Miller at mikeage.net, who has a similar tutorial where he has also included a neat ZOOM modification that I did not use. http://mikeage.net/2006/09/03/gallery-2-lightbox/ .

The instructions and notes in the PGLightbox theme were also helpful in putting this together: http://codex.gallery2.org/index.php/PGlightbox .

Lightbox JS 2.0.2 is cool, really cool! Hooray for Lokesh Dahar. http://www.huddletogether.com/projects/lightbox2/

And of course thanks to the whole team at Gallery, I am loving using this software for my web-design clients.

Nice work Sara!

i followed your instructions and the theme 8matrix) works fine. i need lightbox to open the picture resized 640x480 instead of full resolution (way too big). how do i set this parameter?

thanks

i changed the 800 to 640 in the code but i'm still getting the full image (6mpx). i think i didn't understand well where else do i have to changhe the code?
sorry, i'm not into coding at all

thank you

Here's what I would suggest trying, ruggi. In the code that I posted that you should add to theme.inc, there is a line that says: $lboxMaxEdge = 800;

Change that to the number you want (see my paragraph below on what to consider when changing the number).

As I understand it, you will also need to set the "Resized Images" in the control panel for your album and sub-albums, and possibly individually for the photos that you've already got in your gallery, to the same number that you change the code in theme.inc to. This is because the code you've added to theme.inc says, in essence, "choose the closest Resized Image to this."

If I were you, I would set the size to 500, given that you need the dimensions to be AROUND 640 x 480. Unfortunately, in Gallery 2.1, there's no way to say "the maximum width should be X and the maximum height should be Y." Gallery just chooses the smaller of the two dimensions, and sets it based on that number. If your images are different sizes, it can make setting this number feel unpredictable.

There is no way to set any resize in Gallery to exactly 640 x 480 to every photo, unless every photo is at exactly the right dimensions (4:3) that 640 x 480 is a possible exact resize. If your photos are at different dimensions, or at something other than 4:3, then 500 is likely to be your "best bet" -- the Lightbox JS pix will be a little bit taller than you want for tall photos, and a fair amount narrower for wide photos, but in general will work. Experiment with changing the number in both locations if you like.

It sounds like you're doing a great job and this is the one part that's vexing you. Keep at it! The one thing I've learned about programming in the last two years, as a non-programmer myself, is that it rewards the noodlers and the futzers and the try-it-one-more-time-ers. So, welcome to the club of non-programmers diving in to the programming end of things, and good luck with it!

I would be willing to format this for the codex if you tell me where it needs to go.

before installing the lightbox i used to get resized pictures when clicking the thumbnail.
my gallery, which is still under construction, is at the following address
http://www.travellopoly.com/index.php?option=com_gallery2&Itemid=27

thanks

oopss sorry i was probably playing around when you where in. you should be able to enter the site anyway now. there are only few pictures at the moment so just click on the image block to go to the gallery.

thanks

try this
user: luca
pwd: mongia

I did it. Take a look and let me know if I did it right.
http://codex.gallery2.org/index.php/Gallery2:Lightbox_JS_Tutorial

If you turn on debug mode and look in the popup box. Then look for the array that has that linkitem in it and see if there is something that you can use in an if/then statement. I'm not sure how linkitem works so I don't know.

Try this link. http://gallery.menalto.com/node/59196 I'm not sure if it works or not, but I'd give it a shot.

In the lightbox code there are if then statements that say if child can contain children (IE an album) don't use the lightbox link. If you change it to say if child can contain children or is a link item don't use the lightbox then that will fix your problem.

The code will look like this

<div>
  {if isset($theme.params.$frameType) && isset($child.thumbnail)}
    {g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType width=$child.thumbnail.width height=$child.thumbnail.height}
{* alternate link code for Lightbox JS *}
{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
  <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
  {else}
    <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    arg2="itemId=`$child.resizedId`"}"
    title="{$child.title|markup}"
    pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    rel="lightbox[photos]" >
  {/if}
{*end alternate link code for Lightbox JS *}
   {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}
    </a>
    {/g->container}
  {elseif isset($child.thumbnail)}
 {if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
{* alternate link code for Lightbox JS *}
{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
  <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
  {else}
    <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    arg2="itemId=`$child.resizedId`"}"
    title="{$child.title|markup}"
    pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    rel="lightbox[photos]" >
  {/if}
{*end alternate link code for Lightbox JS *}
   {g->image item=$child image=$child.thumbnail class="giThumbnail"}
    </a>
  {else}
    <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
    class="giMissingThumbnail">
    {g->text text="no thumbnail"}
    </a>
  {/if}
</div>

Hi Ivthunder!

As you are so experienced with that type of issues myabe you could help me out on this little resistant problem. Would really appreciate it:
I am trying to show item names on album pages for thumbnails

but they also show for crosslinked album links. The problem is that the above solution does not work here it seems.
this is what i tried and still show item name on cross linked albums:

the original post is here:

Fabs

_____________________________________________________
Breath in love...--------------
------------...breath out peace

Please visit my private website and the embeded gallery: http://www.ffaabbiiaann.de

In Gallery 2.1.2, I do not have a problem with the watermark module and the lightbox module -- they work fine together, and my lightbox-delivered pictures that have been watermarked, show up watermarked.

Can you write a little more about your problem and how it is manifesting itself?

-Sara

It looks to me like you are sending two different image size to the two different instances.

In the watermark module settings, you have to set it that you want to watermark both the full-sized and resized images. (in the site administration page, go to Display -> Watermarking, and then click to "edit" your watermark, and click to choose "resize".

That should do it, I think, but if it doesn't, then take a look at the "watermark" panel under the individual image; it also needs to have "resizes" selected, and I am not sure that the setting in the administrative panel will override previously-set individual pictures.

If you are confident that you've got "resizes" set for the individual picture in your example, and it's still not showing up, then we have reached the limit of my capabilities and hopefully someone else will arrive to help you troubleshoot it.

Good luck!

-Sara

I can't seem to get the lightbox to work on the actually gallery. It only works on images that are posted in posts. The regular gallery and embedded gallery doesn't work. Do you know what I could be doing wrong?

Own The Internet!
http://www.agloco.com/bbbj9761/

I wasn't sure If I was allowed to post links so I left them out. YOu can see what I mean by going to www.falseicon.com (it works fine with the thumbs in the posts), but it doesn't work in the actual gallery www.falseicon.com/wp-gallery2.php . I am currently using wordpress2.0 and gallery 2.0 with greypop theme.

I have no idea what is embed mode and normal mode.

______________________________________________________
Own The Internet!
http://www.agloco.com/bbbj9761/

It doesn't seem like you are using lightbox at all. Maybe you turned it off in the theme. I modified the lightbox.js file in the greypop theme so that if someone didn't have javascript it would just show the photo page instead of just the jpg.

Hi everyone. Thanks to the OP for creating this thread.

I am having trouble with this. I did everything that the OP said to do. I edited the lightbox.js and three files in my default matrix theme. Inserted my path to be my server path ... should it be my server path or should it be http://www.potenchial.com/lightbox/.....? Besides that I have everything done that was suppose to be done. I don't really understand bunch and so if you could be clear while explaining. What happens is that when I click on an image, it opens in a window by itself. From what I read on the Lightbox site that there is a conflict with the CSS files. Should I be using the CSS file for my theme or should the Lightbox CSS replace that in the theme directory.

You can check it out here:

www.potenchial.com/photo/main.php

Thank you in advance.

very easy solution: read the lightbox tutorial better ;)
there is a hack which will make your lightbox span multiple pages
good luck!
Fabs

_____________________________________________________
Breath in love...--------------
------------...breath out peace

Please visit my private website and the embeded gallery: http://www.ffaabbiiaann.de

Ive been trying to make this work with the Ice theme but cant seem to get it working properly as the ice theme is set up a little differently than what's described here. I'd appreciate any help.
Link to my gallery - http://www.raktim.com/gallery/main.php
Here are the modifications I made:
- i downloaded and unzipped the latest lightbox (v2.03.3) into my gallery folder. So lightbox resides under http://www.raktim.com/gallery/lightbox/
-edited lightbox.js (http://www.raktim.com/gallery/lightbox/js/lightbox.js) as such:

//	Configuration
//
var fileLoadingImage = "http://www.raktim.com/gallery/lightbox/images/loading.gif";	<---
var fileBottomNavCloseImage = "http://www.raktim.com/gallery/lightbox/images/closelabel.gif";   <---

var overlayOpacity = 0.8;	// controls transparency of shadow overlay

and

showImage: function(){
		Element.hide('loading');
		new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){	myLightbox.updateDetails(); } });
		this.preloadNeighborImages();
	--->	if (!document.all) document.getElementById('prevLink').focus(); // modification added to fix Firefox flashing-cursor problem
	},

-edited theme.inc (http://www.raktim.com/gallery/themes/ice/theme.inc) as such:

$theme['columnWidthPct'] = floor(100 / $params['columns']);
	/* added for lightbox Add resizedId to child values, required for Lightbox JS */
				if ( $theme['children'] ){
				    foreach ( $theme['children'] as $key => $value ){
				        if ( $value['id'] ){
				            list($ret,$resizedIds) =  
                                                  GalleryCoreApi::fetchResizesByItemIds(array($value['id']));
				            if ($ret)
				                return $ret;
				        }
				        $theme['children'][$key]['resizedId'] = $value['id'];
				        if ( $resizedIds ){
				            /* Find the best resized option
				             * 
				             * Use width/height max=800; */
				            $lboxMaxEdge = 800;
				            $resizedEdge = NULL;
				            $resizedId = NULL;
				            foreach ( $resizedIds[$value['id']] as $resize ){
						$width = $resize->getWidth();
				                $height = $resize->getHeight();
				                $edge = ( $width > $height )? $width : $height;
				                if ( $edge <= $lboxMaxEdge ){
				                    if ( !isset($resizedEdge) ){
				                        $resizedId = $resize->getId();
				                        $resizedEdge = $edge;
				                    } else if ( $edge > $resizedEdge ){ 
				                        $resizedId = $resize->getId();
				                        $resizedEdge = $edge;
				                    } 
				                }
				            }
				            $theme['children'][$key]['resizedId'] = $resizedId;
				        }
				    }
				}
	/* end add resizedId to child values, required for Lightbox JS */

-edited theme.tpl (http://www.raktim.com/gallery/themes/ice/templates/local/theme.tpl) as such:

{* Include this theme's style sheet *}
    <link rel="stylesheet" type="text/css" href="{g->theme url="theme.css"}"/>
	
	{* stylesheet and javascript for Lightbox JS *}
--->	<link rel="stylesheet" type="text/css" href="http://www.raktim.com/gallery/lightbox/css/lightbox.css" />
--->	<script type="text/javascript" src="http://www.raktim.com/gallery/lightbox/js/prototype.js"></script>
--->	<script type="text/javascript" src="http://www.raktim.com/gallery/lightbox/js/lightbox.js"></script>
--->	<script type="text/javascript" src="http://www.raktim.com/gallery/lightbox/js/scriptaculous.js?load=effects"></script>
	{* end stylesheet and javascript for Lightbox JS *}
  
  </head>

Now this is where it gets a bit tricky. Ice theme's album.tpl doesnt do all that mentioned above. Instead it calls another .tpl file

	    {assign var="childrenInColumnCount" value=0}
                <div class="gsContentAlbum">
                        {if $theme.params.showChildsAs == "float"}
                          {g->theme include="childsfloat.tpl"}
                        {elseif $theme.params.showChildsAs == "blog"}
                          {g->theme include="childsblog.tpl"}                               
                        {else}
                          {g->theme include="childs.tpl"}
                        {/if}	
                </div>

I have my theme options set to "show child as Matrix" to I opted to edit childs.tpl
here is the original childs.tpl (http://www.raktim.com/gallery/themes/ice/templates/childs.tpl)

	{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')}
    	{assign var=frameType value="albumFrame"}
        {capture assign=linkUrl}{g->url arg1="view=core.ShowItem"
				        arg2="itemId=`$child.id`"}{/capture}
    {else}
        {assign var=frameType value="itemFrame"}
		{capture assign=linkUrl}
	 	{strip}
	  		{if $theme.params.dynamicLinks == 'jump'}
	    		{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}
	  		{else}
	    		{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}
	  		{/if}
	  	{/strip}
		{/capture}
    {/if}
	<div>
	{strip}
		{if isset($theme.params.$frameType) && isset($child.thumbnail)}
			{g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
				      width=$child.thumbnail.width height=$child.thumbnail.height}
			  <a href="{$linkUrl}" alt="{$title}" title="{$title}">
			      {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}
				</a>
			{/g->container}
		{elseif isset($child.thumbnail)}
		  <a href="{$linkUrl}" alt="{$title}" title="{$title}">
		    {g->image item=$child image=$child.thumbnail class="giThumbnailIce"}
          </a>
		{else}
		  <a href="{$linkUrl}" class="giMissingThumbnail">
		    {g->text text="no thumbnail"}
		  </a>
		{/if}
	{/strip}
	</div>

and here is my edited child.tpl (http://www.raktim.com/gallery/themes/ice/templates/local/childs.tpl)

{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')}
    	{assign var=frameType value="albumFrame"}
        {capture assign=linkUrl}{g->url arg1="view=core.ShowItem"
				        arg2="itemId=`$child.id`"}{/capture}
    {else}
        {assign var=frameType value="itemFrame"}
		{capture assign=linkUrl}
	 	{strip}
	  		{if $theme.params.dynamicLinks == 'jump'}
	--->   		{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedid`"}
	  		{else}
	    		{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}
	  		{/if}
	  	{/strip}
		{/capture}
    {/if}
	<div>
	{strip}
		{if isset($theme.params.$frameType) && isset($child.thumbnail)}
			{g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
				      width=$child.thumbnail.width height=$child.thumbnail.height}
	--->		  <a href="{$linkUrl}" alt="{$title}" title="{$title}" pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" rel="lightbox[photos]">
			      {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}
				</a>
			{/g->container}
		{elseif isset($child.thumbnail)}
	--->	  <a href="{$linkUrl}" alt="{$title}" title="{$title}" pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" rel="lightbox[photos]">
		    {g->image item=$child image=$child.thumbnail class="giThumbnailIce"}
          </a>
		{else}
		  <a href="{$linkUrl}" class="giMissingThumbnail">
		    {g->text text="no thumbnail"}
		  </a>
		{/if}
	{/strip}
	</div>

Basically I changed the 2nd {g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"} to {g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedid`"} and <a href="{$linkUrl}" alt="{$title}" title="{$title}"> to <a href="{$linkUrl}" alt="{$title}" title="{$title}" pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" rel="lightbox[photos]">

Now whenever I click on a thumbnail, whether it's a thumbnail to an album or a photo, the lightbox script pops up with the loading gif but no photo opens up.

I know this is a lot, but I tried to be as detailed as possible to lay everything out in the open. Please take a look and let me know what I'm doing wrong. Thank you so much.

thats what I thought Im doing though.

{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')}
    	{assign var=frameType value="albumFrame"}
        {capture assign=linkUrl}{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}{/capture}
    {else}
        {assign var=frameType value="itemFrame"}
		{capture assign=linkUrl}
	 	{strip}
	  		{if $theme.params.dynamicLinks == 'jump'}
	    		{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedid`"}
	  		{else}
	    		{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}
	  		{/if}
	  	{/strip}
		{/capture}
    {/if}

See, Im putting the arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedid`" under the else which shouldnt make the album thumbnails open up lightbox. Plus Ive gone over the code for greypop, but it's pretty different than this one. Making lightbox work shouldnt be this hard

No that should work if the paths are correct.

yea the paths are correct. to be sure i put them in the src="{g->url href='http://... format to see if that makes any difference. No dice. I dont know why its not working. Lightbox folder is contained within gallery folder. I edited theme.inc, lightbox.js, theme.tpl, and childs.tpl as the tutorial said. But its still not working.

lvthunder, I think I know why resiedid isnt working for me. I opened up all the .tpl and .js files under greypop theme in notepad++ and did a search for "resizedid" and got hits on "callbacks.inc" and "albumlight.tpl". I did the same for ice theme and the lightbox v2.03.3 i downloaded off huddletogether and didnt get any hits on resizedid. Im missing this callbacks.inc file. What is it? is resizedid an inherent function in gallery?