iWeb FAQ - Highslide JS Flash
iWebFAQ.org
Page 5: Highslide Flash with iWeb
Example:
(A little bit of code knowledge would be good for that, or at least not be afraid of it)
1) Go to Highslide and Download Highslide.
2) You will get a folder Highslide-4 (or similar)
3) In that folder you will find a Folder named “highslide” containg the following files:
- A Folder named “graphics”
- A file named “highslide-full.js”
- and many more files
4) Take that folder and change permissions of the folder as follows:
Hit command(Apple)+i
Go to sharing&permissions and set all permissions to read&write and select "Apply to enclosed items" where the gear displays.
5) Upload the highslide folder (the one of step 3) to the root location of your server
6) As it doesn’t work with HTML Snippets we will use MassReplaceIt (Download here for Free) you can also use iTweak (Instructions and troubleshoot on using MassReplaceIt and iTweak can be found on the Alternative HTML FAQ please read that FAQ!)
7) First we use it to put some code into the <head></head> tags of the page:
Search: </head>
Replace with (copy&paste the following code):
<script type="text/javascript" src="/highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="/highslide/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
// Apply the Highslide settings
hs.graphicsDir = '/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header no-footer';
hs.allowSizeReduction = false;
// always use this with flash, else the movie will be stopped on close:
hs.preserveContent = false;
// 3) Optionally set the swfOptions. See http://highslide.com/ref/hs.swfOptions for full documentation
/* hs.swfOptions = {
version: "7",
expressInstallSwfurl: null,
flashvars:{},
params: {},
attributes: {}
}; */
</script></head>
To change the width of the Highslide iFrame opening change the number in red in the above code.
8) In iWeb add a TextBox where you want the link or thumbnail to appear and write
HighslideLink1 or whatever you want (however it must be specific for that)
Put it in the Search of MassReplaceIt or iTweak and in the Replace write:
<a href="url of the .swf file" onclick="return hs.htmlExpand(this, { objectType: 'swf', width: 600, objectWidth: 600, objectHeight: 450, maincontentText: 'You need to upgrade your Flash player' } )"
class="highslide">
Display Flash
</a>
Change the url of the .swf file.
Change the two width parameters and height parameter to fit your case.
If you want to have an image displaying instead of the name of the sitename replace “Display flash” with <img src="urloftheimage"> if you don’t want an image you just change what is written.
9) In MassReplaceIt under Files add only the html files of the page (or pages) you want to add the Highslide to.
10) Publish from iWeb run MassReplaceIt and you’re done. As previously mentioned visit the Alternative HTML FAQ if you don’t know how MassReplaceIt works or for troubleshooting.
NOTE: In MassReplaceIt make a new Query for each page and under Files add only the page the Query is for.
For MobileMe publishers:
The root of the server on MobileMe is your /Web/Sites/ folder. Upload the “highslide” folder to your iDisk/Web/Sites/ folder.
If you’re using a personal domain (such as www.yourdomain.com) using CNAME use the codes posted above. If you’re using the standard web.me.com/username URL use the codes posted here instead.
The code of point 7) for MobileMe publishers using the standard web.me.com/username address is slightly different:
<script type="text/javascript" src="/Username/highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="/Username/highslide/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="/Username/highslide/highslide.css" />
<script type="text/javascript">
// Apply the Highslide settings
hs.graphicsDir = '/Username/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header no-footer';
hs.allowSizeReduction = false;
// always use this with flash, else the movie will be stopped on close:
hs.preserveContent = false;
// 3) Optionally set the swfOptions. See http://highslide.com/ref/hs.swfOptions for full documentation
/* hs.swfOptions = {
version: "7",
expressInstallSwfurl: null,
flashvars:{},
params: {},
attributes: {}
}; */
</script></head>
Where /Username/ is your MobileMe username.
iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.
It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.
Thank you for visiting and supporting my website.
- Cédric -
iWebFAQ.org on Facebook
