Rowan Cottage : SimpleViewer

Rowan

Cottage

About

iWeb

SimpleViewer Integration

SimpleViewer Slideshow Integration

So I did this myself some time ago.

I've actually been asked how I did it a number of times now, so I thought it was appropriate to write an article about it now!

Check out our photo pages for examples of the slideshow integration. Bear in mind there are different types of flash slideshow, and both manual and automatic methods of generating the data and images for the flash slideshow player. I am only describing one particular method of generating a free SImpleViewer slideshow from an iPhoto album using a nifty little free program called iPhoto Export.

For instance if you like SimpleViewer but don't wish to use iPhoto Export, then this page will show you other methods of generating galleries. Web Export is another program that will output iPhoto albums into a SimpleViewer format. You can also customise the SimpleViewer slideshow in different ways, as shown here.

Other types of flash slideshow are available such as Autoviewer, slooz and couloir.

Make your Gallery

First off, in iPhoto, generate the album you would like to make into a slideshow. In this instance, I am calling the album Slideshow. Drag and drop your images into the album. It would be useful at this time to crop, rotate and caption them as you go along. Don’t bother sizing them all to a standard size - iPhoto Export takes care of that.

Next download iPhoto Export 1.7 from hagus.net. Open it up.

1. Select the iPhoto album Slideshow you made in the source pane.

2. Change the settings as you wish. Here are mine:

Nav Position - right

Thumbnail Columns - 2

Background Colour - 0x000000

Frame Colour - 0xffcc66

Frame Width - 1

Stage Padding - 6

Nav Direction - LTR

Text Colour 0xcccccc

Thumbnail Rows - 6

Max Image Dimenson - 640

There are other settings for using titles or comments.

Don't worry if you don't know exactly what settings to use - you can always change the settings and re-export. The key is experimentation until to find a gallery style that suits you.

3. Set the output folder, eg desktop. Click Export Album.

So now you have your output folder on the desktop called Slideshow. Open it up and double-click index.html. Your gallery will open up. Don't worry at this stage about the large window size and the fact that you can't resize it. We're going to change that! Also you will note that the background colour you set for some reason doesn't come through on the index.html file, so we'll change that too. Anyway, leave it to one side for now.

Set up iWeb

Now make a page in iWeb. It doesn't need to be a photo page, but clearly if you are also going to put photos onto the page (as in a standard iWeb photo page) as well as a slideshow, then you do need to use a photo page.

We are now using the PayPal Buttons method of inserting HTML into iWeb. Click here for a recap.

On the page, make a textbox the size of the area in which you want to display the gallery. This should include enough space for the main picture and the thumbnails. On my slideshow pages, the size of the textbox is 700 px wide by 600 px high. Remember these figures because you're going to need them later.

In the textbox, type some unique text into it, like SimpleViewer_Code_Here.

Now publish.

Change the gallery settings

Now back to the gallery folder called Slideshow that should be lying on the desktop or wherever you saved it. Open it up, then open the file index.html in TextEdit or other text editor. If you see your gallery, you need to close the file, go to TextEdit > Preferences, and check the box 'Ignore rich text commands in HTML files', then re-open index.html.

Now you need to change the size and scale settings:

Look for:

and replace the height value with your own value, 600. There are TWO instances of this in the code.

Now look for:

and replace the width value with your own value, 700.

Now you need to correct the scalability so that you can resize the window properly.

Look for:

and change the noscale to scale.

and look for:

and change the noscale to scale.

Finally you need to change the background colour to the colour you actually set in iPhoto Export:

Look for:

background-color: #181818;

bgcolor="#181818" type="application/x-shockwave-flash"

and change each #181818 to #000000 (or the colour you set yourself in iPhoto Export). There are THREE instances in total of this in the code.

Save the index.html file. Now double-click it and you should find the gallery is resizable and smaller than before and will now readily fit onto your iWeb page.

Now you need to move the entire Slideshow folder to its permanent location. If you publish to a third party server, you need to FTP it there, eg, www.yourdomain.com/Pictures, or if you publish to .mac, a good place would be iDisk/Sites, so the full address of the index.html file will be:

http://www.yourdomain.com/Pictures/Slideshow/index.html

http://homepage.mac.com/yourusername/Slideshow/index.html

To test that all is well, enter the address in your browser and you should see your slideshow run.

Remember either of these addresses, you will need the relevant one in the next step.

Back to the Published Page

Now head back to your published page. If you need a recap on locating these files, see my PayPal Buttons article.

Remember you put some unique text SimpleViewer_Code_Here into the iWeb page? Open the HTML page in TextEdit or similar, and find SimpleViewer_Code_Here and replace it with:

For instance, for the width and height settings I've mentioned in this article and for publish to.mac, the <iframe> code should read:

Now save the file.

Now open the file in your browser, and you should see your gallery contained within. If things need a little tweaking, just alter all the relevant settings and/or values.

There, I now hope you’ve got a nice looking slideshow on your site now. You can enhance things further by having other slideshows linked in the same way, and you can always optimise the images that iPhoto Export generates in order to save loading time.

If you want to have different slideshows opening within the same frame on the same page, see here.

As ever, if you found this article useful, then please take the time to sign our guestmap! (I know it’s a bit slow in loading, but then we do receive quite a few visitors!)

FOOTNOTE FOR .MAC USERS!

A word about .mac and iDisk address mapping:

iDisk/Sites maps to http://homepage.mac.com/username

iDisk/Web/Sites/iWeb/sitename maps to http://web.mac.com/username/iWeb/sitename

Please be careful exactly where you put your slideshow. In the instructions above I suggest the Sites folder on your iDisk, not the Web/Sites folder. There is a clear difference between these two folders on your iDisk!