Pet Medications

Photoshop Lightroom Flash Gallery Tips and Tricks #3: Embedding a Flash gallery into a web page at a fixed size

When you export a Flash Gallery out of Photoshop Lightroom 1.0, it makes a web page for you (index.html) and on that page the gallery always scales to fit the browser window. That’s nice, but sometimes you want to put a gallery into your own web page with other content. If you do that, you may want to turn off the Header bar and Menu bar in the gallery itself (covered in Tips and tricks #2).

You may also want to “fix” the size of the gallery so that it does not auto-scale to fit the available space.

Update: Using FlashVars Post

One reason that you’d want to prevent your gallery from scaling is if you put a photographic image into the background of your gallery (discussed in tips and tricks #1). Otherwise, the background image will “stretch” - non-proportionally - to fit the entire browser window (not so nice when that image is a “photo”).

The “index.html” file that Lightroom generates is fairly complex, with lots of JavaScript, etc. I’m not going to go into depth on that topic here (maybe in a future article) but rather give you a couple tips:

1. You can “fix” the size of the gallery in the “index.hml” page by changing just two numbers. First find this bit of text in the source HTML:

else if (hasReqestedVersion) { // if we've detected an acceptable version

2. Now a couple lines below that you’ll see width and height parameters that are set to “100%”. Just change those to pixel values (for example: ‘width’, ‘650′,)

Note that about 650 pixels is the minimum width that you can make the gallery without it being “cropped”. That said, the source code of the Flash Gallery found in Photoshop Elements 5.0 (of which the one in Lightroom is a variant) has been open-sourced at So, someone ;) could make a version of the gallery swf that does not have this limitation. …

This is all great, but how do you do this in an existing web page with other kinds of content? Well, as mentioned, the scripts found in the index.html file are pretty complex (for non-coders that is) but there is a fairly simple solution that suffices in many cases. If you put your own html page right next to the exported gallery’s “index.html” file (for example in the root folder of an exported gallery) you can use simple Flash embed code within your own html page. There are many variants of this but here’s an example using 650×400 as the dimensions:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
/flash/,0,19,0" width="650" height="400">

<param name="movie" value="resources/gallery.swf" />
<param name="quality" value="high" />
<embed src="resources/gallery.swf"
width="650" height="400">

One of the neat tricks that you can do with this is use a background image that is specifically designed to fit exactly behind your gallery. This would allow you to do things like; put a flat “fill” behind captions if you have them, or put a texture in just the Header bar, have a photo of a TV screen as a “frame” for your photos, etc. It takes a bit of fidgeting around with things to get this just right.

If you want to play with this, you might want to export a gallery, open the index.html file and set your fixed size (as described above), preview it in your browser, take a screen capture, and use this as a reference layer in Photoshop while editing your background image. In the case where you are using the background as a “frame” for your photos, it works best if you use the “slideshow only” layout gallery template (via the layout menu in the “appearance” panel inside Lightroom). Otherwise, the position of the images will change when the user switches between “gallery view” (with thumbnails showing) and “slideshow view” (with no thumbnails).

5 Responses to “Photoshop Lightroom Flash Gallery Tips and Tricks #3: Embedding a Flash gallery into a web page at a fixed size”

  1. Abe Says:

    How can I embed a lightroom gallery into my flash website?

  2. Administrator Says:

    I played with this at one time (a while back) and was able to do it, but don’t have that example handy and I don’t remember the exact steps off-hand. If I get any free time I’ll revisit that, but no promises. If you figure it out, it would be nice if you posted your findings (or a link to them) here.

    FYI, the gallery.swf does “lock root”. Also, you may need to pass Flash Vars to the gallery.swf, you’ll find those in the index.html file that Lightroom generates. If you really want to dive into this, Adobe has open-sourced AMG (of which the gallery in Lightroom is a variant of) Be warned thought that it is many thousands of lines of AS2, and the AMG version that has been opensourced is more similar to the one found in Photoshop Elements. I don’t know if that is going to be updated with the AMG variant in Lightroom. There are a couple differences, such as the “rendition swap/scaling” behavior, and the look of the scroll bars. That said, if you are an ActionScript geek, you’ll get lots of “hints” about how to embed the gallery.swf there.

  3. Roosta Says:

    please can some one shed some light!! ah - im looking to use the LRG FlashSlideStrip with PayPal gallery available from in AMG as far as i can tell AMG is supposed to be compatible with the light room galleries … ive located the templates folder for AMG and copied my lightroom templates in there ( such as the LRG and others ) they have a slightly different structure but look similar with the gallerymaker.xml file etc …. what am i doing wrong? where should i put the files or is AMG just not compatible with 3rd party lightroom galleries? and if not why not?

    any help with this greatly appreciated!!

  4. Fraser Imagery Says:

    Excellent information. This has done wonders for my ability to show images.

  5. Harry Says:

    Thanks so much for providing these tips and tricks. While a flash programmer, I enjoy the convenience of LightRoom for generating the xml, differing photo sizes, captions, labels, etc. Your tips and tricks #1 solved a direct need: I wanted to have a gradient background for my entire site and this allowed me to do so… will be checking in soon.

    Ideally, it would be great to have the fla file for a given version of lightRoom, as I am a flash programer and could make rudimentery changes if required. (making auto play function, for example) While I could use the open source AMG, it would not auto consume the output from LightRoom.

    Though I must say that so far you’ve had a property for everything I’ve wanted to fix!!

    Thanks again,