TTG HTML Gallery
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.
- Compatible with Lightroom 2.x and 3.x.
- No additional licensing fees.
- Supports gallery pagination.
- onImage Navigation (see below) for navigating between images.
- CoolIris support.
- Displays up to 10,000 images.
- Made of valid XHTML and CSS.
- Seamless integration with TTG Pages.
- Supports use with TTG Auto Index.
TTG HTML Gallery
Sample Galleries Download Demo * Installation
* The Demo is fully functional, but will export only 10 images.
About Your Purchase
Upon purchasing TTG HTML Gallery, you will receive a download URL valid for nine uses or 352 days (1 year) — whichever comes first. After nine uses or one year, your URL will expire and a new purchase will be necessary to continue with product updates. Gallery updates will always be available from that same URL. Thus, the URL can be used for the initial download, plus eight updates within a year of your purchase. Be sure to save your URL in a safe place, as it cannot be retrieved if lost. If you have trouble receiving your URL after purchase, please ensure 1) that your payment has cleared with PayPal, and 2) that messages from E-Junkie.com are not being caught in your spam filter.
System Requirements
TTG HTML Gallery is written in Lua and requires Adobe Lightroom 2.x or higher.
onImage Navigation
Showing active navigation regions for images in TTG HTML Gallery.
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.
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
- v2.0.1 ( 2010-06-12 )
- Added support for LR3 watermarking.
- Bug fix: Google Analytics code now included on individual photo pages.
- v2.0 ( 2010-01-12)
- Now requires Lightroom 2.x or higher.
- Total overhaul; rebuilt from the ground up. New header, new everything.
- Added support for paginated galleries.
- 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.
{ 1 trackback }
{ 27 comments… read them below or add one }
Hi – I downloaded this and it was excellent for what I needed to do. I took only a few elements that needed to make a very basic HTML gallery and discarded the rest, which you can see here – http://www.paulamey.co.uk.
I need to make a similar site with the thumbnails displayed on the same page as the image but I tried bringing in the and tags into the detail page and it messed up when I tried to modify the manifest.
I thought the Panic Gallery would be the best starting point but it only generates one page, and I want each gallery item to be a separate HTML page.
I would also like to have the thumbnail highlighted with a style when it’s selected for that particular page. I don’t need any fancy motions or effects.
So – questions: how do I include the thumbnails on the detail page? and how do I highlight the selected thumbnail?
Many thanks,
Hugh
Hi Hugh,
That’s crossing out of the realm of supporting the product, and into the realm of developing an entirely new product. The changes you’re asking for would be a pretty hefty undertaking. You might try looking into TTG Smooth Gallery instead, and seeing if it might suit your needs.
Cheers,
Matt
Hi Matthew,
Just downloaded the TTG HTML gallery – it has a whole laundry list of things that I’ve been wanting, I love it. With one glaring exception – I can’t find where you can tweak the font size/color/justification of the Image Info / labels / title, caption, annotation, etc…?? It must be doable – your sample gallery has the title & caption in white, and on the gallery I generated these are gray – only a couple of shades darker than the background and nearly invisible.
Thanks for your help, and thanks again for a great product.
KvV
Hello,
I have come to your site as I want to display images in HTML via lightroom galleries while retaining the native image size. I don’t like the image size slider and I would prefer not to use standard flash gallery set up.
I just purchased this TTG HTML gallery and I see that I cannot display images at their native size/resolution.
What gallery, or solution might you have for this?
Thanks!
TTG Shadowbox Gallery’s Image Size slider maxes out at 15,000; images don’t upscale, so exporting at that value will cause your images to be processed at full size. The gallery also has several options for handling over large images in the viewport.
The next release of TTG Highslide Gallery Pro will probably have larger Image Size ranges as well, though currently maxes out at 1,500 pixels.
Hi Matthew,
Found what appears to be a glitch with the rendering of the gallery index page: In Lightroom and in IE, it’s rendered with 1 less columns than what has been selected. It renders properly in Firefox. Any ideas on this?
Thanks, love the new 2.0 version!
Hey, I’m glad you’re liking v2.0. What version of IE are you talking about?
Interesting… IE 6 displays it wrong (as does the LR 2.6 web module), and IE 7 renders it correctly.
Sounds like Lightroom is using IE6 to preview images in the Web module. You should upgrade your browser.
Since it’s a version issue, I think most people viewing the gallery will see it properly, so I’m not too worried about it.
Thanks!
THAT is exactly the right answer.
Sorry ahead of time for what may seem like a simple question …
When I am building out a gallery, is there any way to save all the details I entered in the \Site Info\ section? Basically, if I kind of like something, upload it to my website and then two days later I want to tweak it, it looks like I have to get all those fields the same. I must be missing something obvious.
You should be using the Template Browser (Web module, left control pane) to save your web gallery settings.
That worked perfectly. I knew I was missing something obvious. Thank you for the help.
TTG, Another question (possible bug report) regarding the Google Analytics code. I added the code to the Output Settings section and on the generated HTML gallery the thumbnail page includes the Google Analytics code in the source. Yet the photo pages do not, the page just ends with All Rights Reserved + the end body and html tags. Can you confirm whether or not this is an issue or if I am just doing something incorrect?
That is indeed an oversight on my part. I will get that fixed in the next update. Thanks for letting me know about it.
Matt -
I’m having problems opening this in a gallery created by TTG Auto Index, although – if I move it up a level, where it’s managed by TTG Pages, thinks seem to be OK.
I need to be able to use TTG HTML Galleries in a collection of galleries managed by TTG Auto Index.
Is this a bug or am I doing something wrong? The Gallery in question is ‘Annie’, on my site. It should be part of ‘Published in Patch”, but when I move it there – nada. Clicking on it won’t open it.
Thanks,
Mark
Maybe try removing the single-quotes in the title, changing ‘Annie’ to Annie. Problems with indexing are most often the result of punctuation being confused as code by the browser.
Hi, I am using TTG HTML gallery to creat my own web. Everything is working just fine, but unfortunately I can not find, how I can write a description text to indivudual image, like you have it it your sample gallery.
Thanks for help
Write text as captions or titles in your image metadata in the Library module. In the Web module, use the Image Info pane to setup a metadata source for your captions.
Thank you very much, as usual it was quite easy solution.
Matt,
Awesome template!
I just upgraded to LR3. Watermarking seems broken. Is there a way I can use the new graphic watermarking?
Thanks,
Dave
TTG HTML Gallery has not yet been upgraded to support LR3 watermarking.
When do you expect to upgrade TTG HTNL Gallery, Matt?
Hi, the yellow Installation link seems to be broken. I’d like to know how to install this please? It doesn’t seem to play as expected with the LR3 plug-in functionality.
You can get at the installation instructions from the Help menu of the site. I’ll get that link fixed as well; thanks for letting me know.
What’s not working as expected?
Hi, sorry, I made that comment before knowing more about galleries, templates, etc. and thought everything was a plug-in and hence one had to use the plug-in manager. Anyway it all works well now thanks. After testing it I went ahead and bought it!