Embed in separate HTML document

If you'd rather not use the HTML document published by Lightroom to display your slideshow online, you may embed the slideshow in your own HTML document. Here's how.

Note: Be advised, these instructions require some web development experience and the ability to edit HTML.

Step One: Upload exported content

If you haven't done so already, upload the folder you exported from Lightroom to your web server. Doesn't matter where as long as the folder can be accessed through your web browser. When the upload finishes, move on to Step Two.

Step Two: Open/edit new HTML document

Open the HTML document you wish to display the slideshow in using any HTML editor. Anywhere in the <head> area, add the following:

<script type="text/javascript" src="js/swfobject.js"></script>

Edit the src value with an absolute path to the same file you uploaded as part of Step One above. In other words, if your exported folder were named "slideshow" and you uploaded it to the root of your site, you'd edit the path like so:

<script type="text/javascript" src="http://mydomain.com/slideshow/js/swfobject.js"></script>

Now we need to add the Javascript for embedding the SWF. Copy and paste the following after the script that was entered above:

<script type="text/javascript">
var flashvars = {
	paramXMLPath: "param.xml",
	initialURL: escape(document.location)
}
var params = {
    base: ".",
	bgcolor: "#000000",
	allowfullscreen: "true"
}                
var attributes = {}
swfobject.embedSWF("http://mydomain.com/slideshow/loader.swf", "flashcontent", "550", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

Step Three: Edit SWFObject code

Edit the code you pasted in above so that "http://mydomain.com/slideshow/loader.swf" is an absolute path to the loader.swf file uploaded in Step One. Next, edit the width (550) and height (400) values to the width and height you want your slideshow to be. And finally, alter the bgcolor parameter to the color you want your SWF's background to be.

Step Four: Create DIV

Now you need a container for the SWF to be written into. Anywhere between the opening and closing <body> elements, enter the following:

<div id="flashcontent">
   <!-- Insert non-Flash player code here -->
</div>

Step Five: Edit "Popup" paths

If you have Popups enabled in your exported slideshow (which you do by default if not deactivated) then you may need to update all the pop.html hyperlinks contained in the images.xml you uploaded in Step One. Simply open images.xml in your HTML editor, and perform a find/replace on the entire document replacing "pop.html" with a relative link. The link should be relative to the directory location of the HTML you are moving your slideshow to.

Note: relative linking is required because Popups use SharedObjects (cookies) to store data, so the data needs to be accessible from both "www" and non "www" URLs when accessing your site.

For example, by default the value is this:

NewWindow=window.open('pop.html' ...

If your slideshow were being embedded in http://mydomain.com/slideshow/index.html, and the pop.html document was located in http://mydomain.com/slideshow/assets/pop.html, you'd modify it like so:

NewWindow=window.open('assets/pop.html' ...

When finished save images.xml.

Done!

Load your HTML document in your web browser. Your slideshow should appear.

Page last modified by tmcfadden on February 16, 2010, at 10:06 AM

Products

Additional support

Company