Softpress KnowledgeBase

KnowledgeBase Home > Site Planning and Design > Using Rich Media

Using a SlideShowPro for Lightroom slideshow with Freeway

This article presumes that you have read all the necessary information on how to create a SlideshowPro for Lightroom slideshow and you have the folder of files generated by the application ready to be used in Freeway. You can give the folder of files any name you wish, but for the purposes of this article we presume that the name of the folder is "slideshow".

Note that because SlideshowPro for Lightroom slideshows need to target a "div" item on the page (a "div" item is a "layer" item), this can only be done with Freeway Pro as Express does not support layers.

Because you will almost certainly want to test the slideshow "locally" (ie, on your own computer by previewing in a browser), there are two distinct stages for the process. First is to make it all work locally, and the second stage is to change the paths in the markup code so that it will work when the site is uploaded to a web server.

If you have already published your Freeway document, you will have a Site Folder into which you can move (or copy) the Lightroom slideshow folder. If you haven't already published your Freeway file, you should preview the site in a browser to create your Site Folder and then move or copy the Lightroom slideshow folder into it. This means that the folder called "slideshow" is now located in the same base level of the Site Folder as the .html files of your site.

On your Freeway file it is very simple to set everything up. First you need to draw an HTML item which is larger than the slideshow, check the Layer option in the Inspector then enter a easily identifiable name for the item in the Title field.

Next, you need to draw a new HTML item on top of the first so the second HTML becomes a "child" item of the first item (which is its parent). The reason that this needs to be done is because the JavaScript used strips out the positioning for the Flash content div item. You can see that the item called "flashcontent" is a child of the item called "slideshow" by clicking on the header bar of the Site Panel (to toggle the view from "Site" to "Page" so you can see a list of all the items on your page) to see that the flashcontent item is indented by one level immediately underneath the slideshow item.

With the child HTML item selected on the page, check the Layer option in the Inspector and give it the Title of "flashcontent" (without the quotes). This item must be called flashcontent for the slideshow to work.

To finish off, enter the correct width and height values for the slideshow file in the Inspector (to match those given in Lightroom) so that the item is the correct size on the Freeway page. Move the item into the top left corner of the parent HTML item and then drag the bottom right handle of the parent HTML item to make it fit. Now position the parent item where you want it to appear on your page.

The next part of the process is to insert some "markup" code in the page so that the flashcontent item can be targeted so it displays the images stored in the Lightroom slideshow folder. To do this, copy the code between the lines below (but don't copy the lines themselves):

------------------------------
<script type="text/javascript" src="file:///Users/keith/Desktop/slideshowpro_for_lightroom/Site%20Folder/slideshow/js/swfobject.js"></script>

<script language="javascript">
var flashvars = {
    paramXMLPath: "param.xml",
    initialURL: escape(document.location)
}
var params = {
    base: ".",
    bgcolor: "#000000",
    allowfullscreen: "true"
}
var attributes = {}
swfobject.embedSWF("file:///Users/keith/Desktop/slideshowpro_for_lightroom/Site%20Folder/slideshow/loader.swf", "flashcontent", "542", "441", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
------------------------------

With the code copied, go to Page>HTML Markup, choose "Before </head>" in the Insert popup and paste in the code. Before clicking OK you will also need to edit "542" and "441" towards the end of that code to match the width and height respectively given by Lightroom.

As with all Flash files which need to link to "referenced" files to make it all work, it is important to note that you must alter the markup code so that the path given in the code reflects the path to where your files are located. For me to be able to test the file locally by previewing in a browser I've used the path of:

/Users/keith/Desktop/slideshowpro_for_lightroom/Site%20Folder/slideshow

To preview it locally on your computer you will need to edit the "User Name" (mine is "keith"). The user name is the log-in name you use for your user account.

You can also see that I have the project folder for the file (called "slideshowpro_for_lightroom") on my Desktop - so depending on where you have your project folder saved on your computer, this will need to be edited accordingly.

Note that this path needs to be edited in two places in the code.

Once you have edited the code to suit, click OK and then preview the file in a browser. If it doesn't display the working slideshow, you must have entered the incorrect path name in the markup code, so go to Page>HTML Markup, correct any errors and try again.

Once you have tested the slideshow locally and you are happy, you now need to change the code again, this time to reflect the path name of where the Lightroom slideshow folder will be located on your web server, so this path may be something like:

http://www.mydomain.com/slideshow

Because Freeway has no idea which files need to be uploaded to your server as "referenced" files, you will need to upload the Lightroom slideshow folder manually (into the same location as the .html page files for your site) by using a standalone FTP application. Alternatively, Lightroom has a built-in FTP feature which allows you to upload directly from Lightroom after you have made edits to the slideshow - so this may be the best method.

Again, if the slideshow doesn't work correctly, then it is most probable that the path names are not correct, so you will need to make the necessary edits in Page>HTML Markup and then reupload.

A sample file is available by clicking on the link underneath "Attachments" below so you can see how I set it up to preview locally on my computer. Because the paths used in the Page>HTML Markup are unique to my computer, you will need to use your User Name and change the path to the Lightroom slideshow folder (which is located in the Site Folder of the attached file) accordingly.

You may see an "Adobe Flash Player Security" alert when you go to preview the file. This is normal when you preview locally, but it shouldn't display once the site is uploaded. Click OK to dismiss the alert.

No related articles were found.