• Jan
  • 27

TTG HTML Gallery

Current version 1.6

TTG HTML Gallery is a Web module template for Adobe Lightroom. Generated galleries are laid out using valid XHTML and CSS, and offer a bevy of customizations, providing an alternative to the table-based and relatively inflexible default HTML template boxed with Lightroom.

TTG HTML Gallery is built upon the framework of the TTG Slimbox Gallery 2.24, and comes to the table with all of that gallery’s built-in features, including annotations, color labels and ratings. Instead of loading images in a Slimbox overlay, however, TTG HTML Gallery loads each into its own page, eschewing Javascript for a more traditional presentation.

For those who’d rather get fancy, version 1.2 also brings support for PicLens. Read on below for details.

TTG HTML Gallery also supports automatic indexing via TTG XML Auto Index.

TTG HTML Gallery 1.6

Download | Sample Gallery | Forum Thread | Installation


System Requirements

TTG HTML Gallery is written in Lua and requires Adobe Lightroom 1.3 or higher.

onImage Navigation

onImage Navigation is an image overlay navigation system, comprised only of HTML and CSS, that allows the user to browse the gallery and return to the index by hovering their mouse over regions of the on-screen image. It has been tested successfully in Firefox, Safari, Opera, and Internet Explorer 6 and 7.

The above image shows the areas of interaction. Clicking inside the left 40% of the image, indicated in yellow, will take the user to the previous image. Clicking in the right 40% of the image, indicated in red, will take the user to the next image. And clicking in the upper center region, indicated in blue, will allow the user to return to the image index. On hover, icons will appear to indicate the region’s function.

By clicking in the lower center region, empty in the above image, the user can left or right-click the image to interact with it in the usual fashion. For example, the user could bring up the right-click menu and save the image to their hard drive.

These areas resize dynamically to accommodate images of any size or orientation.

PicLens

“PicLens instantly transforms your browser into a full-screen slideshow experience. PicLens makes photos come to life via a cinematic presentation that goes beyond the confines of the traditional browser window. With PicLens, browsing and viewing images on the web will never be the same again.” – PicLens.com

PicLens is a browser extension for Firefox, Safari and Internet Explorer that provides a slick and immersive 3D image viewing experience.

TTG HTML Gallery is now PicLens enabled. Visitors with the PicLens extension installed in their browser will be able to activate the feature in the same way as on sites like Flickr or Facebook, or they may choose not to use the feature, and simply browse the gallery in the usual fashion.

Visitors without the PicLens extension can use the gallery normally, or may opt to launch the PicLens Lite slideshow from the gallery menu bar.

PicLens is an extra feature and does not interfere with the gallery’s standard functionality, which remains unchanged.

Applying Colors and Ratings

In order to apply color labels and numerical ratings to thumbnails, class names must be set for each image. By default, the gallery pulls these class names from the Headline IPTC field. This can be changed via the Image Info panel, however.

Images may each be assigned a single rating and/or color. To apply a color, simply enter the name of the color into the Headline IPTC field. Accepted colors are transparent, red, yellow, green, blue and purple.

To assign a numerical rating, type out the word for the number of stars/circles you’d like to apply. Accepted values are zero, one, two, three, four and five.

In order to assign both a color and a numerical rating, enter one of each, separated by a space. For example, to label an image red with a rating of five, you would enter red five into the Headline IPTC field.

Of course, you may elect to leave the Headline IPTC field empty, in which case neither a color label or numerical rating will be applied to the image.

Changelog


v1.6 (2008-03-22)

Added footer options.

Revamped Remove Live_Update.js control scheme.

Now includes a brief ReadMe.

Bug fixes.

v1.5 (2008-03-08)

A menu! Five customizable menu items + slideshow + contact.

Improved support for Piclens, and now supports PicLens Lite. Support for custom logo and MP3 audio using PicLens Lite; logo and audio support will be supported in a future version of the PicLens client.

Reorganized Web module controls and panels; lots of additions and relocations for ease of use.

A major overhaul of code, in places both HTML and Lua. Cleaner, leaner, better!

Added option to remove live_update.js from exported galleries, reducing overall page load by 16KB.

Width of Collection Description now adjustable.

If unused, Collection Description, Annotations and Ratings code can now be removed from gallery to reduce overall gallery size.

v1.32 (2008-02-26)

Now with vertically centered thumbnails, without tables.

The menu item for the PicLens slideshow can now be enabled/disabled via checkbox.

v1.31 (2008-02-21)

PicLens was broken in 1.3. Now it’s fixed.

v1.3 (2008-02-21)

Enabled automatic detection for TTG XML Auto Index.

v1.21 (2008-01-28)

PicLens fixes and improvements.

v1.2 (2008-01-27)

Added support for PicLens and PicLens Lite.

New TTG logo in the Web>About menu.

v1.13 (2008-01-20)

By request, the title in the web browser title bar can now be set separately from the “Site Title” of the gallery.

v1.12 (2008-01-17)

Fixed onImage Navigation for all browsers. Now works in Firefox, Safari, Opera, and Internet Explorer 6 and 7.

v1.11 (2008-01-17)

Bug fix.

v1.1 (2008-01-17)

Overhauled a lot of code to make the gallery more functional, more compatible, and to improve its foundation for future expansion.

Added onImage Navigation.

v1.01 (2008-01-17)

Bug fix.

v1.0 (2008-01-17)

Initial release. Feature parity with TTG Slimbox Gallery 2.24.

Make a donation

If you enjoy my work and would like to pay for it, I accept donations via PayPal. Donations are wholly unnecessary, but would be greatly appreciated. Thank you!

Send this article to a friend »

« Next Article | ... ... | Previous Article »

Comment »

Jason
17 January 08 / permalink

Amazing job as always! I was curious if there was a way in some future release to allow for advancing to the next photo by clicking on the picture?

Matthew
17 January 08 / permalink

I don’t see why not. Let me try it.

Nicolas
17 January 08 / permalink

Yes, consistency with the slimbow/simpleviewer way of browsing would be sooooooo cool!
I needed a few seconds to locate the prev/next links in the corner… They can stay there, that said.

Thanks for all the good work!

Matthew
17 January 08 / permalink

Jason, Nicolas,

I’ve implemented the onImage Navigation feature in response to your requests. Unfortunately, it only works in Firefox and Safari. Other browsers will still need to resort to the old-style navigation menu. Anyway, I hope you'll like what I’ve done with it.

Matthew
17 January 08 / permalink

Nevermind the previous comment. The onImage Navigation now works properly in all browsers.

Jason
18 January 08 / permalink

I am utterly speechless! It’s beautiful Matthew.
Thanks!

-jason

David
19 January 08 / permalink

Great stuff! Works perfect for my needs. Donation on its way. Thanks!

Esko
13 March 08 / permalink

Great gallery! I’d like to use Google Analytics to track my visitors in my galleries, but I’m not sure how to add the tracking code to the gallery files. Is it even possible to edit the files to add the code?

(The code in question is a few lines of javascript and it should be inserted just before </body> tag.)

Matthew
13 March 08 / permalink

You’ll need to add the code manually to each exported gallery. Because the Javascript makes calls to an external website, LR gets a little temperamental when you have the code loaded into the Web module.

Merv
18 April 08 / permalink

Hi,
I’ve got a similar request on the google analytics. At the momement, I’m manually adding the lines to the index pages, which is ok as there are usually only 2 or 3 of them. However, it would be so much better if the lines of code could be added to each of the HTML files automatically as I dont usually go to each images HTML file and edit it. Even if it meant that the gallery could not be reviewed in LR, and only in a browser, that would be a very small price to pay!

my other option is to generate the galleries with aother program altogether, which would be a pity.

I’m happy to pay towards thing being done!

Merv.

tom
8 May 08 / permalink

Hi,

This integration with PicLens is awesome! Great job.

One thing would really make this for me. I wish there was a way to be
able to upload full images (the way JAlbum can) and then have a link to
them (separate from the larger preview). Even if this feature was
available by clicking the larger image in the plain HTML gallery, this
would make the plugin usable for me and would get my donation.

Thanks!
Tom

Matthew
8 May 08 / permalink

Hi Tom,

My Client Response Gallery handles a third, larger image rendition. You can find the current public release in the side menu of this page, or you can download the beta release of the upcoming version, which already out-classes the the public version in most ways.

Please let me know whether you find that gallery a fit for your needs.

Cheers,
Matt

TOm
14 May 08 / permalink

Thanks for quick response Matt,

I played around with the client response gallery. Another great piece of work. For some reason the full image option was grayed out. Any idea why? Also, is there or are you planning PicLens integration in this album?

Thanks again,
Tom

Matthew
14 May 08 / permalink

Hi Tom,

By “full image option”, are you referring to the Hi-Res image? If so, you need to enabled the Download Hi-Res button higher up in the controls in order to activate the Hi-Res image size slider.

No plans to implement PicLens in the Client Response Gallery, as it does not serve the purpose of the gallery. PicLens is great for “viewing galleries”, but the Client Response Gallery is intended for interaction and data collection; PicLens provides no interface for collecting information.

erik
30 May 08 / permalink

Hi Matthew,
great work, great site, like what you did with the layout!!
q: i’m trying to use one of your galleries as a startup screen for a site, some kind of splash screen. so when the site opens, the slimbox opens automaticly without clicking a tumbnail. Visitor only has to click “close” to return to actual site. Is this possible, and how?
(i searched your site and googled around alot, but no joy till now; i think it should be possible… but need the right direction i think)
thanx
erik

Matthew
30 May 08 / permalink

@erik:

Slimbox won’t do it, but Shadowbox can. See here and scroll down the section on Advanced Usage. You’ll be wanting the bit about the open() function.

john@Burn
30 June 08 / permalink

Any chance you could incorporate multiple pages into this gallery as well? Something like the way the default HTML galleries in PS3 and LR function (but better looking!). It generates how ever many number of pages it needs depending on quantity and column/row settings. Sometimes our galleries have 300 images which would be too many for one page.

Dave
3 July 08 / permalink

Matthew,
I really like this HTML gallery … just one quibble …

In version 1.61 the line break that you use in photos.rss breaks the piclens media feed under Win XP and Win Vista using IE and Firefox. If I reformat photos.rss using notepad to remove the characters and replace them with cr/lf (enter key) then it works.

Dave
9 July 08 / permalink

Also,

While the photos.rss works with the site provided by my ISP, the relative links fail when used with my personal thttpd linux server. I had to change all the links to absolute addresses. I also ran the rss file thorugh the feed validator at feedvalidator.org to clean up a few problems with the rss markup. Now Piclens works with the Thttpd server.

Name:

Email:

URL:

Comments support Textile formatting & Gravatars.

my personal information