iWeb FAQ - Highslide JS iFrame
iWebFAQ.org
Page 1: Highslide iFrame 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>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
hs.outlineType = 'rounded-white';
</script></head>
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="http://URL" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
Name of the site
</a>
Change the http://URL part in the code to the URL of the page you want to open in the Highslide iFrame.
Change Name of the site to fit your case.
If you want to have an image displaying instead of the name of the sitename replace “Name of the site” with <img src="urloftheimage">
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>
<link rel="stylesheet" type="text/css" href="/Username/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '/Username/highslide/graphics/';
hs.outlineType = 'rounded-white';
</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
