Lightroom plugin

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.

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. Alongside it, also open the "index.html" document published by SlideShowPro Player for Lightroom. Inside you will see a block of Javascript like what's shown below. Copy all this to your clipboard:

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

<script type="text/javascript">
	SlideShowPro({
			attributes: {
				id: "slideshow",
				expandBrowserWindow: "false",
				width: "550.00",
				height: "401.00",
				src: "slideshowpro.swf"
			},
			mobile: {
				auto:false
			},
			params: {
				bgColor: "#000000",
				allowfullscreen: "true"
			},
			flashvars: {
				xmlFileType: "Default",
				xmlFilePath: encodeURIComponent("images.xml"),
				paramXMLPath: "param.xml"
			}
	});
</script>

In the HTML document you want the slideshow to appear in, create a new line before the closing </head> element, and paste in that code.

Step Three: Edit embed code

Now you need to edit the paths in the Javascript code you just pasted so they point to where you uploaded your exported slideshow (Step One). For example, if you exported to a folder named "myslideshow" and uploaded that folder to the root of your web site, you'd edit the paths to be like what's shown below.

Additionally, you need to add a "base" parameter to the params area that has value of "." (a period). This instructs the Flash Player to look for relatively linked content in the directory where the SWF resides (as opposed to links being relative to the parent HTML document's location).

All these edits are shown below:

<script type="text/javascript" src="http://yoursite.com/myslideshow/js/slideshowpro.js"></script> 

<script type="text/javascript">
	SlideShowPro({
			attributes: {
				id: "slideshow",
				expandBrowserWindow: "false",
				width: "550.00",
				height: "401.00",
				src: "http://yoursite.com/myslideshow/slideshowpro.swf"
			},
			mobile: {
				auto: false
			},
			params: {
				base: ".",
				bgColor: "#000000",
				allowfullscreen: "true"
			},
			flashvars: {
				xmlFileType: "Default",
				xmlFilePath: encodeURIComponent("http://yoursite.com/myslideshow/images.xml"),
				paramXMLPath: "http://yoursite.com/myslideshow/param.xml"
			}
	});
</script>

Make sure you edit all four items! The link to slideshowpro.js, slideshowpro.swf, images.xml and param.xml all must be edited as instructed.

Step Four: Create DIV

Now you need a container for the SWF to be written into. Wherever you want the slideshow to appear, enter this:

<div id="slideshow"></div>

Step Five: Edit "Popup" paths

If you are loading content exported from the Lightroom Library and not SlideShowPro Director, and you have Popups enabled in your exported slideshow (which they are 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.

For example, by default the value is this:

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

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

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

When finished save images.xml.

Done!

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