Photoshop Lightroom 1.0 Flash Gallery Tips and Tricks #13: Easily embed a Flash gallery in another web page
I’ve blogged about this topic before, but, as there have been several requests for clarification, I’m touching on it again and this time including an example. The key to embedding the gallery swf into a web page is to understand that the “path” to the the resources the gallery needs to work (the XML files) is hard coded into the swf. You can over-ride this with Flashvars, but you don’t need to. Simply move the gallery.swf file into the same folder on your web server as the html page you want it to be in, then move the bin and resources folders in there as well. Now you can use simple embed code to add your swf into your html page.
March 8th, 2007 at 6:40 am
I tried this, and it seems like it really slows down the loading of the gallery. Could this be because I set the size to fit in a table of 800×600 and the gallery needs to calculate the proper size of the full image on every image? By me setting it at 800×600, is this inbetween large and medium image size?
Also, on another topic, I currently have a portfolio up with 8 flash galleries, each gallery having about 40 images. These load up really slow. Has anyone figured out a max number of images in a gallery that will load up in a decent time and not too long? I know dialup users would be waiting for days no matter how many images, but I would like to build a gallery size that covers slow DSL and fast cable access equally. Is there a way to just use medium image sizes and not large?
Thanks for the great blog!
March 8th, 2007 at 7:20 am
oh, I should add. There are a ton of photographers out there, me being one of them, that know NOTHING about web design and would like to use lightroom as there outlet to adding content to the web. So some of us, when you use the term “simple embed code to add your…” we still don’t understand. please, help the web design illiterate! HELP!
March 8th, 2007 at 10:56 am
OK Bry, I added an extended post with embed code that you can copy and paste into your own HTML page: here
March 8th, 2007 at 12:57 pm
In terms of load time, the images should load progressively into the gallery, and people can be looking at pictures while more are downloading. So the number of images in a gallery should not be a big issue (although the number of thumbnails does have an impact) -40 images should be fine, (your galleries come in quick over my connection) if you get up into the hundreds, the thumbnails can slow down the load time of images for a while. The only way to speed up the load time is to have smaller images. Lightroom allows you to choose a “preview size”, so you can choose the smallest setting. Lightroom actually creates three renditions of each image at three different sizes when you export a Flash gallery, and those three sizes are “relative” to the selected “preview size”. The gallery only downloads and displays the largest image it can based on how much room is available to it in a given window (or table in your case). When the gallery fills the entire browser window, and when that window is re-sized substanitally, a new image (new set of them actually) will start to load. Except in the case where there is not enough room to display the smallest image rendition at native size, in which case the gallery will scale the image down in real time. The operation of this feature set does not in itself affect load time. However, if your gallery is “fixed” at a small size, it might be loading images that are bigger than necessary as it does not have a smaller rendition to use. So again, use the smallest “preview” size setting in Lightroom.
You can manually change the size of the images in your bin folder, but if you do, you’ll need to change the size settings in group.xml as well. If you do that, make sure to change the max sizes in the “sizes” node of group.xml. You can even delete the mentions of the larger sizes throughout group.xml and then delete the corresponding image renditions in the bin folder. This won’t do anything for performance (if your gallery is a fixed size and those larger images would never be downloaded anyway) but it does save a bit of space on your web server.
March 8th, 2007 at 3:53 pm
excellent, thanks for your input!
March 8th, 2007 at 9:08 pm
not to be repetitive, but thank you very much for your site. I got my galleries all tightened up because of your help. THANK YOU!
March 11th, 2007 at 12:35 pm
I have to chime in with my thanks as well. I would feel guilty if I didn’t because I have benefitted from this site sooooo so much. So thank you. I would just like to add to what has been mentioned before about some of us being pretty clueless about coding. I knew a little bit from my days years ago as an art director at a couple of interactive companies - but I now feel like I have forgotten way more than I ever really new, leaving me with a void I must fill before I am even starting at square one again =). So from that perspective, it would be awesome if in your examples you could tell people like me exactly where the code should go (like you do with some where you say “look at around line 55″)
Thanks again!
March 14th, 2007 at 5:41 pm
I am trying to use this trick but I want the gallery to fill the screen like it does in the original configuration. But I do not get it right. What can I write instead of the sizes you have written? My trial: http://johnkjellberg.se/fagrast.
Anyway: Thank you!
March 14th, 2007 at 5:59 pm
John, you would use “100%” on width and height. FYI, I notice that you don’t even have a “width” setting at all, you must have deleted it while you were trying to get it to work. Note that you’ll have to have a “container” (e.g. div) that will scale to 100% of the available space for it to work. This can be tricky (lots of discussion out there on the web on that though). Get your container to scale first, then when you embed the gallery inside it with the 100% settings, walla!
June 13th, 2007 at 5:44 pm
hm, I can seem to have struck an issue. I think I must be doing something wrong…
I have downloaded the open source. All I do is publish the gallery.swf, and over write the origonal swf - but for some reason this breaks the above embed code. It loads the swf, but is constantly stuck on the loading animation, and doesn’t actually bring up the gallery - as if it is stuck trying to find something?
http://dev.digitalgenus.com/pg/test.html
June 13th, 2007 at 6:01 pm
Here’s my guess at what the problem is. I leveraged a “trick” for embedding the gallery without Flash Vars in the embed code. Those vars tell the gallery.swf which baseref to use and the paths to the resource xml files. The trick works with the Lightroom version because it takes advantage of the “default” paths hard coded into the swf (which it uses if no FlashVars are passed). Problem is, the open-sourced version (while it has all the LR version “features”) has slightly different file structure and built-in paths. I should have known better to try to oversimplify the embed code for this tip…
I’ll try to post a blog entry about the “right” way to embed the gallery, including flash vars very soon.