Here it is, finally a fancy zoom that will allow us to get not only images, but flash, video, and other html content.  So first let me answer the question, what is Highslide JS?  Highslide JS is a great way to get that ever so popular image zoom effect just like the fancy zoom post I did in the past.  The difference is, is that this one will give you the ability to zoom more than just images.  Though FancyZoom is a bit more light weight, there are some great advantages to Highslide.  This tutorial you will need the use of an HTML editor like Coda, Espresso, Dreamweaver, even TextEdit.  Just as long as you have some way to edit the html after iWeb publishes.  I try to do as many tutorials trying not to get into post published html, but sometimes you just gotta do it to get the desired effect.  So here is an easiest way I’ve found to get it into iWeb.

View Demo »

Highslide with Images |   Highslide with Flash Files |   Highslide with iFrames

To get started I will separate the tip into Images, Flash, and iFrames (which would include any other html page (websites, videos, youtube, etc)).  Here we go:

Highslide with Images:

Step 1) Add an any image(s) or graphic(s) to your page in iWeb.

Step 2) Open up the inspector and make it a hyperlink in the hyperlink inspector.  Choose to Link To: “A File” and choose the same image (so it basically it is linked to its self).

Step 3) Publish site to Folder, Server, or MobileMe iDisk – Whatever your method is.

Step 4) Download files. I’ve made a special iWeb version of Highslide to simplify things.

Step 5) Unzip the downloaded file called “highslide_iweb.zip” and you will see a folder simply called “highslide”.  Drop that folder into your published site folder (not your webpage folder).  When publishing iWeb makes a index.html file and your site folder (named whatever you named it in iWeb), this is the folder you want to drop this highslide folder into.)

Step 6) Open your favorite HTML Editor (Coda, Espresso, TextEdit) and you are going to find and replace the code below:

Find:

</head>

Replace with:

<script type="text/javascript" src="highslide/highslide-full.js"></script>

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

hs.graphicsDir = 'highslide/graphics/';

</script></head>

Step 7) Now we’re going to find and replace one more item:

Find:

title="pagename_files/imagename_1.jpg">

Replace with:

title="Click to Enlarge" onclick="return hs.expand(this)">

When it says “pagename” that means whatever the title of your webpage you are doing this one in the sidebar of iWeb and imagename is the name of the photo you put on the page.  If your not sure what these names are, you can go back into iWeb and take a peek.  Here’s where you will look.

So for example if I was wanting this effect on my page called “iweb09” in my sidebar and my image was named “myimage.jpg”, then my replace code would be:

title=”iweb09_files/myimage_1.jpg”>

Important Note: If you are linking to a shape made in iWeb take off the “>” tag at the end of the search and replace. If you are linking an image to text get rid of the “_1” at the end of the find code.

Basically your are replacing the “title=…” tag of your items.  So if your having a tough time finding the right items to replace just do a search for “title” and copy that whole line “title=”mypage_files/myimage_1.jpg”>” and paste it to replace with the other code.

Step 8 ) Save your modified html file online and your good.

Highslide with Flash Files:

I’m going to go through the flash one a bit faster assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Make flash file (Adobe Flash, Keynote, Bannersnack, etc) be ready to link to it on your hard drive.
2. Make or get an image or button to represent that file (this will be your button.  It could be anything really, text, shape, image, etc) and put it on your iWeb page.
3. Link image/button to .swf file from the hyperlink inspector as a “A File”
4. Publish site
5. Add “highslide” folder to published site folder
6. Open your html page with HTML editor and find and replace the following code:

Find:

</head>

Replace with:

<script type="text/javascript" src="highslide/highslide-full.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">

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.preserveContent = false;

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

hs.graphicsDir = 'highslide/graphics/';

</script></head>

7) Now find and replace these:

Find:

title="pagename_files/flashfile.swf">

Replace with:

title="Click to See Flash" onclick="return hs.htmlExpand(this, { objectType: 'swf', width:300, objectWidth: 300, objectHeight: 250, maincontentText: 'You need to upgrade your Flash player'  } )">

8 ) Replace the items in red with your page name, flash file name, file width (twice), and height.
9) Save your page make sure it’s online and your set.  It looks pretty cool.

Highslide with iFrames:

Again I’m going to go through this one fast assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Create or Find your webpage that you’ll be iFraming in the highslide zoomer and put it online.
2. Make or create an image or button or text that will pull up this iFrame when user clicks on it and make it a hyperlink in the inspector to “An External Page” and type in the full address of the page (example http:www.iwebunlimited.com/iwebtips/iwebtips.html)
3. Publish site
4. Drop “highslide” folder (downloaded from above) in published site folder
5. Open html file with html editor and find and replace the following code:

Find:

</head>

Replace with:

<script type="text/javascript" src="highslide/highslide-full.js"></script>

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<script type="text/javascript">

hs.graphicsDir = 'highslide/graphics/';

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.useBox = false;

hs.width = 600;

hs.height = 450;

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

</script></head>

6) Then find the following code and replace it:

Find:

title="http://www.yourlinkyouadded.com">

Replace with:

title="Click to Enlarge" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">

7) Replace what’s in red with the size your want the highslide to be and the page you linked to. Save online and your set.

Note: If you have a page that has all of these items images, flash, and iFrames.  Use this code to replace in the <head> tags as the first thing you replace

Find:

</head>

Replace with:

<script type="text/javascript" src="highslide/highslide-full.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">

hs.outlineType = 'rounded-white';

hs.wrapperClassName = 'draggable-header no-footer';

hs.preserveContent = false;

hs.align = 'center';

hs.transitions = ['expand', 'crossfade'];

hs.dimmingOpacity = 0.75;

hs.useBox = false;

hs.width = 600;

hs.height = 450;

hs.graphicsDir = 'highslide/graphics/';

</script></head>

Then replace the second one’s with the ones above in their sections with their links.

It makes for a pretty neat effect.  Hope you find it helpful and if your not very comfortable using external editors, just take it slow, be very careful of your code and if you mess up, no big deal, just republish from iWeb and it’ll be brand new again to try again.

Back to Top