Lightbox

Before beginning: download the pdf version of this instructional (it has more content and offers graphic examples).

Initial setup: Make sure you have the iPhoto plugin created for SlideshowPro. When you publish the Flash document it will create: XML, swf, fla, html, and several other folders that contain your photographs. These should all be in the folder called “slideshowpro.”

1) In the newly created slideshowpro folder change the html file to index.html (do not rename anything else inside this folder).

2) Rename the outer folder (the one that holds all the xml, fla, swf, html and other files) to "slideshowpro.” You may have already done this in the initial setup.

3) Mount iDisk

4) Copy folder to Sites. There are 2 Sites folders in iDisk. The one you need is the Sites folder when you first open iDisk/sites. NOT the one in the iDisk/web/sites folder. This will end up being: http://homepage.mac.com/yourname/slideshowpro (the last word is what you call your folder in step 2 above).

5) Open iWeb. Create a textbox on the page that the Slideshow is intended to display. Position the textbox correctly. Use the “Inspector Ruler” to get the correct dimensions. Put a placeholder text in the textbox such as "SSPgoeshere." Make sure there are no spaces in the placeholder word.

6) Save and publish the iweb page.

7) View the iDisk html file in a text editor (or I use MassReplaceIt) and find the placeholder word. You may have to search (Command F) to get the right word. In this example we used “SSPgoeshere.” Replace the placeholder word with:

8) Save the textedit file and you are finished. Go to your web browser and clear the cache. Go to your new page and there is your Flash.

NB: the dimensions (width & height) are set in Flash. Yours will be different than those listed above.

Here is an example from one of my sites: http://web.mac.com/abenningfield/iWeb/CameraObscura/Gallery.html

NOTE: If you do not have .Mac, then these files are put in the root directory of the server.

Creating SSP in iWeb 1 with .Mac

Before beginning: download the pdf version of this instructional (it has more content and offers graphic examples).

1) When you download a third party flash file (from a place such as istockphoto.com) then you will have on your desktop a .fla file. When you double click this it will open the Flash application. I use Flash Basic 8.

2) When the Flash application opens, another small window called Properties also opens. If this window fails to open, go to the menu and pull down Window and scroll to Properties>Properties. You will be able to change the background color here to match your website. Go ahead change it to whatever color you want.

3) Also note that in the Properties window you will see “size.” This denotes the size of the Flash show AND the box you will need to create in iWeb. Don’t do anything with the size just make a note of the dimensions.

4) Now go to the menu and pull down File>Save.

5) Go back to the menu and pull down File>Publish. You can close Flash at this point. You should now have two more files besides your original .fla (that came with your purchase). The two new files are .swf and .html.

6) In order to keep everything nice and tidy, put the three files in a folder (that is if they are not already). Name that folder something that you can remember and find (for this example, let us call it MYNEWFLASH). So you have a new folder with three files in it (.fla, .swf, and .html).

7) Rename the html file to (index.html). DO NOT rename anything else!

8) Open your iDisk. Yeah, just double click it. You will see a folder called “Sites.” Double click it. Take your folder from #6 above and drop it into this Sites folder. It may take a moment to transfer. Then close the iDisk. One further note here. You want the sites file that is located in idisk>sites. Not the one in idisk>web>sites.

9) Forget about the files for a moment. Open iWeb and go to the page you want your new nifty cool Flash show. Within that page create a text box the size that you noted the Flash dimensions were. Those dimensions were noted in the Properties window of Flash.

10) So create the width and height of the Flash dimensions by dragging the text box (let us say for this example that it is 250 X 470). Now put a word in the text box that will be descriptive of your Flash show such as STARWARS. Make sure there are no spaces in your placeholder word. You are going to use this word in a moment and you will need to write it down EXACTLY like you put it in the text box. Save iWeb and publish. Close iWeb.

11) Use TextEdit or I use MassReplaceIt. Open TextEdit (check “ignore rich text commands”) and view your iDisk>Web>Sites>iWeb>whateveryoursiteiscalled>page.html (page you want the Flash). You will see code.

12) Do a search (Command F) for the word you placed in the textbox. It was STARWARS in this example.

13) Once you find the word, delete it and replace it with this code: <iframe src=”http://homepage.mac.com/yourname/MYNEWFLASH/" width="250" height="470" scrolling="no" border="0" style="border:none;" frameborder="0"></iframe>

14) Just remember here that in the code above you want to replace the word “yourname” with your real .mac name. And you want to replace the word “MYNEWFLASH” with whatever you called that folder you dropped in idisk. And finally, you want to replace the dimensions in the example above with the real dimensions of your Flash file.

15) Save the replace you just did in TextEdit. Close TextEdit. Open Safari. Clear the cache. Go to your site and page. There it is, your hard work paid off. You may have to reposition and start back at step 9.

Here are examples from two of my sites:

http://homepage.mac.com/abenningfield/Through%20the%20Looking%20Glass/page10/page10.html

http://web.mac.com/abenningfield/iWeb/Jabberwocky/Secret%20Passage.html

NOTE: If you do not have .Mac, then these files are put in the root directory of the server.

Inserting 3rd Party Flash Creation in iWeb 1 with .Mac

Before beginning: download the pdf version of this instructional (it has more content and offers graphic examples).

1) Download Delicious Library from this site: http://www.delicious-monster.com/

2) Download DeliciWeb from this site: http://homepage.mac.com/imaxinc/DeliciWeb/index.html

3) After you have configured your library using Delicious Library, then in the preferences of DeliciWeb make sure you choose either the metal or the wood bookcase.

4) Open DeliciWeb and after it scans your library (make sure you select what you want imported, e.g., books, music, games or all of these) press start. When deliciWeb is done making you a file, you will see a folder probably called "Delicious Library Site." You can rename that whatever you want. I call my folder Deli. Makes it nice and simple. This folder will have several files in it. Do not rename them. However, make sure that the html file is called index.html (it is probably already set to this).

5) Open iDisk and immediately you will see a folder called Sites. Do not go into the web>sites folder! You want idisk>sites. NOT the sites folder in idisk>web>sites. Now drop your new Deli folder into this sites folder. It can take a while to transfer. Be patient.

6) Now we need to do something in iWeb at this point. So open up iWeb. Go to the page you want your new library. Select from the menu a Textbox. It will be small. You will need to drag it and make it as large as you want the bookshelves to be. As an example maybe you want to use a whole page and make the textbox 800 X 600. However large you make the textbox.....write this down so that you will remember for the code you will need to insert.

7) In the textbox write a placeholder word. This word is used find where you need to insert your code later. You could type MYLIBRARYGOESHERE. It doesn't matter. Just note what placeholder word you use and make sure there are no spaces in the placeholder word. Now publish the iweb site. We are almost done :)

8) We need to insert some code. I use MassReplaceIt. This is a nice little app that searches and then replaces with code. However, you can just open TextEdit (standard w/ your mac).

9) Open TextEdit (check “ignore rich text commands”) and view your iDisk>Web>Sites>iWeb>whateveryoursiteiscalled>page.html (page you want your Library). You will see code.

10) Do a search (Command F) for the word you placed in the textbox. It was MYLIBRARYGOESHERE in this example.

11) Once you find the word, delete it and replace it with this code: <iframe src=”http://homepage.mac.com/yourname/Deli/" width="800" height="600" scrolling="no" border="0" style="border:none;" frameborder="0"></iframe>

12) Notice that I used the names and numbers that we used in this example but remember here that in the code above you want to replace the word “yourname” with your real .mac name. And you want to replace the word “Deli” with whatever you called that folder you dropped in idisk. And finally, you want to replace the dimensions in the example above with the real dimensions of your textbox you created.

13) Save the replace you just did in TextEdit. Close TextEdit. Open Safari. Clear the cache. Go to your site and page. There it is...your hard work paid off. You may have to reposition and start back at step 6. This may require some testing on your part.

14) Finally here are examples of libraries installed on several of my sites:

http://homepage.mac.com/abenningfield/Through%20the%20Looking%20Glass/page4/page4.html

http://homepage.mac.com/abenningfield/Luminarium/page6/page6.html

http://web.mac.com/abenningfield/iWeb/ShelleyAndrews/Library.html

Don't hesitate to email me if you need further help or clarification.

NOTE: If you do not have .Mac, then these files are put in the root directory of the server.