Lightbox JS Tutorial for non-programmers

scormeny

Joined: 2006-06-27
Posts: 68
Posted: Wed, 2006-10-04 17:46

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.

 
h0bbel
h0bbel's picture

Joined: 2002-07-28
Posts: 13451
Posted: Wed, 2006-10-04 19:22

I would love to see this recorded as a codex entry. Any takers?


h0bbel - Gallery Team
If you found my help useful, please consider donating to Gallery
http://h0bbel.p0ggel.org

 
mikeage
mikeage's picture

Joined: 2005-01-23
Posts: 138
Posted: Thu, 2006-10-05 03:39

Nice work Sara!

 
LFrank

Joined: 2005-02-19
Posts: 1023
Posted: Thu, 2006-10-05 05:47

Cool, good to see that PGlightbox was helpfull :)
CU
Lutz

Gallery version = 2.2-svn core 1.1.17
PHP version = 5.1.6 apache2handler
Webserver = Apache/2.2.3 (Win32) DAV/2 PHP/5.1.6 mod_ssl/2.2.3 OpenSSL/0.9.8c
Database = mysql 5.1.11 beta-log,
Theme=PGlightbox,
Gallery-URL=http://lf-photodesign.de

 
ruggi

Joined: 2006-09-23
Posts: 45
Posted: Sun, 2006-11-12 18:49

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

 
LFrank

Joined: 2005-02-19
Posts: 1023
Posted: Sun, 2006-11-12 19:15

ruggi, you have to implement some code in theme.inc to generate/preload the resizes. Look into the code linked above and change the 800 in there... you need a resize defined in your album view in a fitting size.

Gallery version = 2.2-svn core 1.1.21
PHP version = 5.1.6 apache2handler
Webserver = Apache/2.2.3 (Win32) DAV/2 PHP/5.1.6 mod_ssl/2.2.3 OpenSSL/0.9.8d
Database = mysql 5.1.11 beta-log,
Theme=PGlightbox,
Gallery-URL=http://lf-photodesign.de

 
ruggi

Joined: 2006-09-23
Posts: 45
Posted: Sun, 2006-11-12 20:23

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

 
ruggi

Joined: 2006-09-23
Posts: 45
Posted: Sun, 2006-11-12 22:37
LFrank wrote:
you need a resize defined in your album view in a fitting size.

what do you exactly mean by saying this?

 
scormeny

Joined: 2006-06-27
Posts: 68
Posted: Mon, 2006-11-13 16:48

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!

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Wed, 2006-11-15 00:38
ruggi wrote:
LFrank wrote:
you need a resize defined in your album view in a fitting size.

what do you exactly mean by saying this?

Before you started modifying things for lightbox did you get a full size image when you clicked the thumbnail or did the full size show up. Also a link to your gallery is always helpful.

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Wed, 2006-11-15 00:39
h0bbel wrote:
I would love to see this recorded as a codex entry. Any takers?


h0bbel - Gallery Team
If you found my help useful, please consider donating to Gallery
http://h0bbel.p0ggel.org

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

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Wed, 2006-11-15 08:19

i think "Gallery2:Lightbox JS Tutorial" would be a good location.
with a link on the how to page.

thanks!

 
ruggi

Joined: 2006-09-23
Posts: 45
Posted: Wed, 2006-11-15 16:05

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Wed, 2006-11-15 16:17

Well I'm not getting anything other than the thumbnails so I can't help you out. If you change the permissions or get me a login I'll take a look again and see if I can help.

 
ruggi

Joined: 2006-09-23
Posts: 45
Posted: Wed, 2006-11-15 18:44

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Wed, 2006-11-15 19:05

There still is no link around the image.

 
ruggi

Joined: 2006-09-23
Posts: 45
Posted: Wed, 2006-11-15 22:16

try this
user: luca
pwd: mongia

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Wed, 2006-11-15 22:50

I think your issue is a permissions issue. Even with this account when I click on the thumbnail all I get is a picture the size of the thumbnail. I also had to change the language on that account to English because that's the only language I know. Send me a PM to help you out more. I don't think your issue (at least at the moment) is with lightbox.

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Sat, 2006-11-18 04:13
valiant wrote:
i think "Gallery2:Lightbox JS Tutorial" would be a good location.
with a link on the how to page.

thanks!

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

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Mon, 2007-01-15 18:26

I would need to adjust the Lightbox integration a little but i don't know how to.. I am using itemlinks to cross-link some albums in other albums as well as they sometimes fit in more than one category.
But with lightbox implemmented those links open with lightbox instead of linking to the album.. any ideas how to modify so it works?

See what i mean here: http://www.ffaabbiiaann.de/index.php?option=com_gallery2&Itemid=56&g2_itemId=7140
one of the albums is only a liked album from another parent album. click it and you'll get my point... :(

Fabs

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

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Mon, 2007-01-15 18:42
fabs wrote:
I would need to adjust the Lightbox integration a little but i don't know how to.. I am using itemlinks to cross-link some albums in other albums as well as they sometimes fit in more than one category.
But with lightbox implemmented those links open with lightbox instead of linking to the album.. any ideas how to modify so it works?

See what i mean here: http://www.ffaabbiiaann.de/index.php?option=com_gallery2&Itemid=56&g2_itemId=7140
one of the albums is only a liked album from another parent album. click it and you'll get my point... :(

Fabs

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

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

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.

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Mon, 2007-01-15 20:00

I am not that advanced that i can put if statements somewhere. well i could. but i doubt i would get anything working-hehehe...

anybody who knows what to do?

Fabs

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

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Mon, 2007-01-15 20:59

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.

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Tue, 2007-01-16 06:45

that is only for making the links look like albums using the albums css, right? but it does not solve the problem that the linked albums do not open but a simple lightbox-link opens with one picture as we are using lightbox here....

Fabs

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

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Tue, 2007-01-16 19:44

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>
 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Wed, 2007-01-17 04:05

Hi Ivthunder!
Thank you so much for helping me out on this matter.

I had posted all the following problems but got them all fixed! The problem was that i had full acceleration on for gallery and gallery cached stuff probably although i alway cleared the caches after the changes it did not work. now with acceleeration off i could implement all above perfectly!Thanks sooo much!

Quote:
1a)
I replaced the original lightbox code in my album.tpl with your suggesteed one from above. I cleaned all caches of this world but unfortunately the Linked albums still open with lightbox and thus one cannot access a linked album.
if you want to check it out here (try the linked album in there):
http://www.ffaabbiiaann.de/gallery/main.php?g2_itemId=7140

1b)
I have tried again and now after using your new code i only get this error on my gallery:
Fatal error: Smarty error: [in gallery:themes/matrix/templates/album.tpl line 170]: syntax error: mismatched tag {/foreach}. expected {/if} (opened line 108). (Smarty_Compiler.class.php, line 2284) in /www/.../gallery/lib/smarty/Smarty.class.php on line 1088

2)
For some reason on my linked albums the item name appears. normally just the title should appear... i need to get rid of the linked item name.
see the linked item here (I named it "album_name_that_should_not_show" to make it clear ;):
http://www.ffaabbiiaann.de/gallery/main.php?g2_itemId=7140

Fabs

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

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

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Wed, 2007-01-17 21:44

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

Quote:
{if !$child.canContainChildren}
{$child.pathComponent}
{/if}

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:

Quote:
{if (!$child.canContainChildren || !$child.entityType == 'GalleryLinkItem')}
{$child.pathComponent}
{/if}

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

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Fri, 2007-01-19 06:29

Unfortunately the lightbox hack does not work with the watermark module as is. Is there a way to make the watermarks appear in lightbox?

Thx
Fabs

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

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

 
scormeny

Joined: 2006-06-27
Posts: 68
Posted: Fri, 2007-01-19 17:15

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

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Fri, 2007-01-19 17:30

i have gallery 2.1.1.

for an example:
just go directly to this photo with a direct link and it will be watermarked: http://www.ffaabbiiaann.de/gallery/main.php?g2_itemId=6478

and now go back to the parent album of that image and open the first image which then opens indirectly with lightbox but not watermarked. all caches cleaned.. :(

any idea?

Fabs

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

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

 
scormeny

Joined: 2006-06-27
Posts: 68
Posted: Fri, 2007-01-19 17:42

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

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Fri, 2007-01-19 21:49

i only have one image size and double checked it. the images have the same size. i am not using any resizes. so i only applied to full sized images...i will try the above... mom.. nope sorry. also applied to rsizes in both main settings and on the image as well...
my water mark is a png with transparency. but tha should not matter as it shows on the normal image on the photo.tpl..
so what now?

Fabs

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

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

 
onetr1p

Joined: 2007-01-22
Posts: 3
Posted: Mon, 2007-01-22 18:47

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/

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Mon, 2007-01-22 20:51

More info please. What do u mean only on images that are posted in posts? Where do u have it embeded and have u got embeded mode on? some link to see the problem? Embeded mode somtimes brings problemms ... always try to have normal mode rather than embeded.

Fabs

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

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

 
onetr1p

Joined: 2007-01-22
Posts: 3
Posted: Tue, 2007-01-23 10:46

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/

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Tue, 2007-01-23 17:15

wrong thread mate... sorry- this is about another lightbox integration apart from grey popup theme. u'd better post it again somewhere else. otherwsie things get too cluttered maybe. i have no experience with greypopuptheme- sorry

Fabs

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

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Tue, 2007-01-23 22:00

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.

 
onetr1p

Joined: 2007-01-22
Posts: 3
Posted: Tue, 2007-01-23 23:04

Well, this is exactly what I have installed:

Wordpress 2.0x (regulus theme)
Gallery 2.0x ( switched between greypop theme/wordpressembedded theme - can't get either one to work for me)
wpg2 plugin
wp-lightboxJS plugin
lightbox 2.02

*lightbox doesn't work in my gallery but it works on my homepage when you click on thumbnails.

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

 
Management

Joined: 2007-03-16
Posts: 1
Posted: Fri, 2007-03-16 17:23

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.

 
mindVex

Joined: 2007-07-20
Posts: 2
Posted: Tue, 2007-07-24 11:06

Hi there,

I have a little problem, I don't know how to solve. When the lightbox opens I can navigate through "next" and "previous" - but only between the images shown on the album page (that are 3x3 images). The Lightbox-Layer says "image 1 of 9". Is there a way to solve this?

 
fabs
fabs's picture

Joined: 2004-05-10
Posts: 171
Posted: Tue, 2007-07-24 13:58
mindVex wrote:
Hi there,

I have a little problem, I don't know how to solve. When the lightbox opens I can navigate through "next" and "previous" - but only between the images shown on the album page (that are 3x3 images). The Lightbox-Layer says "image 1 of 9". Is there a way to solve this?

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

 
misterlib

Joined: 2007-08-02
Posts: 1
Posted: Thu, 2007-08-02 20:03

I had the same question. I have gone through the tutorial to the point when you need to change these lines in lightbox.js:

line 62:
/* Hard coded the image paths */
...
line 343:
while(imageArray[imageNum][0] != imageLink.getAttribute('rev')) { imageNum++;}

The problem is that the newer lightbox doesn't have the same lines. Since it doesn't say whether you should replace code, or insert the one line between other lines, it is really hard to guess where the lines should be in the newer script. If I could get an older version of lightbox, that might work better. Any ideas here?

Thanks. --k.lib

 
aharami

Joined: 2007-04-16
Posts: 47
Posted: Tue, 2007-10-30 05:14

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.

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Tue, 2007-10-30 14:31

First thing you have to do is find the spot that creates albums. It will be in the if then statement that says if $child.canContainChildren and take the lightbox stuff out. Because if $child.canContainChildren that means it's an album and lightbox shouldn't load. You might want to take a look at the greypop theme. Specificly the albumlight.tpl. I use a slightly different approach on that theme but the if then statements should be good except for the link items.

 
aharami

Joined: 2007-04-16
Posts: 47
Posted: Wed, 2007-10-31 03:35
lvthunder wrote:
First thing you have to do is find the spot that creates albums. It will be in the if then statement that says if $child.canContainChildren and take the lightbox stuff out. Because if $child.canContainChildren that means it's an album and lightbox shouldn't load. You might want to take a look at the greypop theme. Specificly the albumlight.tpl. I use a slightly different approach on that theme but the if then statements should be good except for the link items.

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

 
aharami

Joined: 2007-04-16
Posts: 47
Posted: Wed, 2007-10-31 04:07

Is there something wrong with this bit of code I added in the head for theme.tpl here?

{* 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 *}
 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Wed, 2007-10-31 04:19
aharami wrote:
Is there something wrong with this bit of code I added in the head for theme.tpl here?

{* 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 *}

No that should work if the paths are correct.

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Wed, 2007-10-31 04:31
aharami wrote:
lvthunder wrote:
First thing you have to do is find the spot that creates albums. It will be in the if then statement that says if $child.canContainChildren and take the lightbox stuff out. Because if $child.canContainChildren that means it's an album and lightbox shouldn't load. You might want to take a look at the greypop theme. Specificly the albumlight.tpl. I use a slightly different approach on that theme but the if then statements should be good except for the link items.

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

You must have added lightbox to a $child.canContainChildren somewhere because your albums have the lightbox stuff in it. The reason your images don't popup is that your $child.resizedid is not returning a number. When I first integrated lightbox into greypop I had this problem all the time. Most the time it was that the resized images were too small. So what I did was test for that with an if then statement and used the $item.id when $child.resizedid didn't have a number.

 
aharami

Joined: 2007-04-16
Posts: 47
Posted: Wed, 2007-10-31 04:58
lvthunder wrote:
aharami wrote:
Is there something wrong with this bit of code I added in the head for theme.tpl here?

{* 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 *}

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.

 
aharami

Joined: 2007-04-16
Posts: 47
Posted: Wed, 2007-10-31 05:06
lvthunder wrote:
You must have added lightbox to a $child.canContainChildren somewhere because your albums have the lightbox stuff in it. The reason your images don't popup is that your $child.resizedid is not returning a number. When I first integrated lightbox into greypop I had this problem all the time. Most the time it was that the resized images were too small. So what I did was test for that with an if then statement and used the $item.id when $child.resizedid didn't have a number.

Ok that got me somewhere. I changed
arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedid`"
to
arg1="view=core.DownloadItem" arg2="itemId=`$child.id`"
and the photos popped up. So atleast I know lightbox is working. Just that the resize part isnt. Also gotta figure out why albums open up with lightbox when everything in the code seems ok to me.

 
aharami

Joined: 2007-04-16
Posts: 47
Posted: Wed, 2007-10-31 05:32

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?