Video Tutorial-Highslide in iWeb


Highslide JS is a great way to get that ever so popular image zoom effect just like the fancy zoom post I’ve done 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 will need the use of an HTML editor like Coda, Espresso, Dreamweaver, even TextEdit. You’ll also be using the tips page for the code reference and download which can be found here.


  1. Tony 25 February, 2010 at 23:54 Reply

    OMG!…. Thank You for this website, I learned more in 30 minuets than I have in 3 months. I didn’t really understand the limitations before I started using iWeb, but i certainly didn’t have the time to learn Dreamweaver either.
    Will be sending you a donation…. Thank You!!!

    • iWebUnlimited 26 February, 2010 at 15:50 Reply

      Alejandra, you need to set where the iWeb exports the site (Local Folder, MobileMe, or Server). You set this by clicking on your main site in the sidebar.

  2. JAIME 2 March, 2010 at 11:29 Reply

    I have buttons with a rollover that I made using your rollover tutorial- how do I get them to be interactive to the swf and use your code that you have shown me?

    What special considerations would I need to make to prep the button because the images that are represented in them are an HTML snippet…..

    Thanks! your site has been a huge help….

    • Sjoerd 30 April, 2010 at 02:27 Reply

      he man,

      I’m having the same problem, do you already found a solution to link your rolloverimage to highslide?

  3. Edwin Sixt 5 March, 2010 at 12:02 Reply

    Dreamweaver has been for a while my goto program for a long time. I really don’t know what I would undoubtedly do without it. There were moments when I initially begun using the application, and I thought it was way too complicated. Now I fly around it, and it has turned into a great asset in my personal tool box. Anyways thanks for the information.

  4. SONNY MARCYAN 5 March, 2010 at 23:08 Reply

    You are incredible sharing all this great information. I watch other site for iweb workarounds but yours is much clearer for someone learning these things.
    Thank you and will give something for your work and efforts. When will apple make an iweb pro app? In the meantime we have you, thanks again!


  5. Ragini 28 April, 2010 at 08:26 Reply

    Remarkable to have all this information available. Thank you so much for this immense help. Unfortunately I am not able to make highslide work on mobileme. Though it works like a dream if I follow your steps and save it as a folder. Something I am doing wrong? Look forward to your reply. Thanks.

  6. Melina 13 May, 2010 at 19:36 Reply

    First off…thanks so much for all your tips. They are priceless.

    Second…i’m trying to do any of these shadowbox effects on our site. I publish to an FTP folder through and I can’t figure out where to drop the downloaded file to. Do i do this into my files? Any help would be appreciated!!



  7. Jack 14 May, 2010 at 09:33 Reply

    Thanks for the tips! Your site is great!

    I’m new to iWeb, but very serious about learning how to use it. I can’t figure out how to make the iWeb files show up on the desktop (like Alejandra above (can you be more specific with the feedback?)). Can you perhaps tell me step by step how to get the files to be published to the desktop… I just don’t know how.


  8. Israel 21 June, 2010 at 01:13 Reply

    I got it to work but found the following errors

    If you so much rearrange the slightest graphic or any other element and have to Re Publish the site iDisk will not only delete/remove the “highslide” folder from your Site but you’ll have to go back and re-due all the coding on your page’s html file.

    Again I got it to work with multiple jpegs but also found that when replacing the tag with your code, all other iweb elements such as background image and menus get taken out.

    Please advice.

    Please Help me to get this work and as I’m telling everyone about your site and come Paycheck I’ll be dropping some contributions your way. :)

    thank you again…it’s 1am and I’ve been at it since 8pm


  9. Jaza 19 July, 2010 at 04:33 Reply

    When I try to copy the highslide folder to my site folder on my mobile me account I receive an error when the highslide.css and the swfobject.js files try to be copied over. “The Finder can’t complete the operation because some data in “highslide.css” can’t be read or written.
    (Error code -36)”

    I’ve tried to copy over the Lytebox files and I receive the same error. Can anyone tell me what im doing wrong?

  10. Kerry 19 July, 2010 at 17:43 Reply


    Every time you republish iweb it will erase and re-upload any page that was altered. If there are non-published iweb elements in those folders, they will be removed automatically. So If you add files to the folder or alter the html code after the page file was created, you will need to redo this every time. The only time you wouldn’t need to is if the code was placed in an HTML snippet. Unfortunately, you cannot do that with Highslide as it requires after edits.

    • Jeza 23 July, 2010 at 00:07 Reply

      Hi Kerry,

      Thanks for the info. Can you recommend a workflow to be able to save your html revisions so if you have to republish with iweb you can restore the code that gets overwritten?

  11. PT 21 September, 2010 at 12:15 Reply

    To anyone having problems with a new page opening, it’s worth checking that your version of Fancyzoom doesn’t have any numbers after it. I had downloaded fancyzoom more than once, so the folder was called ‘Fancyzoom 2’. By deleting the 2 the link worked and I now have the beautiful zoom effect.

  12. Moosa Reza 9 November, 2010 at 18:17 Reply

    Excellent tutorial, however, I have two questions. First of all when I add the codes, my ‘navigation’ disappears from the top of the page… and secondly I want to know how can I use multiple images as I am trying to make a site with different cities I have travelled to and I want to be able to show albums containing 10-12 photos of each city. Can you please advise how would that be possible using Highlight?

  13. Kari 17 February, 2011 at 16:25 Reply

    I did this late last night and it worked fine. but then had to edit my site and no matter how many times I retry to do this it will not work for me. I have deleted everything and tried again. So now I have a website that has mistakes on it because I can not reload my site because I can not get it to work at all. VERY FRUSTRATED. I am trying to do this with a jotform and have it linked to font just like you did.

    very frustrated:(

  14. simon m 19 May, 2011 at 14:24 Reply

    hi, i have tried the fancy zoom effect and this highslide over and over. I follow the steps in the tutorial step by step. using text edit (which opens the page as a kind of pdf rather than any text code) and coda.
    Each time after doing it exactly as per tutorial. The images just open in a new tab. I have no idea why but god i’d like to have this effect work.
    P.s i delete and reset the iweb as before the changes to that page b4 tring again.

  15. simon m 19 May, 2011 at 15:07 Reply

    ok, after trying again. i now have a image that still opens in a new tab. One i did earlier that now suddenly opens as it it should (so chuffed :) and a new one that opens but smaller!

  16. Amanda 1 June, 2011 at 13:07 Reply

    Everytime I upload to my root server and then go back to iweb it works.. UNTIL I publish it.. then it deletes what I uploaded to my server. What am I doing wrong? I appreciate any help I can get… thanks!

    • Amanda 1 June, 2011 at 13:15 Reply

      Never mind =) I figured it out!!! It was deleting it every time I republished… Thanks tho awesome tutorials!

Leave a reply