Video Tutorial-FancyZoom in iWeb


FancyZoom in iWeb, huh? What’s that. Well there are a many websites these days that have that popular image zoom effect so that when you click on the image it animates the photo larger. Well many have asked, how can I do that with iWeb? Well here it is, this is the tutorial to show you just how to do that. Keep in mind this one is a bit more complex, but it can be done without getting your hands to dirty in code.


  1. Andy 5 January, 2011 at 08:44 Reply

    I have the following problem: If I need to change something in iWeb on this page and publish it again, all the new FancyZoom code is gone and I have to do it all again. Is there a trick to solve this problem?

  2. Israel 17 February, 2011 at 09:39 Reply

    Works great in testing but not on the actual internet (after publishing)… Any ideas what the problem is?

    Thanks in advance!

  3. Jan 28 April, 2011 at 08:05 Reply

    Hi Jason,

    I’ve seen this comment many times but never and answer if im not mistaking:
    I do exactly as you told, but when i click on a picture it just opens up in a new
    window ( this window has nothing except for the enlarged picture in the upper left corner).
    No zoom whatsoever, any idea what the problem could be?

    I’m on iweb 08

    Many thanks in advance for your help

  4. hope123 30 April, 2011 at 19:46 Reply

    I have tried several times and can not get this to work. Like many others I am getting a separate window when I click on my photos. It seems a bit strange that so many people are experiencing the very same problem. Any thoughts on what major oversights may be occurring?


  5. Ayeisha 6 May, 2011 at 15:07 Reply

    Will someone on iwebunlimited answer Hope and Jan’s question? I have the same one and have looked everywhere for an answer to no avail…

    thanks in advance!

  6. Mr.L 12 May, 2011 at 00:55 Reply

    Jan, Hope123, and Ayeisha I had the same problem and I fixed it. Hopefully this can you all out also. I couldn’t figure it out until I stared at the screen making sure I did everything correctly. Make sure you have done these things. 1. Link the picture to it’s self, 2. Publish your site, then save your work. 3. download that fancyzoom folder and then put it IN your website folder. THAT was where I think I messed up. Then do the HTML editing like the video says AND SAVE YOUR WORK. Then go check out your site. (MAKE SURE THE FANCY ZOOM FOLDER GOES IN YOUR WEBSITE FOLDER :). Andy I have the same problem as you :(

  7. Mr.L 12 May, 2011 at 01:46 Reply


    JAN, HOPE AYEISHA – I don’t know why but when you put the fancy zoom folder in you website folder, IT DOESNT ALWAYS STAY IN THERE. So if you update your site or something it won’t be in there. SO ALWAYS MAKE SURE THE FANCY ZOOM IS IN YOUR WEBSITE FOLDER :)

    ANDY – I GOT IT! lol After replacing the codes and all that MAKE SURE YOU “SAVE AS” (NOT “SAVE”) and it will replace that old folder with the new folder that has the new codes. BUT if you ever want that original html folder (the one before the code changing) HIT “SAVE AS” on it BEFORE you change anything and save it to your documents or desktop or where ever. THEN you can start changing the code :) Hope this helped you all!

    ALICE – You HAVE TO PUBLISH AND SAVE your work on iWeb after doing the steps. FOLLOW THE VIDEO VERY CLOSELY :)

    DUSTIN) – How do I put this… For faster loading purposes I made my pictures a smaller file size version (for my website) THAN MY ORIGINAL, now in the video he says, “… link the picture to its self…” now what I did was link the smaller picture to my original pic OR you can link it to a BIGGER version of your pic so that you wouldn’t need to zoom. I use Photoshop to mess with file sizes. You can also use preview which is good too :)

    Hope I helped you all!!

  8. kmcdow 23 May, 2011 at 13:32 Reply

    I have transfered the FancyZoom folder into my idisk: web-sites -overhead slam (site name)- it downloads into site folder. Now this is where I am lost…. Look for fancyzoom.html and it does not appear. I go into fancyzoom folder and the only html extension is labeled FancyZoomHTML.js. It will not give me the codes to continue to step 5.

    Recap of my actions.
    set up photos on my bio page
    create hyperlink to a file for each photo
    published site
    download fancyzoom folder
    put into idisk
    web – sites – Overhead_Slam
    fancy-zoom folder is shown

  9. need help 24 July, 2011 at 07:29 Reply


    when i open up the html file in textedit it shows all the pictures .. text and all that stuff but no codes… how could i make this to show the codes and not the photos and stuff…

    thx already

  10. Rodrigo Hernández 1 September, 2011 at 06:13 Reply

    Hi IJason
    Thanks to upload your knowledge.
    I have a problem with my fancyzoom. I put a few pictures just down of a flash galery and when I click on the picture the zoom its appear under the flash galery. How can i put on the top???
    Thanks a lot.

  11. Ari 2 July, 2012 at 20:36 Reply

    Hi I am just stuck ehen the coding part comes when i open the html file no codes show, only my images…what am I doing wrong?

  12. Austin 16 January, 2013 at 00:03 Reply

    This is working well for me, but every time I republish the website from iweb, the html file reverts back and I have to go in and redo the changes that make it work. Are there any ways around this?

Leave a reply