Sep 01

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.

VIEW DEMO »

Step 1:
Drag a photo onto your iWeb page that you would like the photo fancy zoom to be on.

Step 2:
Click on your photo, and head to the hyperlink inspector and make the image a hyperlink. Where it says “Link To:” choose “A File” and find your same photo that you dragged onto the iWeb page.

Step 3:
Now your done with the iWeb part. Now publish, either to a folder or to MobileMe.

Step 4:
We now need to do just 2 more things. First download this .zip file.

DOWNLOAD FANZYZOOM .ZIP FILE

Once downloaded, open the zip so you have your folder titled “fancy-zoom”. You will see a bunch of files inside of that folder. You’ll need to drag this folder into your site folder. To move to site folder see options below:

If you published to a folder:
Find the web export folder that you published to and you will see inside a index.html file and a folder which is the name you gave your site. Drag the “fancy-zoom” folder into that site folder.

If you published to MobileMe:
Open up a finder window and go to the iDisk. You are then going to search for the “Web” folder, then go into the “Sites” folder, and in there you should see a folder named the name that you titled you site in iWeb. Drag and drop this fancy-zoom folder into that folder (it may take a while depending on your internet connection).

Step 5:
Almost done. We now just have to alter some code. Now don’t get scared quite yet, it’s not to bad. In that same folder that we dropped the fancy-zoom folder you will find a bunch of other files including that page that you want to have your fancy zoom on. Find that html page that you added the photos to and we need to open it up with something that allows you to edit html code. I personally use “Coda” by Panic Software, they even have some trial version so you can try it out or just use it till you get your fancy zoom going. Anyway, you can also simply use TextEdit on your Mac. So here’s what you going to do. Find that .html file, right click, choose “open with” and choose your html editor, it will say TextEdit or Coda or whatever you choose. You will then see all the great code that iWeb users typically try to stay away from, but we just need to alter 2 lines of code. Both Coda and Text Edit have a Find and Replace feature. So press command + F on your keyboard and you’ll get the find and replace window. Simply find and replace these two things:

1) Find:

</head>

Replace:

<script src="fancy-zoom/FancyZoom.js" type="text/javascript"></script><script src="fancy-zoom/FancyZoomHTML.js" type="text/javascript"></script></head>

2) Find:

onload="onPageLoad();"

Replace:

onload="onPageLoad(); setupZoom();"

Then just save (command + s, or File > Save).

Done!

Now that wasn’t so bad eh?

From there you should have a fancy, shmancy zoom that will look great and it will also work on the iPhone. Pretty cool, eh.

Note: You can only use FancyZoom on none commercial websites, if you would like to use FancyZoom on a commercial site you must purchase a license for $39 on Cabel’s Blog (the creator of FancyZoom)

More Notes:

If you are looking to do other things with FancyZoom here are some tips:

• If you want to replace the Title below the photo then, do a search for href and find the title it’s using and change to what you want. Example title=”Add Your Title Here”

• If you want to get rid of the title entirely just Edit the FancyZoom.js file and on line 431, change the “visible” value to “invisible”

• If you want to add a border on the popup just add something like a 10px border on the image by adding the following at line after 63 in FancyZoomHTML.js: inImage1.style.border = ’10px solid white’;

• FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

• There is not a way to put anything else but photos into the fancy zoom, so no videos, flash, etc. But I’m working on another tutorial to use another method so you can get video and flash in them, check back.

115 Responses to “iWeb Tip #8 – FancyZoom in iWeb”

  1. florin says:

    Hello IJason,
    I used Coda and Text Edit to find and replace the next line: onload=”onPageLoad();” and it can not find it, any idea why? Please help !

  2. fernanda says:

    hi,
    the download link is not working =/
    can you fix it?
    thanks

  3. iWebUnlimited says:

    download link fixed. Thanks for letting me know, download away.

  4. pistol says:

    I’m glad to see you publishing, and will continue reading if you keep publishing.

  5. randy says:

    when i choose “text edit” to open index.html file, nothing populates the text edit window. absolutely blank.

    • randy says:

      coda did the trick

    • myself says:

      When you go in to text editor preferences you wil find in the tab OPEN AND SAFE

      the line : when opening a file:

      ignor rich text comands in html files ( This schould be checked)

      highlight it and close preferences

      now you will be able to use that to open your html to edit them.
      greets

      Jan

  6. Greta says:

    I can’t get the zoom feature to work. The fancy zoom folder keeps deleting from my website folder.

  7. tachowar says:

    I do al the steps and the fancy zoom is not working it simply open the photo in another window. Please help ! thanks for your time.

  8. I am having the same problem. it is opening the web browser to view. i have watched several times the video and trying to find my mistake but unsuccessful.
    any ideas?

  9. Ian Boe says:

    I’m having the same issues as the last two people. I tried it on my digital art page of my site as a test. I followed the steps and it keeps opening the image in a new browser window with the image flush left with a white background. Any help with this will be much appreciated! Thank you!!!

    • You says:

      When ever you re publish your iWeb website it is automatically going to over right the codes that you did for fancy zoom.
      Sources- It happened to me

  10. Vise says:

    I’m having the same issues as the last 3 people.

  11. iFurlo says:

    Hi, wonderful site!
    I have a problem in my site using iframes and fancyzoom not work well, there is a solution?
    TK

  12. You says:

    When ever you re publish your iWeb website it is automatically going to over right the codes that you did for fancy zoom.
    Sources- It happened to me

  13. Tara says:

    Hello,
    I choose text edit and there is no code. Just the picture I inserted. Did I do something wrong? I tried find but it doesnt find

    Help.

    Thank you.

    • iWebUnlimited says:

      Tara, yes you have to go into TextEdit prefs first and check on the checkbox that says ignore rich text commands, the you can edit your HTML with it.

  14. Tara says:

    Text edit didn’t work. Downloaded Coda and worked nicely…thank you

    • Tara says:

      having the same problem as other posters. File gets written over.

    • iWebUnlimited says:

      Yes, this is just like the other post Highslide, Shadowbox, Lytebox, and all other model box pop-up techniques. Each time you publish with iWeb you will have to do this again.

      One suggestion is to create a separate site for the page you want this effect in, and keep the other parts of your site seperate so you can edit it all the time and won’t have to keep doing this post-publish trick each time.

      Hope that makes sense.

  15. Alex says:

    Hi Jason – thanks again for the tips!
    I use 2-3 of your tips and I never have any issues but I am having the same problem as several people with it just linking back to a huge image of the picture? been through the video and instructions twice each now before bugging you with this.
    We must all be making the same mistake – does it have something to do with linking back to the file on our own hard drives in the first step? should we be linking to an online image?

    Sorry to pester for something that you are so graciously offering up but at least you can set several of us boneheads straight with one fell swoop.

  16. Dan says:

    Hi Jason,

    First of all thank you for your excellent tutorial. I haven’t tried it yet ’cause there’s one thing I don’t understand generally:
    If I am implementing FancyZoom does it mean that all images on my website react with zooming when klicked (this would be bad because I am using images for text as well)? Or does it mean that only those images that are hyperlinked the way you describe it are affected? I am a little confused because of the FancyZoom description on Cable’s Blog. Thanks.

  17. Renat says:

    Hi Jason,
    How I can clean the file name in zoom window?
    p.s. sorry for my bad engl. :)

  18. Renat says:

    oops
    i read notes )

  19. Ertan says:

    how can i publish to godaddy web hosting with FancyZoom in iWeb

  20. Jack says:

    Awesome, man!

  21. Troy says:

    This is really really cool. Everything worked GREAT!

  22. Elise says:

    Hi Jason,

    I have followed every step to the letter and watched your video 2-3 times. Each time try it once published, it just opens in a new page with no zoom. Very very strange. And I am generally pretty efficient with these sort of things. How about some help????
    Thanks,

    E

  23. Sanz says:

    Hi Jason thanks for the tips they’re amazing. Out of curiosity, the solution you provided for Tara suggesting a new site; how would you merge or integrate the info from the “new site” with the original site? Or am I to understand that there is no option other than re-writing code each time I re-publish?

    Thanks

  24. Ray says:

    Can you put a (dimmingOpacity) On this one?

  25. Jack says:

    I believe I found the answer to the problems above where people are clicking on their thumbnails and getting a larger versions of the image in a new window (in the top left corner). It happened to me too, until I realized my error.

    The fancy-zoom folder has to be placed in the specific site folder, not just the “Sites” folder in your “Web” folder (for MobileMe users). In other words, if your website in iWeb is called “Family”, then you need to drop your “fancy-zoom” folder in the following folder: Web > Sites > Family. Even though that step is clearly spelled out in the detailed instructions for Mobileme users, it is slightly (unintentionally) misleading in the instructions above it where it says: “Once downloaded, open the zip so you have your folder titled “fancy-zoom”. You will see a bunch of files inside of that folder. You’ll need to drag this folder into your site folder. To move to site folder see options below:” Obviously the “site folder” being referred to here is NOT the Web > Sites folder…

    Hope this helps…

    Now, my question – why is Fancy-Zoom so slow for PC IE8 users? Firefox on PC is fine…but I tried two different PC’s on IE8, and the animation of the zoom is incredibly slow. Could the solution be the same one used for the Shadowbox issue? Any help would be appreciated.

Leave a Reply