Siriux Modification request (Cool Stuff!)

Dear reader,

I am very interested in running a gallery2 with Lightbox script on it, since I utilize the gallery in a small site, the pictures break my layout.

For those who do not know Lightbox, this gallery2 uses it:
http://www.opticalpork.com

You can download the script here:
http://baZzz.com/lightbox/lightbox2.02+.zip

Tried to apply the intructions here: http://gallery.menalto.com/node/44443 to my theme, but that lead to disaster unfortunatly.

Is there anyone out there able to make this work on the Siriux theme on a 2.1.1a Version Gallery2? and willing to share the theme in a zip file? That would be really great! I am sure lots of people would love to have this as well! If you require I am willing to make a small donation to the creator of this zip file.

Thank you in advance,

Lqd.

That would be awesome, I already tried to email you at info [at] optical... but it came back to me. I love the minimalization you applied to that gallery! If you like you can contact me on msn messenger: "msn [at] hard [dot] fm"

Any thanks already! :D

I found it on a site which listed lightbox as a download and it pointed to your gallery.

Hmm...

http://codex.gallery2.org/index.php/Gallery2:Theme_Ideas

There it was, didn't realize it was this site... stupid me...

Thank you very much will start working on it now, I will let you know the results!

----runs off happy as a child!

Thank you!

It's been a couple hours now, I can't get this too work..

I keep trying to get the lightbox to work as well, but no luck

I get to the point where it tries to pull the image up, but the photo is not being displayed. Its as if it cannot find the photo or something.

Anyway we can pursuade you to post the theme that you have done so far hehe

I want lightbox SOOOOOO bad and I cant seam to get it working

I got everything showing up in the source properly (all the things lightbox nees to run) but for some reason, lightbox isnt loading when I click a pic.

OKay
No clue whats wrong
i uploaded the lightbox files into themes/siriux/
so that its like
themes/siriux/js
themes/siriux/css
themes/siriux/images

etc.

and this is the code in my album.tpl file that calls lightbox

<div class="gallery-thumb">
          <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" rel="lightbox[photos]">
          {if isset($child.thumbnail)}
            {g->image item=$child image=$child.thumbnail}
          {else}
            {g->text text="no thumbnail"}
          {/if}
          </a>
        </div>

and this is in the head in my theme.tpl file

 {* Add Lightbox javascript and CSS *}
    <link rel="stylesheet" type="text/css" href="{g->theme url="lightbox.css"}"/>
    <script type="text/javascript" src="{g->theme url="js/lightbox.js"}"></script>
    <script type="text/javascript" src="{g->theme url="js/scriptaculous.js?load=effects"}"></script>
    <script type="text/javascript" src="{g->theme url="js/prototype.js"}"></script>

when i view my gallery, and then check the source code, everything that i added so that lightbox would run is in there but it doesnt work

http://thegallery.dbhsusb.org

I've been watching this topic with interest for a few weeks now and today decided to have a go myself.

While I wasn't able to get it working I can see what's happening to stop it working.

Assuming that each of you has the javascript in the right place and everything else is correct, I can guess that each of you is having a problem with the following bit of code:
arg2="itemId=`$theme.resizeId[$child.id]`"
On my system there is no such variable as $theme.resizeId[$child.id] in the default Siriux theme.

I've searched around the forums and found several snippits of code that look like they might set it or similar variables, but each time without success.

So far the best bit of code I've come across is:

        /* Add resizedId to child values */
        foreach ($childIds as $childId){
                list ($ret, $resizeTable) = GalleryCoreApi::fetchResizesByItemIds(array($childId));
                if (isset($resizeTable[$childId][0])) {
                        $theme['resizeId'][$childId] = $resizeTable[$childId][0]->getId();
                }
        }

added just above the return in the showAlbumPage function, theme.inc file. While this should work it doesn't and I can't see why.

You need this bit to work so that the proper url is generated which lightbox can use.

Perhaps hObbel could share his bit of code with us that he has that sets the variable?

Compared my theme.tpl and yours, only paths to lightbox are diff...
can you please post your album.tpl file, i want to compare that too
thanks

I've been following this thread as well, and I must admit it's a little disheartening to see people having so much trouble getting this to work. Still, I think I'll have to try it myself this weekend. HObbel is an inspiration (love the minimalist design too).

I wanted to point out an alternative to Lightbox called Thickbox. It has a few advantages, including a smaller file size and the ability to smoothly scale images to the size of the browser window if they are oversize. I don't know if you can get it to display all the cool metadata like you have Lightbox doing, but it's probably possible since it can also popup full HTML pages instead of images.

I'm not associated with it, I've just been researching Lightbox and its derivatives for awhile, and thought it might be useful here. So many fun options... I look forward to integrating one into gallery.

It helped in as far as it confirms that I'm not doing any thing wrong as per say, I had a look at your other files (album.tpl and theme.inc) and they are also the same as mine.

I just don't get it, it looks like $theme.resizeId[$child.id] is not being set. Each of the lines in the resulting html looks like this (I've removed the extra info until I get the basics working):
<a href="/gallery2/main.php?g2_view=core.DownloadItem&amp;g2_itemId=" rel="lightbox[photos]">
If I copy a resize url properly and past that in it works so I know it's not a problem with lightbox but with Gallery. At the url below you can see that example working at the bottom of the page.

Url: http://www.tuxx.org.uk/gallery2/v/n_hw_scotland/
Gallvery version: 2.1.1
Web server: apache-1.3.27-9.legacy
PHP version: 4.1.2

So how can I trace $theme.resizeId[$child.id] through the system?

I had turned debug on and that didn't help at all, or at least I couldn't find what I wanted to see. Ideally I want to print out each of the variables as I get them back from the API. Then I can see what is actually happening and at what stage it's losing the data.

In otherword how do I debug the foreach loop in theme.inc?

Luxo: You are aware of http://gallery.menalto.com/node/128 - right?

Genzil: I'm not really good at all this smarty stuff, I just managed to hack this together somehow.

I'm doing this too and I got a bit farther then you did genzil. Here is what I used.

{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.id`"}" rel="lightbox[photos]">
{/if}

This way if it's an album it doesn't apply the lightbox. I'm using my own theme (greypop) and not sirux though so it might be different for you.

I'm not sure what the $theme.resizeId[$child.id] is suppost to do for you though.

I also have a way for it to get all the picures in the album but it only works right on the first page. Once I get all the bugs worked out I'll share it.

I can get that and have been able to from the start, that's what demonstrates that the javascript works.

Most of my pictures are bigger than the screen is. If I use the full/original size I can't see the whole picture, so I have to use the resized imaged. The resizeId is the id of the resized picture to 640x640 which is a size which fits on most screens.

Ah, in which case the values are not being set as far as I can see.

OK here is how I did this. I'm not sure if this is the best way or not, but....

Create a file in modules/core/templates/blocks/local/PeerList.tpl
and paste this in

{*
 * $Revision: 1.3 $
 * If you want to customize this file, do not edit it directly since future upgrades
 * may overwrite it.  Instead, copy it into a new directory called "local" and edit that
 * version.  Gallery will look for that file first and use it if it exists.
 *}
{g->callback type="core.LoadPeers" item=$item|default:$theme.children.0
	     windowSize=$windowSize|default:null}
{assign var="data" value=$block.core.LoadPeers}

{if !empty($data.peers)}
<div class="{$class}">
  {if !empty($last)}
  {foreach from=$data.peers item=peer}
    {assign var="title" value=$peer.title|default:$peer.pathComponent}
    {if ($peer.peerIndex > $last)}
      <a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$peer.id`"}" title='<h4>{$peer.title|markup}</h4><br><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$peer.id`"}">View Photo Page</a><br>{g->block type=exif.ExifInfo item=`$peer`}'rel="lightbox[photos]">
	
      </a>
    {/if}
  {/foreach}
  {else}
    {foreach from=$data.peers item=peer}
    {assign var="title" value=$peer.title|default:$peer.pathComponent}
    {if ($peer.peerIndex < $first)}
      <a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$peer.id`"}" title='<h4>{$peer.title|markup}</h4><br><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$peer.id`"}">View Photo Page</a><br>{g->block type=exif.ExifInfo item=`$peer`}'rel="lightbox[photos]">
	
      </a>
    {/if}
  {/foreach}
  {/if}
</div>
{/if}

Then at the top of album.tpl paste this in.

{assign var="total" value=0}
{assign var="first" value=0}
{assign var="last" value=0}
{math equation="x * y" x=$theme.params.columns y=$theme.params.rows assign=total}
{if ($theme.currentPage > 1)}
{math equation="(x - 1) * y + 1" x=$theme.currentPage y=$total assign=first}
{g->block type="core.PeerList" class="Peers" windowSize=$theme.childCount first=$first}
{/if}

Then paste this part in replacing the link in two places

{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.id`"}" title='<h4>{$child.title|markup}</h4><br><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Photo Page</a><br>{g->block type=exif.ExifInfo item=`$child`}' rel="lightbox[photos]">
{/if}

Then at the end of that file paste this.

{if ($theme.currentPage < $theme.totalPages)}
{math equation="x * y" x=$theme.currentPage y=$total assign=last}
{g->block type="core.PeerList" class="Peers" windowSize=$theme.childCount last=$last}
{/if}

Then in theme.tpl at this right before the </head>

{* Add prototype javascript library *}
<script type="text/javascript" src="{g->theme url="js/prototype.js"}"></script>
{* Add Lightbox javascript and CSS *}
<link rel="stylesheet" type="text/css" href="{g->theme url="lightbox.css"}"/>
<script type="text/javascript" src="{g->theme url="js/lightbox.js"}"></script>
<script type="text/javascript" src="{g->theme url="js/scriptaculous.js?load=effects"}"></script>

Change the paths in lightbox.css and lightbox.js and I think that's it. I think this pulls the sized image but I'm not sure. I know when the browser is smaller than the picture it swrinks it down and gives you a link at the bottom to see the full size picture. The size of picture that I upload is close to the resized version.

Also I read that Google doesn't like hidden text so in this example I used links that didn't have anything in them so the links aren't hidden but you don't see anything. Also if you go to page 2 and click it still keeps them in the same order.

Here's an example http://www.lvthunder.com/gallery2/v/UtahWin05

Try this. Maybe it will give you the resized image.

&g2_imageViewsIndex=0
<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.id`" arg3="g2_imageViewsIndex=0"}" title='<h4>{$child.title|markup}</h4><br><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Photo Page</a><br>{g->block type=exif.ExifInfo item=`$child`}' rel="lightbox[photos]">

okay...
gonna give lvthunder's version a try
maybe its cuz of the resize thing in the code that screws up lightbox

tried it. seemed easy enough, but:

Does anyone know what that is? Must be in album.tpl...

lvthunder, you're right. Turned on debug now and got this:

If that's of help. Also, I think it's here

of the assign block at the top of album.tpl
I commented the line and it showed no error. Also I had some values insteads of $theme.params.columns and $theme.params.rows and it worked.
Somehow it can't read $theme.params.columns (and .rows)

The resized pics would be great as well...

I got the same errors:

Security Violation

The action you attempted is not permitted.

Back to the Gallery
Error Detail -
Error (ERROR_BAD_PARAMETER) : Smarty error: math: parameter x is empty

    * in modules/core/classes/GallerySmarty.class at line 109 (gallerycoreapi::error)
    * in lib/smarty/plugins/function.math.php at line 53 (gallerysmarty::trigger_error)
    * in /mounted-storage/home19d/sub001/sc19888-SBYG/g2data/smarty/templates_c/%%2182596723/%%25^256^25661EA0%%album.tpl.php at line 6
    * in lib/smarty/Smarty.class.php at line 1861
    * in modules/core/classes/GalleryTemplateAdapter.class at line 659 (gallerysmarty::_smarty_include)
    * in /mounted-storage/home19d/sub001/sc19888-SBYG/g2data/smarty/templates_c/%%2182596723/%%5D^5D2^5D29E2DD%%theme.tpl.php at line 59 (gallerytemplateadapter::theme)
    * in lib/smarty/Smarty.class.php at line 1258
    * in modules/core/classes/GallerySmarty.class at line 90 (smarty::fetch)
    * in modules/core/classes/GalleryTemplate.class at line 206 (gallerysmarty::fetch)
    * in main.php at line 418 (gallerytemplate::fetch)
    * in main.php at line 87
    * in main.php at line 80

System Information
Gallery version 	2.1.1
PHP version 	4.4.2 apache
Webserver 	Servage.net Cluster (Enhanced Apache)
Database 	mysql 5.0.15-standard
Toolkits 	SquareThumb, NetPBM, Gd
Operating system 	Linux node4.c10 2.6.11-1.1369_FC4smp #1 SMP Thu Jun 2 23:08:39 EDT 2005 i686
Browser 	Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

I calculate the number of images on the screen with that fomula. Matrix and all the matrix clones have user defined rows and columns. Since it appears Siriux doesn't have that just take the math equation out and at the top where it says
{assign var="total" value=0} replace the 0 with how ever many thumbnails are on the page at a time.

I'm still not sure about the resize id. If I have time I'll look into that this weekend.

All of you: Have a look at this http://gallery.menalto.com/node/47353 Does that help?