# TTG Panic Gallery



## theturninggate (Mar 10, 2008)

*TTG Panic Gallery* is a new HTML gallery template for the Adobe Lightroom Web module, featuring a slick slide-scrolling effect.

The gallery loads thumbnails and large images together into a single page, and is meant for small presentations, but can handle more as you like. The gallery supports TTG XML Auto Index and PicLens, and the thumbnails can be positioned above or below the viewport.

View the sample gallery.


----------



## Andrew Hayton (Mar 10, 2008)

You are a genius


----------



## theturninggate (Mar 10, 2008)

Thank ye, Andrew.


----------



## theturninggate (Mar 22, 2008)

*TTG Panic Gallery 1.21*

TTG Panic Gallery 1.21 is released with the following changes/additions:

Thumbnails can now be positioned to the top, bottom, left or right or the viewport. Also added a new Wrap layout.
Added footer w/ options.
Added choice of ID Plate alignment.
Revamped Remove Live_Update.js control scheme.
Added a brief ReadMe.
View the new sample gallery.


----------



## theturninggate (Apr 23, 2008)

*TTG Panic Gallery 1.23*

TTG Panic Gallery 1.23 is now available featuring a few bug fixes and some code commenting.

I've also posted a tutorial on how to remove the Collection Description pane, a.k.a. Info Pane, and icon from the gallery.

Cheers,
Matt


----------



## BobH (Apr 23, 2008)

That's an excellent gallery, very nice.


----------



## Victoria Bampton (Apr 24, 2008)

PhotoCin, I've moved your post to an existing Shadowbox thread so it doesn't get lost.  http://www.lightroomqueen.com/community/showthread.php?t=1214


----------



## Jim (May 24, 2008)

*Panic Gallery = "nearly spiffy"*

I may have missed it but I am looking for the ability to simply show the metadata at the bottom of each image instead of the horrid floaty things that only show up if you mouse over the image.
Is this possible in the current version or is this a feature request to move up a gear to "nearly perfect"?


----------



## theturninggate (May 31, 2008)

Jim;1471' said:
			
		

> I may have missed it but I am looking for the ability to simply show the metadata at the bottom of each image instead of the horrid floaty things that only show up if you mouse over the image.
> Is this possible in the current version or is this a feature request to move up a gear to "nearly perfect"?



Hi Jim,

I designed the gallery so that the viewport would be sized to accommodate the image dimensions, meaning that there's no space for the metadata beneath the images. Because the "framing area" of the page is unchanging, the metadata would need to be placed within the sliding area, the viewport, which would cause the viewport to become elongated.

If you're comfortable editing template files, you could probably effect this change yourself.

Open the galleryInfo.lrweb file and make the following changes:

Add the desired height, in pixels, to the math equations found on

line 332:

```
["appearance.scroller.height"] = function() return string.format( "%dpx", nonCSS.photoHeight + ( ( nonCSS.photoPadding + nonCSS.photoBorderWidth + nonCSS.scrollerPadding ) * 2 ) ) end,
```

line 342:

```
["appearance.content.height"] = function() return string.format( "%dpx", nonCSS.photoHeight + ( ( nonCSS.photoPadding + nonCSS.photoBorderWidth ) * 2 ) ) end,
```

line 346:

```
["appearance.section.height"] = function() return string.format( "%dpx", nonCSS.photoHeight + ( ( nonCSS.photoPadding + nonCSS.photoBorderWidth + nonCSS.scrollerPadding ) * 2 ) ) end,
```

Probably the best place to add the math is following the nonCSS.photoHeight variable, so they would look something like:


```
... nonCSS.photoHeight + 25 + ( ( ...
```


I think that's all you should need to do to the galleryInfo.lrweb file. Next, open the HTML template for whichever layout you're using. For example, if your thumbnails are positioned on the bottom, you'd want to edit the bottom.html file.

Find the div class="section", which ought to look like this:


```
<div class="section" id="<%= image.exportFilename %>-pane"><div style="margin-top: <%= math.floor( ( model.nonCSS.photoFrameTotalHeight - ( image.renditions.photos.height + ( ( model.nonCSS.photoPadding + model.nonCSS.photoBorderWidth ) * 2) ) ) / 2 ) %>px;"><img src="photos/<%= image.exportFilename %>.jpg" class="photo" width="<%= image.renditions.photos.width %>" height="<%= image.renditions.photos.height %>" alt="$image.metadata.title"<% if model.nonCSS.disableToolTip then %><% else %> onMouseover="ddrivetip('<%= image.metadata.caption %>')" onMouseout="hideddrivetip()"<% end %> /></div></div>
```

You'll want to add your metadata variables inside this div, between the final </div> and </div> tags, like this:


```
<div class="section" id="<%= image.exportFilename %>-pane"><div style="margin-top: <%= math.floor( ( model.nonCSS.photoFrameTotalHeight - ( image.renditions.photos.height + ( ( model.nonCSS.photoPadding + model.nonCSS.photoBorderWidth ) * 2) ) ) / 2 ) %>px;"><img src="photos/<%= image.exportFilename %>.jpg" class="photo" width="<%= image.renditions.photos.width %>" height="<%= image.renditions.photos.height %>" alt="$image.metadata.title"<% if model.nonCSS.disableToolTip then %><% else %> onMouseover="ddrivetip('<%= image.metadata.caption %>')" onMouseout="hideddrivetip()"<% end %> /></div>

$image.metadata.title
$image.metadata.caption</p></div>
```

Then, in the Web module, use the option to disable the hovering tool tips.

I think that should do it; if not, let me know and i'll have another look.

Cheers,
Matt


----------



## Jim (May 31, 2008)

Matt,

Thank you very much indeed - that's exactly what I needed.
What a truly excellent service!

Regards,


----------



## davidannis (Sep 11, 2008)

I am not a Lightroom user but I am attempting to set up this template for my father's website.  I have everything working except:



			
				theturninggate;1'184 said:
			
		

> the thumbnails can be positioned above or below the viewport.



I can't figure out how to reposition the thumbnails.  Are there instructions somewhere?


----------



## theturninggate (Sep 12, 2008)

Use the "Position" option, located under the Appearance pane.


----------



## dannielsen-dk (May 15, 2009)

Thanks for a very nice gallery!
I was just missing to make more then 5 "Menu Item" is that possible??
And it would be nice to use the arrow-key to go through the pictures!:idea:

Regards


----------

