TTG Slimbox Gallery

Current version 2.63

17 April 08

TTG Slimbox Gallery is a Web module template for Adobe Lightroom that generates galleries using Christophe Beyl’s Slimbox.

Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

For version 2.0, TTG Slimbox Gallery has been completely rebuilt from scratch, coded in Lua – the new standard for Lightroom web galleries. This allows for a number of significant improvements. TTG Slimbox Galleries are now 100% valid XHTML and CSS, requiring no post-export modifications; are fully compatible in all major browsers, including Firefox, Opera, Safari and Internet Explorer 6 and 7; offer more customization options than ever before.

Version 2.3 adds support for PicLens. Read on below for details.

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


TTG Slimbox Gallery 2.63


Download | Sample Gallery | Forum Thread | Installation


System Requirements

This gallery requires Adobe Lightroom 1.3.

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 Slimbox 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.

PicLens functionality requires that your gallery be hosted on a web server. PicLens will not function from within the Lightroom Web module, nor will it run from your local hard drive.

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.

Creating a Selection Gallery

From version 2.6, TTG Slimbox Gallery includes Form-to-Email functions previously featured in the now discontinued TTG Selection Gallery. To use these features, check Enable Selection Gallery, found in the Appearance pane in the Web module. For additional instructions on setting up your selection gallery, read the selection gallery documentation.

Why Slimbox?

Adobe Lightroom is a powerful tool for photo organization and processing. One of its many features is the capability to generate web photo galleries from a user specified collection of photos.

Lightroom comes equipped with two basic galleries, one HTML-based and the the other Flash-based, and offers colorful variations each. From my perspective, however, Christophe Beyl’s Slimbox is a far more simple and elegant approach to galleries.

Flash galleries take an eternity to load, making them very unfriendly to users on slow connections (my parents, for example). HTML galleries are just a mess, requiring individual display pages for each image in the gallery. That’s too many pages a user need click through and load.

Slimbox galleries run from a single page, minimize gallery load times and look fantastic. By my reckoning, Slimbox for Lightroom is a no-brainer.

Changelog


v2.63 (2008-04-18)

French translation by LPerrier.

v2.62 (2008-04-17)

German translation by Juergen Ritter.

LR/Windows bug fixes.

v2.61 (2008-04-09)

Fixed a coding error that prevented forms from working in selection galleries.

v2.6 (2008-04-01)

Integrated TTG Selection Gallery features; TTG Selection Gallery discontinued.

Support for cell numbering.

Option to disable right-click menu.

v2.53 (2008-03-22)

Added footer w/ options.

Added choice of ID Plate alignment.

Revamped control scheme for Remove Live_Update.js.

Added a brief ReadMe.

v2.52 (2008-03-17)

Bug fix.

v2.51 (2008-03-08)

Brings TTG Slimbox Gallery to feature parity with TTG Shadowbox Gallery 2.51, with improvements in the following areas:

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.

Slimbox: dropped themes, added controls for colors, loading and close images, borders; additional changes.

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.

Additional changes.

v2.41 (2008-02-25)

Vertically centered thumbnails, without tables!

v2.4 (2008-02-21)

Enabled automatic detection for TTG XML Auto Index.

v2.31 (2008-01-28)

PicLens fixes and improvements.

v2.3 (2008-01-27)

Added PicLens support.

New TTG logo in the Web>About menu.

v2.26 (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.

v2.25 (2008-01-17)

Bug fix.

Added a third overlay theme.

v2.24 (2008-01-07)

Reworked the code for color labels and ratings; redesigned the ratings badges.

Updated to Mootools v1.11.

v2.23 (2008-01-06)

Number of columns should now display properly in IE6.

Thumbnail borders now display in IE6.

v2.22 (2007-12-23)

Added a German translation by Juergen Ritter.

Some coding and interface tweaks.

v2.21 (2007-12-08)

Thumbnail Size now split into two separate sliders for Thumbnail Width and Thumbnail Height. Total size of each thumbnail’s containing frame is based on width.

v2.2 (2007-12-08)

Image Size has been split into two separate sliders for Image Width and Image Height. These allow you to set constraining dimensions on your images; images will size to whichever value they hit first.

v2.11 (2007-12-04)

Further slider improvements under Lightroom for Windows, courtesy of Juergen Ritter.

v2.1 (2007-12-03)

Improved behavior under Windows, though runtime errors still occur. Thanks to Andy Rahn at Adobe for his work on this.

Added support for color labeling and ratings. See usage instructions above.

v2.0 (2007-11-16)

Requires Lightroom 1.3 or higher.

Rebuilt from the ground up in Lua.

Supports text annotations for thumbnails. Content and positioning fully configurable.

Moved the ID plate to the top of the page. ID plate now displays properly in Internet Explorer 6.

Lots of new customization options.

TTG Slimbox Gallery 1.6.1, the last XML/XSLT version, is available here.

v1.6.1 (2007-07-06)

Layout and mathematic changes to the XHTML gallery to improve support for columns.

v1.6 (2007-07-05)

Thumbnail size is now independent of the number of columns. Each value can be set independently of the other, and the containing DIV for the gallery resizes dynamically to fit the contents.

Upgraded to Slimbox 1.41.

The gallerymaker.xml file has been significantly cleaned up and reorganized.

v1.5 (2007-06-05)

Added TTGSlimboxGalleryXHTML version.

HTML and CSS tweaks to improve output.

v1.4 (2007-05-22)

Upgraded to Slimbox 1.4 and Mootools 1.1.

Reorganized panes to (hopefully) make more sense.

Replaced thumbnail size slider with a “combobox” selector. Thanks to Juergen Ritter for sorting this out.

v1.3 (2007-05-12)

Uses CSS display:none; attribute to remove ID plates when the gallery is viewed using IE6. This is because of PNG display problems in that browser. ID plates appear normally in other browsers.

Added more font family and size control options.

v1.2.1 (2007-05-11)
Remedied a problem wherein thumbnail frame shadows (PNG images) were not displaying properly in IE6. The solution: disabling the shadows only in IE6 and prior versions, replacing them with a border. This happens in the iepngremoval.css file, for anyone who’d like to fiddle with it.

v1.2 (2007-05-10)

Thumbnail frames now resize with the thumbnails. To keep galleries centered, recommended values are provided within the module interface.

Description font size can be changed.

Additional code cleaning.

v1.1 (2007-05-07)

Added a Watermark checkbox.

Improved the coding of tables around thumbnails, allowing for smaller gallery file-sizes and faster loads.

Moved the image location in the directory structure. The gallery now looks for photos in content/bin/.

A few other small coding tweaks.

v1.0.1 (2007-05-06)

Upgraded Slimbox to version 1.31.

IE6 compatibility improvements.

Other bug fixes and internal improvements.

v1.0 (2007-05-05)

Expanded the Color Palette to allow for greater visual customization of galleries.

Fixed the Web Link for the ID plate.

Added output controls to the Output Settings pane.

beta (2007-04-30)

Initial release, running Slimbox 1.3.

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 »

3 May 07 / permalink

Nice work.

3 May 07 / permalink

Matt,
I’m on a Windows box, and the zip file doesn’t unzip as you describe. The result is that LR doesn’t recognize the new gallery.

Any hints would be appreciated.

:-)

5 May 07 / permalink

wow wow wow! I have been attempting to learn the liqhtbox, litebox, slimbox, xml, xhtml, js, xslt etc. The only reason is so that I could modify my lightroom generated galleries to do this and today I see this. wow! I love it. Thanks!!!

6 May 07 / permalink

Patrick,
Your extraction software may be creating an additional folder in which to house the contents of the zip archive. If this is the case, the template files are one level too deep in the directory structure. Be sure to copy the folder from within the archive – not the directory created by the extraction software – to the Web Galleries directory in Lightroom. I hope that solves it!

Jay
7 May 07 / permalink

Wow, I was not even aware that users could create additional modules!

Great work!

8 May 07 / permalink

Hi – just a wee note to thank you for this. It really produces classically elegant web output and I’m very, very grateful to you for the work and generosity.

I love the functionality!

9 May 07 / permalink

Now that I’ve read the IE6 compatibility section, I just like it – no buts!

9 May 07 / permalink

Hi Matt,

Thank you so much for putting this together and sharing it with others. I love the simplicity of your gallery design and especially love the Lightbox Flash/java plugin.

I wanted to know if you are familiar with any compatibility issues with Firefox 2? The gallery loads just fine but when I click on the photos, the ‘lightbox’ pop sup, resizes accordingly, displays the caption tag from the metadata but fails to display the full size image. In IE7, everything works fine.

-Buddy Will

10 May 07 / permalink

Matt,
It works very well and really spiffs up the gallery. Buddy’s problem doesn’t seem to exist on my Windows XP computer

Mel

11 May 07 / permalink

Matt,

Thank you so much for the help. For some reason, one of the 4 galleries will not render in full size images but the other galleries worked in Firefox 2. IE7 is fine but I’m loyal to FF2 so I am going to regenerate the gallery from Lightroom and try it again. It seems to work now; thanks to your support. I love the gallery.

best,

-Will
ps: Would you be down for posting tips on how to generate the slimbox gallery into an index page for multiple galleries?

Dan
11 May 07 / permalink

First, I want to thank you for your hard work on these great new LR templates. I much prefer the look of Slimbox compared to the default LR Flash galleries. Thanks!

Second, my galleries work fine in IE7 and Firefox, but even after doing the minor IE6 fix, I seem to have some problems correctly viewing the thumbnail shadow PNGs. Also, some of the thumbnails don’t show up at all. Any ideas why this might be? I’m way too much of a newbie to figure it out :)

Best,
Dan

11 May 07 / permalink

Dan, there’s a file included with the gallery called pngfix.js that’s supposed to fix the PNG problem in IE6. I just checked on the code of an exported gallery, and it looks like the tag that’s supposed to be calling it is somehow becoming commented out. I’ll try to get it fixed in the next update.

As for the thumbnails, I’ve noticed that Lightroom sometimes hiccups. Check the preview pane before exporting a gallery and make sure all of the images are showing. If not, reload the gallery and try again.

For galleries that are already exported, check the image folders and make sure all of the images and thumbnails are accounted for. If not, export again. If so, try reloading the gallery in your browser.

Dan
11 May 07 / permalink

Thanks for the fast reply Matthew! Great!

11 May 07 / permalink

Nice effort on the gallery. Is there any way for the thumbnails to be larger than 130px?

11 May 07 / permalink

Tommy, there’s a slider, “Thumbnail Size”, in the Output Settings panel. The range of adjustment is 70 to 190 pixels. Make sure you’re using the latest version of the gallery.

12 May 07 / permalink

Dan, version 1.2.1 remedies your PNG problem with the thumbnail frames’ shadows, though maybe not in the way you were hoping for. See the changelog, above, for details.

There is a problem with the ID plate in IE6, though, and it’s the pngfix.js script that’s causing it. Not quite sure how to address the issue yet.

Flo
14 May 07 / permalink

Matt,
thanks for the nice work. I realy pushes to create new galleries.

14 May 07 / permalink

I’m using the latest version now. Could you give me the location where the watermark’s settings are? I want to adjust the font/size/text, etc.

14 May 07 / permalink

Tommy,
Insofar as I’ve been able to tell, the specifics of the watermark – font, size, etc. – are internal to Lightroom. They are not specified anywhere in the gallery, and I don’t know whether it’s possible to change them. Sorry.

14 May 07 / permalink

really nice work!

it’s there a way to add pages (with ‘prev’, ‘home or index’ and ‘next’links)and limit the number of images in each page?

15 May 07 / permalink

Noyo,
Pagination goes against the purpose of what I was doing here. Slimbox is really meant for single-page galleries. However, if it’s pages you want, you could always divide your images and export multiple galleries. In some future version, I’m considering the inclusion of additional menu items, which you could very well set to jump to another gallery.

In the meantime, you can edit the index.html file of any exported gallery and add more hyperlinks to the #contact DIV, along with the contact link.

15 May 07 / permalink

thank you! i’ll try that…

18 May 07 / permalink

Hi

First of all thank you so much for making a Slimbox for LR. It’s fast and easy and it looks great. I have one issue though. I don’t know if this is the place to ask such a question…but here it goes: It’s about the dotted line separating header and body. Is it possible to remove that dotted line leaving a unspoiled background colour?

Thanks again

Jacob, Denmark

19 May 07 / permalink

Hi Jacob, and thanks for your compliments. You can remove the dotted line by editing the gallery.css file in the exported gallery, or the gallerymaker.xml file if you want to remove it from the template altogether.

In gallery.css, look for this line under the #description selector:

border-bottom: 1px dotted #999 !important;

In gallerymaker.xml, look for the CSS denoted DESCRIPTION, and delete the line for border-bottom.

19 May 07 / permalink

Let me join in thanking you for this wonderful Lightroom gallery! Perhaps there is a feature here that I have been looking for: like many, I post my photos for friends and relatives to admire/critique. Since they don’t know the details of each photo, I would like to add a line or two to the large image – not the thumbnail. I have tried it with this gallery, but it adds the same text to every image. I want different text for each image.

Is this possible?

Thanks again,

-David

19 May 07 / permalink

David,
Just add whatever information you like in the metadata of each image using the Library module. Then, in the Web module, find the Image Settings pane, check the Caption box, then select Custom Settings and Edit. Specify which metadata fields you’d like to include and organize your data as you like. The captions will show with each photo. This works for both my Slimbox and SimpleViewer galleries.

19 May 07 / permalink

Thanks – works great!!!

-David

22 May 07 / permalink

I have been hacking away at the code and have come across two peices that I cannot figure out. Where if anyplace is the code to define how many columns of pictures there are. Currently it has 4 by default is there a way to change that? Also is there a way to create a maxamum image height and width. With lovely web standards the way that they are I do not want my users to have to scroll to see the entire image.

22 May 07 / permalink

Nako,
The thumbnails are contained within a 720px-wide DIV and set to float: left via CSS. The number of columns is determined by how many thumbnails can fit within that space, so if you adjust the thumbnail size, then a greater or lesser number of thumbnails will take up each row.

As for large image dimensions, there is a single slider that controls both width and height. To my knowledge, there is no way to cause the web gallery module to accept differing values for each dimension, though I may be mistaken. If you’d like to set different dimensions for landscape and portrait orientations, please read my article on the matter.

25 May 07 / permalink

Help – for me too I just can’t get LR to find it. The unzipped folder is in (on PC) C:\ Documents and Settings\ME\Application Data\Adobe\Lightroom\Web Templates – it looks odd as its a folder but everything else in there is a .lrtemplate file. On start up no way does LR find it.

What else can I try – these files are unzipped and I can read Them.

25 May 07 / permalink

I very excited to find this, as I was in the midst of working on a new web gallery design using Lightbox and Lytebox. However, I’m stumped by something which must be simple: I can’t get Lightroom to see the gallery in the web module. I’m on Mac, and have put the TTGSlimboxGallery folder in: Users/(username)/Library/Application Support/Adobe/Lightroom/Web Galleries/
(I created the folder “Web Galleries”)
Any idea?
Thanks!

25 May 07 / permalink

MY apologies – I feel foolish now. Created the folder Web Galleries and all is fine now!

25 May 07 / permalink

Mike L,
Glad you got it worked out. Cheers!

Steven M,
Make sure you copied the folder from inside the zip archive, and NOT a folder created by your file extraction software.

If that’s not it, and you’re still having problems, try posting to the TTG Slimbox Gallery thread on the Adobe forums. I’m not a Windows user, but many people there are and can probably sort you out better than I can.

25 May 07 / permalink

Thanks—I’m copying the folder inside the folder created by stuffit, but it’s just not working. I’ve also tried creating a fresh folder with the same name and dragging the contents into that. I’m just baffled at this point. I’ll check on the Adobe forum and post there. (This is on a Mac, BTW)

26 May 07 / permalink

First, let me echo some of the comments above in saying thank you so much for creating this. It is very much appreciated.

I also wanted to mention that even though I’m using the current version (1.4), I’m still seeing the png shadow display issues in IE6 (damn Microsoft!). My solution was to skip the javascript, and just use the CSS fix for all versions of IE. I can’t post the code here because the comment systems filters it out, but if anyone else is interested in doing this, just open the index.html file and change “if lt IE 7” to “if IE”, and then remove the script reference that follows, only leaving the CSS reference.

6 June 07 / permalink

I’ve put the files where you stipulate – even made the Web Galleries folder – and it doesn’t show up. What am I doing wrong? I feel pretty stupid.

Am on a mac

Pat Witter

7 June 07 / permalink

Matt,

I also want to add my thanks to those of the others.

Your work here is greatly appreciated !

:-)

11 June 07 / permalink

I’m having a problem getting personalised captions. I use the metadata box in the Library, but it becomes a universal caption for each image instead of one. Can you help please? I read “David’s question and answer” and thought that I was applying that info, but apparently not.
Thanks
Pat W.

c
20 June 07 / permalink

i am also having trouble adding captions that show up. It adds the same caption to all pictures.

21 June 07 / permalink

c,
Captions are drawn from the metadata of each image. Fill in metadata captions in the Library module. Then, when setting up your web gallery, go into the Image Settings pane, check the box for captions, from the drop list select “Custom Settings” then “Edit”, and tell it to pull from the Caption field. That should do you.

22 June 07 / permalink

Curious if anyone else has reported issues with crashing when attempting to either Preview in Browser or Upload using the Slimbox (non XHTML) gallery.

I reproduced it several times … my PC completely (and immediately) shuts down. For the record, I’m running Lightroom on Win XP Pro (SP2) and have successfully previewed and uploaded using the built-in HTML Gallery.

6 July 07 / permalink

Thanks so much for all your hard work!

Is there anyway to edit the gallery so that there is no right-click or contextual menu (i.e. no saving, etc). I’m assuming the edit would have to be of the transformer.xslt file, but I’m not sure. If so, what code (and where) would I have to add.

thanks!

Randy

Sol
6 July 07 / permalink

Hey Matthew,

Having a minor issue with the ‘Title’ bar. The first time I used Slimbox, I entered a title for that gallery, and then made changes on color, text, etc., and then saved as a Preset. Now, whenever I call up that preset, or the gallery-listed preset I get those original titles on the title bar on both the left and right side. I just loaded 1.6 to see if that would make a difference, but no change.
I’m running LR 1.1 on a Mac OX 10.4.

Thanks for your help.

-Sol

6 July 07 / permalink

Randy,
There might be a way to do so using javascript, but I’m not familiar with any method. You might try using a flash-based gallery, like SimpleViewer, instead.

Sol,
I think presets only work with the version you used to create the preset. If you update the gallery, you probably have to recreate the preset as well.

29 July 07 / permalink

Hello Matthew,

Great work really, congratulations!

I would like to expand your project by customizing the appearance of the overlay “windows” used to display the large images.

Instead of just displaying Lightroom metadata, I would like to include in them AJAX Spry tabed panels whose content. The content would be static first, and then driven by external XML files.

Could you please explain how the layout of these windows can be modified?

My knowledge of javascript is fairly limited, but I understand that the slimbox.js library does appear to be building these windows entirely using javascript code, without using any .css layers, right?

I assume that the relevant objects are probably Bottom and Bottomcontainers. Any idea how we could add some spy widgets to this?

Thanks,

Regards,
Bernard

29 July 07 / permalink

Hi Bernard,

Functionality goes through two javascript files; appearance is governed by the slimbox.css file. Not sure about modifying the scripts, though. You might try the Slimbox website for more information.

Good luck!

6 August 07 / permalink

hey matthew,
first of all thanks for this amazing gallery plugin! works great for me except for one detail: my pictures do already have a border and if you view the picture in full-mode than an additional border is added, thats was to much…
hope you undertsna my problem. so what do I have to change?
thanks in advance
mo

6 August 07 / permalink

Hi Mo,
Just break open the CSS and set the border to zero.

6 August 07 / permalink

ok, found the right passage,
one problem left now: the white block (with image number und the CLOSE-button) is now a little too wide, you can see it here: http://marvelousmo.funpic.de/07-08-05-mod/
Could you help me which line I have to change in the climbox css file? I tried but failed (sorry I’m a newbie in css)
thanks again
mo

6 August 07 / permalink

Your URL returns an error page.

6 August 07 / permalink

http://marvelousmo.ma.funpic.de/07-08-05-mod/

really? not for me…hmmmm

7 August 07 / permalink

checked by several friends, should work. thanks for your help and again for your great plugin!
mo

10 August 07 / permalink

I get an error at your site too mo.

Matt is there anyway of adding to a gallery instead of having to export it all again, I tried just getting the thumbs and large files of the additional ones and stick them in the content but no good, it’s no big deal if i can’t be done, great work bud

Pete

10 August 07 / permalink

Sorry, didn’t mean add a gallery, I meant add a picture to an existing gallery (already on the web), it’s been a long day

10 August 07 / permalink

Hi Pete,

There’s no automated way for LR to add images to a pre-existing gallery, and that goes for any template, not just my TTG galleries.

You could try manually copying and pasting the code for the new images into the gallery; you’d then have to copy the images and thumbnails into the appropriate places.

The only other option is to fully recreate the gallery.

Cheers,
Matt

12 August 07 / permalink

Why does your Sample Gallery works fine in IE7 but mine gets the annoying warning “Internet Explorer has restricted this webpage from running scripts or ActiveX controls…”?

Does Lightroom adds some stuff to your very nice template that I should remove?

12 August 07 / permalink

Pierre,

As explained above, you need to remove the XML prog from the first line of the index.html file.

It may also depend on where you’re running the gallery from. Sometimes, when you run sites from your hard drive, IE displays errors – especially if the pages include Javascript. If you run them from your web server, the errors do not occur. At the end of the day, IE is a wonky browser that throws fits about everything and anything. It’s hard to say.

Any help?

14 August 07 / permalink

Great little web gallery Matthew!

Just one problem … on Lightroom 1.1 the image size slider reports pixel sizes all out of order for example sliding from right to left the pixel size indicated to the right of the slider jumps from 10 to 150 to 80 to 600 to 450 … you get the idea! :-)

Bug??

14 August 07 / permalink

Charles,

That’s bizarre, but I’m not seeing it. The slider works fine here. :-\

20 August 07 / permalink

I just bought an iMac, and this wee tool is an eye-opener.

For the past 5 yrs I have been using Photoshop on a Windows laptop to hand-edit/resize/save photos and thumbnails for the many slideshows on my website. A Perl script I wrote generates the HTML based on a config file with the image captions. Clunky, but it worked.

A month ago I bought a shiny new 24” iMac, discovered Lightroom (such a tool I never knew existed!), and Slimbox is the final piece it needs to output gorgeous slideshows for my website. I am in heaven!

Have a couple of beers on me, a donation is on its way.

On another note: anyone know how to prevent Lightroom from outputting ICC colour profiles? My thumbnails are all 8KB larger than they need do be – useful when you have a lot of images in one gallery. Photoshop can do it.

24 August 07 / permalink

Well got this to work with no problem.
Using LR 1.0/Mac OSX.
Server OSX Server: Latest version.
Firefox/Safari ok.

31 August 07 / permalink

really good gallery. nice and clean.

i have a long list of thumbnails. whenever i scroll to the bottom of the thumbnails and click on a thumbnail, the large image appears back up at the top, over the first thumbnails at the top, and i have to scroll back up to see the image, then close to go back down, click another thumb, scroll up to see large, etc, etc.

what code or option do i change so the large image opens
right where i’m at?

thanks

bt

31 August 07 / permalink

Byron,

The image should open at the point where you are on the page. If you’re using Internet Explorer 6, that might be the problem. Make sure you delete the XML prog from the index.html file, as described above under the “IE6 Compatibility” section.

31 August 07 / permalink

Matthew,
I’m having the same problem that Byron is having, but it’s not because of IE6, it’s because I’m calling the gallery into an iframe. When I go to the gallery itself it works fine. Do you know if there is a way to make it work inside an iframe?
I did do the IE6 fix just in case…no go.

Thanks so much,
Stacey

1 September 07 / permalink

Stacey,

I reckon not. Slimbox is designed to be web-standards compliant. iFrames are not a part of web-standards. You should avoid Frames and iFrames as much as possible.

I wonder if Byron is also using an iFrame?

2 October 07 / permalink

Hi,
Can anybody tell me.. To update just a link in the album, does it mean that you have to upload the whole gallery again? How does it work with updates? To add a couple of pictures, do you have to upload the whole gallery again as well?
.a

13 November 07 / permalink

Hey Matthew,

Excellent work! The Slimbox/Lightroom module is absolutely fantastic. Any chance there will be a fix for the IE6 ID plate issue forthcoming or should we not even bother with inserting ID plates?

14 November 07 / permalink

Nevermind Matthew. I saw your post regarding hardcoding the ID plate dimensions in the Adobe forums. That worked great. Thanks again and please keep up the great work!

17 November 07 / permalink

Hi Matthew,

there seems to be a problem with your new template version on XP with IE7.
Everytime I move a slider, I get a script error in lightroom.
Other controls are ok, but it happens with all sliders.

Juergen

18 November 07 / permalink

I also got script errors…

Any plans converting the Simple viewer?

18 November 07 / permalink

I also get the script errors in the Appearance section…it happens when using the sliders or directly typing the values.

18 November 07 / permalink

Today I tried the VScroll LUA gallery from Sean McCormack and there is the same problem but not only with the sliders. I’m not sure if it is a problem with the templates, the lightroom SDK or maybe with the live_update.js.

Juergen

18 November 07 / permalink

Thanks for the info, guys. I’ve emailed Andy Rahn at Adobe to ask his advice on fixing the errors. Most of my code is based on the code in the packaged LR HTML gallery, so I should think the code is fine. Most likely, I’ve implemented the live_update.js file incorrectly.

Sverre,
There’s no need to update the SimpleViewer gallery right now. In 1.3, Flash galleries are still built on XML/XSLT. Only the HTML galleries have changed to Lua.

18 November 07 / permalink

I get the script error too (XP) but found if you click on the value and use the up/down errors, one click at a time, it works. If you go too fast it will error again. You can move the slider really slowly, too. But, that’s pretty tricky.

Image Info problem: ‘Title’ and ‘Annotations’ don’t show up anywhere. ‘Captions’ are fine. ‘Title’ didn’t show up in earlier versions either.

Scott

18 November 07 / permalink

Thank you Matthew!

19 November 07 / permalink

Scott,

Title goes into the title= part of the anchor tag, so it doesn’t appear on the page. When you hover the mouse over an image, however, whatever you have set to the Title should show up.

Annotations should show up. Check that you begin with Levitation and Scoot set to zero, and ensure that your text color is visible against the frame color. Also, ensure that the Annotations are drawing information from a location that actually has information to supply. If you have it setup to pull from an empty field, then you won’t see anything.

20 November 07 / permalink

Thanks. I hadn’t even noticed the hover and my scoot value had gotten huge when I was initially playing with the sliders. All’s well now.

21 November 07 / permalink

Hi there. Fantastic work. Any plans to add paypal functionality?

Thanks again.

21 November 07 / permalink

irthom,

Perhaps as a far-flung future addition. I’d first have to learn how the Paypal system works, and I’m too busy to look into it right now. That’s not to say it will never happen, though.

22 November 07 / permalink

The only script is live_update.js, its job is to update the preview of the gallery when you change something. As Lightroom use IE on Win, this could be an issue between them. Do you see it with the inbuilt HTML Gallery?

23 November 07 / permalink

>Do you see it with the inbuilt HTML Gallery?

Sean,
No errors with the Lightroom HTML gallery. I tested slimbox and your gallery with the live_update.js from the HTML gallery, but same problem. I think, they are all the same.

Your Vscroll LUA is a little bit different: There are errors with the identity plate checkbox and image size slider, but not with the quality slider.
In slimbox I have errors with all sliders, but no other controls.

It’s like scott described: if I move the slider very, very slow, then sometimes I get no error, but the correct speed is different with the various sliders.

1 December 07 / permalink

Hi.
I found an error Slimbox Ver2.
It is that Image columns is not correct in Output Pannels.
When I set columns to 5 images, but seeing is 4 images.
Seeing images view one less. (columns – 1)

Sample page is
http://www.memoz.net/photos/071010_01_TTGSG/
I set columns 5.

p.s. Sorry, I can’t write english very well.

1 December 07 / permalink

Hi Jaesik,

It’s a problem that sometimes occurs with certain gallery configurations viewed in Internet Explorer 6. If you view the gallery in any other browser, it appears as it should. Also, if you adjust the gallery appearance some, you might get it to display properly in IE6 as well.

I presume you’re in Seoul, South Korea? I am as well, in Gangnam-gu. Where abouts are you located?

2 December 07 / permalink

Thanks Matthew for your work thus far with Lightroom Galleries. Until Adobe provide something that really should have been there I am happy to give you some of that money (hope my donation is sufficient).
I am happy with my new website which is now a hybrid of your fine TTG gallery index, slimbox and Wordpress. It would be better if I could drop in some more navigation menus but hopefully people will find it more pleasant to look at than my previous (coppermine) gallery. And all without using a line of code!

Any idea where I could employ a Google analytics urchin in my web galleries?

Thanks again!

See my gallery at www.garywilliamson.co.uk

2 December 07 / permalink

Gary,

Thank you for the kind donation. You’ve got some excellent photos on your site; always a pleasure to see my galleries sporting such pretty pictures. ;)

As for the Google Analytics, don’t you usually drop the Javascript at the end of the page files?

3 December 07 / permalink

Thanks for the response and kind words Matthew.

I am a bit lost with modern web design. My understanding is that LR will be generating the HTML pages so unless I incorporate it into Web Gallery pages within LR it will need to be re-written after each upload. Am I correct?

Excuse my ignorance but it is your gallery’s simple elegance and it’s ability to allow me to publish and edit my own website from within LR that attracts me. I don’t mind getting the sleeves rolled up once in a while and trying to learn something new but when I upload some events next year I would like to be published within a day and have an idea of how many hits I am getting without having to recode each time.

Thanks for any tips you can give.

Best wishes

Gary.

3 December 07 / permalink

Gary,

No worries. If you open the thumbnailindex.html file in the gallery archive, you should be able to append the analytics code to the bottom of the file. It should then be output with each gallery.

HOWEVER, there were issues in prior versions of Lightroom trying to use this code in galleries, I believe because the pages were then trying to contact Google Analytics from within the Web module preview every time the gallery reloaded there. Lightroom doesn’t seem to like its web pages attempting to reach out over the Internet from within the application. I’m not sure whether the new Lua gallery will allow the code or not. If not, then you would have to add the code manually to each gallery.

3 December 07 / permalink

Thanks!
is there a way to import the presets I made for a previous version 2.0 to the new version 2.1?

I mean background / fonts / colors / sizes?
maybe copy the files inside the folder rather than copying the whole folder inside the web templates folder?

3 December 07 / permalink

Stefano,

Unfortunately not. Because the panels are changed, the previous presets can no longer be applied. You’ll have to set them up again.

4 December 07 / permalink

actually it worked!
I put the new slimbox gallery files in the folder of the previous version and it was OK
the presets I created with 2.0RC3 now work with 2.1 .
I sent you a small donation… I think i will go with it to do my site[s] now I can also resize independently.

what I am now going to figure out is if the gallery can be on the left of a page rather than centered – and if the overlay when I look at single images can be 10/20 % darker – to conceal a bit more the thumbnails in the background…

4 December 07 / permalink

Hi Matthew,

Just watched the podcast and noticed you kept referring to your website as “TheTurningGate.COM” rather than .NET Using .COM brings up a generic search page. I seem to recall you announcing the switch a while back—you may want to update the voice over.

Thanks for all the great work!

cheers,
h2m

4 December 07 / permalink

Stefano,

Thanks for the donation.

For modifying Slimbox, you might want to check out my article on the subject.

To get the gallery to display left, rather than center, you’ll need to adjust the gallery.css file. Change:

.lightboxgallery { margin: 1em auto 0; }

To:

.lightboxgallery { margin: 1em 0; }

Also, change the text-align attribute on the body from center to left.

4 December 07 / permalink

Hi Matthew,

Thanks for your answer.
Yes, I’m live in Seoul, South Korea. My house located in dongdaemun-gu and my school located in dongjak-gu.
I’m pleasure to know you and I’d like to correspond with you.

p.s. Sorry posting this response took so long.

6 December 07 / permalink

Matthew,

I’ve been using Slimbox since v.1 — though I haven’t had an time to work on my galleries for months — and really like it. There is one thing though … each time I install an update, I have to go through the whole process of resetting colours and fonts. Is there any way of preserving the data across updates? Is it held in a .CSS file, for instance, that one could extract and then copy over to substitute for the one in the new gallery folder? If so, which file is it?

Thanks. I sent you a donation about a month ago, though I don’t know if I used the same email address :-\

6 December 07 / permalink

Gallery preset settings are stored in a presets file; if you open the file in a text editor, it’s pretty easy to read. Unfortunately, anytime I change the control panels, the layout of gallery changes, and the old presets no longer match up. So far as I know, there’s no fix for this; galleries need to be reconfigured for each release in which changes are made to the gallery control panels.

7 December 07 / permalink

nice work!

is there a chance of implementing HighSlide ( http://vikjavev.no/highslide/ ) into one of yours super lightroom galleries?

thank you very much!

7 December 07 / permalink

Highslide is on my list of possible future projects, but I’m not committing to it yet. I just haven’t had the time to look into it.

17 December 07 / permalink

Hi Matthew,

I just found the upgrade of this gallery ;-)
I looks great, just 2 minor points… – If, under matting adjustments, the frame border = 0 it shows 1 column less then set (in Lightroom, the resulting site is fine. Lightroom 1.3 on Win XP) – before the thumbs where centered horizontal and vertical in the frames, now only horizontal. Can that be changed somewere?

Keep up the good work,

FilMar

17 December 07 / permalink

FilMar,
What browser are you using to view the exported gallery? I know this is an issue in IE6, but I’m afraid there’s not much I can do about it without breaking other aspects of the gallery. People should be upgrading their browsers at this point, anyway, to IE7, Firefox, Opera, etc. I expect most designers will be dropping IE6 support within the next few years.

The previous gallery used tables to layout the thumbnails, and so vertical positioning was possible. From 2.0, I’ve done away with tables in favor of a purely XHTML/CSS layout. Vertical centering is possible only using tables. Instead, 2.0+ allows users to adjust the position of thumbnails within the frame. If there’s demand for tables, though, I would consider releasing a second version of the gallery.

17 December 07 / permalink

Hi Matthew,

I really like your Slimbox Gallery, however i have run into a problem. I downloaded the 1.6 version some time ago and created a nice gallery.
Now i have downloaded the 2.1 version and my previously made gallery can’t open and i get the following error message in Lightroom:

“The template can not be applied, because the webgallery (id=“TTGSlimboxGallery”) is missing, please install that web gallery and then try again”

However i do not have the 1,6 version anymore, and do not know what to do now?

Hope you could help me out with this…

Kind regards,

Jeroen

17 December 07 / permalink

Jeroen,

I presume you’re trying to use a gallery preset you created, and that’s what is causing the error.

Version 1.6 was XML-based; version 2.0 is Lua-based. They are completely different galleries.

You’ll need to recreate your gallery preset/template using the latest version of the gallery. If you would like to retain version 1.6, you can download the file from the link in the Changelog, above. The XML version of the gallery is no longer supported, however, and will not be updated; it’s available as is.

You can have version 1.6 and version 2.0 installed concurrently. They will not conflict.

21 December 07 / permalink

Hey Matthew,

I just did the upgrade to the latest Slimbox 2.21, using Mac OS 10.5.
Now my older templates are giving me a dialog box reading:
“The template can not be applied, because the web gallery (id=‘TTGSlimboxGallery’) is missing. Please install that web gallery and then try again.”

Can they be re-activated, or do they have to be re-created from scratch with this new version.
FYI, I am seeing the Slimbox 2.21 title, and your default settings and colors, seems to be working fine otherwise.

Thanks for you help, guy.

Sol

21 December 07 / permalink

Sol,

From version 2.0, the Slimbox gallery is completely rewritten in Lua, hence the jump from 1.6 to 2.0. The 1.x strain was written in XML/XSLT. To wit, everything is changed and any former presets will need to be recreated.

You can have both 1.6.1 and 2.0 installed concurrently, however, if you’d for some reason like to keep the old one around. If you not longer have the files, you can download them from the link in the Changelog, above.

Cheers,
Matt

30 December 07 / permalink

Has anyone discovered how to add the “Metadata: Copyright Only/All” option to gallerymaker.xml? You can see what I am trying to achieve in http://lightroom-news.com/wp-content/uploads/2007/06/web_info.jpg
Cheers, Steve.

30 December 07 / permalink

Steve,

I don’t know whether the feature is supported in the XML galleries. I think it was first introduced to the LR HTML gallery when it made the jump to Lua, at which point I included the code in my own Lua version of the Slimbox gallery.