iWeb Tip #8 – FancyZoom in iWeb

115
21957

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 comments

  1. Katie 4 May, 2010 at 09:08 Reply

    Hi Jason,

    Thanks so much for the tips! Your video is very well done and easy to follow and your instructions are great…

    Except I am still having a problem! After carefully reviewing the instructions, I’ve tried this this at least 8-10 times. Like Elise and many others, my images continue to open in a separate window.

    I know it’s hard to troubleshoot without specifics, but the one thing I will say is that I see this code at the top of my page after I attempt this effect: navbar.js”> onload=”onPageLoad(); setupZoom();”

    Again, I appreciate all of your wonderful information. Any suggestions or advice on this issue would be great.
    Thanks,
    Katie

  2. Osvaldo 17 May, 2010 at 19:43 Reply

    Well this is a great tutorial but alot have the problem that they open in a new window i don’t know how but i found the solution you know the first thing we had to replace it haves an error this is the real one

    delete the part that say HERE

    when copy it will look like this

    xxxxxxx”fancy-HEREzoom/FancyZoomHTML.jsxxxxxxx

    and delete HERE and it look like this

    xxxxxxx”fancy-zoom/FancyZoomHTML.jsxxxxxxx

    the xxxxxx mean the rest of code do not copy xxx and delete HERE

  3. Alex 22 May, 2010 at 17:36 Reply

    To everyone that has had problems with this, if you have a new page that opens up instead of the fancyzoom it is because the photos are NOT the same file. On my website I lowered the photo quality to a minimum but when I made the hyperlink I did it with the original photo. The image is the same but Iweb and fancyzoom treat it like a a different file. SO make sure that when you set up the hyperlink it is the same file as in your website.

  4. Alex 23 May, 2010 at 09:17 Reply

    AND!!! you must also make sure you do it all in the correct steps. If you have multiple pages that you want fancyzoom on, you have to do the hyperlinks on all of them first, then copy the fancyzoom file to your site folder, then edit the HTML on each page.

  5. Ken 26 June, 2010 at 01:35 Reply

    Hey, I’ve followed the instructions several times. However, when I publish to a folder in order to publish to another domain than MobileMe, the replaced html code reverts back to the original text. Any ideas? Thanks.

  6. RT 28 June, 2010 at 10:24 Reply

    Hi, I really need HELP on this, I have try to working on the steps many many time, but still can not Facyzoom.

    I have download the zip file and drag into the website folder folder, and the mainly problem is, I was try to replace the code in you website to my html file, Only the Flie 1 can be Find and replace, and teh File 2 can not be find and replace, please help me on this, Many Thanks

    Hope to have to reply from e-mail soon.

    THANK YOU VERY VERY MUCH

  7. Harry Lowe 28 June, 2010 at 11:24 Reply

    Every time I click on the image it opens up in another window. I am a zombie staring at the screen trying to this over and over again. I appreciate all the feedback, but iWeb users like myself are not experienced website builders. I don not understand what I am doing wrong. I used the same image when connecting the hyperlink. I am publishing to an FTP site, but I still get the image opening in another window. Help!!!

  8. Harry Lowe 28 June, 2010 at 12:55 Reply

    Jason: I do appreciate your tutorials and sharing your knowledge with us, but if several people are having the same issue (image opens up in another window and without FancyZoom), then it is worthy of a further explanation about how to get it right. Thanks for your consideration.

  9. RT 1 July, 2010 at 08:26 Reply

    HI Jason,

    I really need your help, but still didn’t have your reply, Hope to get your reply soon, Many Many Thanks

    Thanks From RT

  10. Eric_t_viking 17 July, 2010 at 09:33 Reply

    Hi

    I love the idea of the zoom but like others its is just opening up in a new window. I am looking to develop a commercial site so will pay as long as it works.

    any ideas?

    thanks

  11. Alex 9 August, 2010 at 05:01 Reply

    Hello all,
    If you are having problems with another page opening instead of the zoom, besides making sure that it is the correct photo that you are linking (f you have several versions it will cause a problem. Make sure it is the same photo so it is linking to itself), be aware that anytime you publish the fancyzoom file is erased from iweb. Make the hyperlink, publish and save, copy the fanzyzoom file to the root of your site via Idisk as in the tutorial, change the HTML code, save, and then make sure that the fancyzoom file is still in the site. I would recommend closing all the HD window (showing Idisk, HD, etc) and re-opening to make doubly sure that the fancyzoom file is still there. If it still is not working, check that the HTML code is correct and then again that the fancyzoom file is still in the Idisk root site.

    • iWebUnlimited 14 August, 2010 at 18:09 Reply

      Ricardo, post a link to your page where your having problems so we can take a look at your code and see where your problem is.

    • iWebUnlimited 14 August, 2010 at 23:12 Reply

      Ricardo, post a link to your page so me or others can help you. It does work and has been done many many times. Try looking at the example and see differences with the code there vs your own. That my help you find the problem.

  12. Karl 13 September, 2010 at 06:46 Reply

    If you’re having trouble it’s probably because you’re not doing it in order. First you need to do and publish the page. Then you need to add the Fancy-Zoom folder and alter the code. You must do it in this order and you must repeat the second two steps every time you publish. It’s doing all three steps and doing them in order that’s the key. Each time you hit publish the Fancy-Zoom folder disappears and if you rejig a page the inserted code disappears from the html document. So, each time you hit publish you must add the folder again and you need to insert the code into any pages you’ve altered. Do this and it will work.

  13. PT 18 September, 2010 at 16:35 Reply

    I’m definitely having the same problem. I’ve repeated all of your suggestions, making sure the links are correct and that they are loaded in the correct order but it still opens up a new page. I’m really grateful Jason for helping iweb users with this facility, it is probably just a small thing that would resolve the problem… do you have any more suggestions? Big thanks.

    • PT 21 September, 2010 at 12:23 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. Thanks Jason – it’s Great!

  14. victor 29 September, 2010 at 20:48 Reply

    hey,

    I was wondering if anyone could help me with this…
    In step 5 when you access the HTML file and open it with Textedit I do not get any code, I see my webpage exactly as it appears on safari. I cannot edit the code if I cannot find the code…
    If anyone can help me with this I would really appreciate it.

    • victor 29 September, 2010 at 22:57 Reply

      sorry i figured it out….
      however now i am getting this at the top left of my webpage onload=”onPageLoad(); setupZoom();”
      I have read all comments, the pictures are the same, hyperlink is done, folder is in the site… pretty sure its all correct…. stinks to be iweb illiterate …

  15. Jheld 1 October, 2010 at 10:30 Reply

    i too was having all the same problems as everyone else….the code showing up at the top of the page, the image opening up in a seperate window, etc. HOWEVER, if you go back and check your steps and do things in order, it works out. Thanks IJason

  16. Alan 5 October, 2010 at 14:22 Reply

    Hi guys,
    I too am convinced I have followed the correct steps on many occasions. I ll give you a give breakdown on the what I did (Oh, at this point let me just make you aware that my website is published locally for the moment, don’t know if that will make a difference):

    1. Copied 3 Images into my ‘Stories’ webpage, each image I have shrunk and activated the hyperlink function, each image is hyperlinked to their own image from the harddrive.

    2. Site and changes made to the site is published to a local area in the mac.

    3. Unzipped the FancyZoom folder and placed it in the root of my website folder. (I did try unzipping it into the same folder as the webpage too.)

    4. Using TextEdit, I copied and pasted the 2 changes needed altering. I also reverted to typing these in manually aswell.

    5. Saved and launched webpage………… Images opening in another window.

    HELP!!!!!!!!!!!!!!!!!!!

  17. iWebUnlimited 6 October, 2010 at 01:35 Reply

    Hello iWebUnlimiters,
    For those having trouble with this tip, here are a couple things to try and check:
    1 – Make sure that the fancy zoom folder is called “fancy-zoom”, sometimes if you download or unzip it more than once your mac will rename it “fancy-zoom-1” or “fancy-zoom-2”, etc
    2 – If you editing with TextEdit, be sure to check the checkbox in the preferences that says ignore rich text in HTML
    3 – Be sure the fancy-zoom folder is in the site folder, not the page folder. It should be in the same location as the html page that the effect is on.
    4 – Modify the code very carefully, if one thing is wrong it will not work.
    5 – This effect does not work on shapes made in iWeb or Text Boxes. So if you want that sort of look, say a fancyzoom from a button shape, then turn your shape into an actual image (jpg, png, etc).
    6 – If you’ve tried all of the above and it’s still not working, try deleting your published site (locally) and then go into iWeb and choose file > Publish Entire Site, this will republish the entire site and you’ll get a nice fresh start.
    7 – If you still stumped, take a look at my demo page and press command + u (safari) and look at the source code of my example and compare it to your page. See why it works on my demo and not yours.
    8 – If your confused on what to do exactly, go to my video tutorial on this very tip on the video tutorials page.

    If you’ve done all 8 of these things and you’re still having problems, then describe your problem here in the comments and post a link to your page. But hopefully you won’t have any problems and my little tips here will help you get your iWeb site FancyZoomin!

  18. Drnino 27 October, 2010 at 23:37 Reply

    I found the solution for preventing the new window pop up. When you’re replacing and editing your html, Step 5 # 1 is located in two different places. You will need to search or press the next button when using the find box. You only need to replace the that sits on it’s own. This did it for me!!! Good luck guys!!!

  19. matster 9 November, 2010 at 07:29 Reply

    the fancy zoom works great.
    but do you have to re-enter the code every time you re-publish the site?
    it seems to be going back to the default code every time i make changes and publish again.

Leave a reply

Facebook
Twitter
YouTube