Lightbox JS Tutorial for non-programmers

yea I did. but I just looked thru it and it was missing a curly bracket at the end. So that's probably why $child.resizedId wasnt working. It seems to be working correctly now. Phew! Thanks for all your help lvthunder! Now I have to figure out why lightbox is opening up on album thumbnails and how to get the photo description to show up in lightbox.

As I understand, lightbox wont update view count for pics. lvthunder, did you figure out a way to update view count with lightbox enabled? If so, how did you do that?

thanks for all your help lvthunder, but Im giving up on lightbox. Ice theme is based off the carbon theme, so I tried implementing lgithbox in that theme to see if it works and I got the same problem. album thumbnails open up with lightbox. I cant figure it out. something to do with the new bit of logic where the {if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')} code is outside of the {if isset($theme.params.$frameType) && isset($child.thumbnail)} code. All the lightbox examples I have seen work with versions which have the canContainChildren if contained within the theme.params.$frameType if statement.

woohoo. thought I'd give it another try and it worked! thanks for all your help lvthunder! You have my deepest gratitude. I put the canContainChildren if within the frametype if and lightbox only works with image thumbnails now. mustve been something with the "capture linkurl" method that was being used before.
Anyways are the changes i made. Changes should work for Ice, matrix, and carbon themes since they all use the capture linkUrl method.
Original code from Ice child.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>

My modified code to make lightbox work

{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')}
    	{assign var=frameType value="albumFrame"}
    {else}
        {assign var=frameType value="itemFrame"}
    {/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}
			{if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')}
				<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" alt="{$title}" title="{$title}">
			{else}
				{if $theme.params.dynamicLinks == 'jump'}
					<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}" alt="{$title}" title="{$title}" rel="lightbox[photos]">
				{else}
					<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}" alt="{$title}" title="{$title}" rel="lightbox[photos]">
				{/if}
			{/if}
			{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')}
				<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" alt="{$title}" title="{$title}">
			{else}
				{if $theme.params.dynamicLinks == 'jump'}
					<a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}" alt="{$title}" title="{$title}" rel="lightbox[photos]">
				{else}
					<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}" alt="{$title}" title="{$title}" rel="lightbox[photos]">
				{/if}
			{/if}
		    {g->image item=$child image=$child.thumbnail class="giThumbnailIce"}
				</a>
		{else}
		  <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" class="giMissingThumbnail">
		    {g->text text="no thumbnail"}
		  </a>
		{/if}
	{/strip}
	</div>

1 and 2. Take a look at my lightbox links in greypop. If I remember correctly everything you want in lightbox goes in the description. Just beware that you can't have any apostrophes or it will break. Greypop tests for this and replaces the ' with an equivalent.
3. You need to use the lightbox module I made for greypop for this. In albumlight.tpl of the greypop theme you can see at the beginning and end where it calls the templates before and after. You need that part in your album.tpl so lightbox loads all the links for the images that aren't on the current page.
4. Other then the stuff in the {} smarty is just HTML so you'd want <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" alt="{$title}" title="{$title}"><p class="giTitle">{$child.title|markup}</p></a>

Well you can do one of two things. Either use the one with the greypop theme (it's an older version) that I modified so that if javascript is disabled it will show the photo page instead of just the image. If you do that you need to modify your links to look close to what I have in greypop. If you want to use your version just replace the js file with yours. If you do this you need to change the links in before.tpl and after.tpl

Yes, put the entire lightbox folder inside gallery/modules. You can either leave the stuff you have in theme.tpl or add this to the $ret = $this->preloadBlock($template, 'lightbox.head'); to theme.inc right before all the resizedid stuff. I did it that way because I'm trying to make the lightbox module include as much of the lightbox stuff as possible so it can easily be ported to other themes. I obviously have a long way to go to get to that goal though.

lvthunder, i found this old post by you in this thread. where you suggest creating peerlist.tpl. Can I follow that method and use the latest version lightbox I was using before?

The only thing now is don't have an ' in your titles. If you do it will break things. If you want ' in your titles there is some code in albumlight.tpl that changes them to something that doesn't break.

Your URL just gets me to a login place, but generally when you don't have a close button it's the paths the in css file that's the cause. By the way you can click below the lightbox and it will close.

What's not working? You need to provide more detail then that. If you don't want to mess with it try out the greypop theme. It has lightbox integrated and it looks close to matrix. You might want to change the colors because greypop is a dark grey theme.

You need to check the path to the image of the closed button. Off the top of my head I can't remember if that's in the js file or the css file.

Try the full path to the image starting with http://

Maybe it's the nonstandard port number, but that path looks odd. What's the path to your gallery?

Your loading all the javascript multiple times from multiple locations so I'm guessing which one loads last is changing the path.

Here's the head part of your code.

<html>
<head>
<link rel="stylesheet" href="/gallery2/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/gallery2/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/gallery2/lightbox/js/lightbox.js"></script>
<script type="text/javascript" src="/gallery2/lightbox/js/efx/scriptaculous.js"></script>
<link rel="stylesheet" type="text/css" href="main.php?g2_view=imageframe.CSS&amp;g2_frames=none"/>

<link rel="stylesheet" type="text/css" href="modules/core/data/gallery.css"/>
<link rel="stylesheet" type="text/css" href="modules/rating/rating.css"/>
<link rel="stylesheet" type="text/css" href="modules/icons/iconpacks/silk/icons.css"/>
<link rel="stylesheet" type="text/css" href="modules/rating/rating.css"/>
<script type="text/javascript" src="lib/yui/yahoo-min.js"></script>

<script type="text/javascript" src="lib/yui/connection-min.js"></script>
<script type="text/javascript" src="modules/rating/rating.js"></script>
<script type="text/javascript" src="lib/yui/yahoo-min.js"></script>
<script type="text/javascript" src="lib/yui/connection-min.js"></script>
<script type="text/javascript" src="modules/rating/rating.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Prueba 1</title>
<link rel="stylesheet" type="text/css" href="themes/matrix/theme.css"/>
</head>
<link rel="stylesheet" type="text/css" href="/public_html/gallery2/lightbox/css/lightbox.css" />
<script type="text/javascript" src="/public_html/gallery2/lightbox/js/prototype.js"></script>

<script type="text/javascript" src="/public_html/gallery2/js/lightbox.js"></script>
<script type="text/javascript" src="/public_html/gallery2/lightbox/js/scriptaculous.js?load=effects"></script>
<link rel="stylesheet" type="text/css" media="screen" href="themes/matrix/includes/css/lightbox.css" />
<script type="text/javascript" src="themes/matrix/includes//js/prototype.js"></script>
<script type="text/javascript" src="themes/matrix/includes/js/effects.js"></script>
<script type="text/javascript" src="themes/matrix/includes/js/lightbox.js"></script>
<body class="gallery">

So if you don't have a lightbox module or g2 embedded you need to look at theme.tpl to remove the duplicates.

On the lightbox forum I found an interesting update written by Justin Barkhuff that adds an auto-slideshow and prev-next links to the caption area. You can find it here:
http://www.justinbarkhuff.com/lab/lightbox_slideshow/

I've been using greypop for my gallery for a while and am quite happy with it.
I've been trying to update it with this slideshow version though I'm not having much luck.
Anyone want to give it a try and let me know what I have to do?

I'm surprised it would be all that hard. Isn't most of the lightbox code you used fairly independant of gallery. I would have thought it would just be a few lines of code that have to change. Did you have to change much lightbox to get it to work in greypop? I was going to give this a try myself but your comment is giving me pause!

ok.. I expect we can get it to work. Seems to me this would be a pretty sweet enhancement to greypop or other themes.
I'm no javascript wiz either but its not rocket science! I'll play around with it when I have some time. But if
anyone else is motivated to do it before me, that would be great.

I posted the lightbox slideshow files in the main greypop thread here.

Hello,

I have an error with the gallery 2.2.5 and lightbox 2.0.4. The lightbox doesn't work because it need the builder.js. The solution is add the line <script type="text/javascript" src="/path/to/lightbox/js/builder.js"></script> before the load of lightbox.js in the head of the theme.tpl.

Greetings

Basically what you have to do is look at the unmodified old version and find the same spot in the new script. I'm using a pretty hevyally modified version now that I can't be much help. My version uses jquery instead of the prototype and scriptilous.

Either changes haven't been made to your tpl files or more likely your server is processing them in some fashion and not serving them up as text files.

Either way, from looking at the source of one of your pages, you didn't use rel="lightbox" but rather used rel="Lightbox"

try lightbox (lowercase)

Though that probably won't fix it as it appears the change isn't made to the right section in album.tpl as rel="lightbox is set on albums (thumbs) and not photo (thumbs)

http://mattpesquet.com/photo/main.php

Can you zip up your siriux theme and either post it or post a link to it.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

Please start new threads for your other questions as they'll get lost here.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here