* Anytime you embed ‘loader.swf’, SWF type pop ups will not work out of the box. You need to adjust the location of ‘pop.html’ to be specific to the post you are embedding the slideshow in ( found in images.xml; explained here: http://wiki.slideshowpro.net/SSPlr/Tips-EmbedInSeparateHTMLDocument )

For my money, embedding index.html with Shadowbox gives me the most bang for my buck. That’s what I normally use. YMMV.

Examples

iFrame w/ SWF popups (pop ups work):

Shadowbox Gallery w/ SWF popups; Embed loader.swf (pop ups don’t work):

Shadowbox Gallery w/ Image popups; Embed loader.swf (pop ups work):

Shadowbox Gallery w/ SWF popups; Embed index.html (pop ups work):

Kimili Gallery w/ SWF popups; Embed loader.swf; Original images.xml (pop ups don’t work):
]]> http://www.software4nerds.com/blog/2009/09/30/ssplr-kimili-using-the-visual-editor/feed/ 1 http://www.software4nerds.com/blog/2009/09/14/slideshowpro-shadowbox-js/ http://www.software4nerds.com/blog/2009/09/14/slideshowpro-shadowbox-js/#comments Mon, 14 Sep 2009 16:39:47 +0000 Tim http://www.software4nerds.com/blog/?p=100 This post shows you how to embed your SlideShowPro for Lightroom slideshow into your WordPress blog using the ShadowboxJS plug-in.

The ShadowboxJS plug-in is used to embed different things into your blog. A Flash object is one of those things. We’re going to use it to embed our slideshow and make it ‘pop up’. These directions should pretty much work with other *box scripts (you’ll need to modify it though).

Install the Plug-In

The first thing you need to do is to install Shadowbox JS. That’s pretty simple. You can get the plug-in by going to the “Add New” option in your Plugins panel. Just search for Shadowbox JS.

Create The Slideshow

Nothing special here. Create the slideshow however you want. It doesn’t matter. Go nuts. Just write down the final dimensions (add some to the height if you’re using the Wet Floor).

For this example, let’s assume that I’ve set my width to 500 and my height to 400. I’m using the Wet Floor, so I’m going to write down 500 for my height.

You may want to make considerations for you blog (colors, sizes, etc).

Upload the Slideshow

Upload the slideshow somewhere on your site. I prefer to keep all of my albums in a directory called /my_galleries.

• I’ve exported my slideshow to a local folder named gallery3
• I’ve uploaded the exported folder to my website so I now have a folder called /my_galleries/gallery3
• To the outside world, my slideshow object is located at /my_galleries/gallery3/loader.swf (you can click on it and see it)
• Write that down

Create The Post With The Slideshow

• Create the post like normal
• Figure out what image you want to use as your slideshow preview (I chose /my_galleries/gallery1/album1/thumb/_MG_3380.jpg; it could anywhere on your site)
• Switch to the Code editor
• Enter the following code into the post where you want the slideshow to appear (modify the code to suite you; don’t insert my slideshow!):

• <a href="/my_galleries/gallery3/loader.swf" rel='shadowbox;height=500;width=500;options={flashParams:{base:".",allowfullscreen:"true"}}'><img src="/my_galleries/gallery3/album1/thumb/_MG_3380.jpg"/></a>

Preview The Post

If you’ve done everything correctly, you will be rewarded with a post and a slideshow that looks something like this (click on the image):

Using Director

If you used Director to create your slideshow, then you probably don’t have any images in your slideshow folder. That makes picking a preview image a bit tricky (everything else will be the same though). The way I see it, you have the following options:

1. Upload an image using WordPress
2. Use the Director interface to show you the URL and then scale it down

The first one is going to be the easiest since the post editor allows uploads.
If you want to use the Director image, be warned. The image is large. However, here’s how you would do it:

1. In Director, edit the album content
2. Double-Click on the image you want to use as your preview
3. In the content editor, click the “view” button. A new window will pop up
4. Use the URL in the new browser window for your image
5. Make sure you scale it down like so: <img src=”….” height=”50%” width=”50%”/>

Install the Plug-In

The first thing you need to do is to install Kimili. That’s pretty simple. You can get the plug-in by going to the “Add New” option in your Plugins panel. Just search for Kimili Flash Embed.

Create The Slideshow

Nothing special here. Create the slideshow however you want. It doesn’t matter. Go nuts. Just write down the final dimensions (add some to the height if you’re using the Wet Floor).

For this example, let’s assume that I’ve set my width to 500 and my height to 400. I’m using the Wet Floor, so I’m going to write down 500 for my height.

You may want to make considerations for you blog (colors, sizes, etc).

Upload the Slideshow

Upload the slideshow somewhere on your site. I prefer to keep all of my albums in a directory called /my_galleries.

• I’ve exported my slideshow to a local folder named gallery3
• I’ve uploaded my exported folder to my website so I now a folder called /my_galleries/gallery3
• To the outside world, my slideshow object is located at /my_galleries/gallery3/loader.swf (you can click on it and see it)
• Write that down

Create The Post With The Slideshow

• Create the post like normal
• Switch to the Code editor
• Modify the following line to suite your needs (please don’t embed my slideshow!):

• [ kml_flashembed movie='/my_galleries/gallery3/loader.swf' height='500' width='500' base='.' allowfullscreen='true' wmode='transparent'/]

  you must remove the space between [ and kml_flashembed)

• Insert that code into your post

Preview The Post

If you've done everything correctly, you will be rewarded with a post and a slideshow that looks something like this: