iWeb Tip #8 – FancyZoom in iWeb

115
21823

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. Gikleo 19 November, 2010 at 21:48 Reply

    Ok, had the same problem with images opening in the new page.
    Went back to my iweb page with images and it occurred to me that all my images are actually places inside a bigger text box. the moment I deleted the text box and left my images just hang there, re saved everything, published it again! changed the codes again, saved it and went to check my website – the pop up fancy box worked!!! Hope that made sense! Bon chance!

  2. robot menager 2 December, 2010 at 20:21 Reply

    for the brobdingnagian accounting, but I’m real fatherly the new Zune, and hope this, as rise as the superior reviews many opposite group make statute, leave cater you resolve if it’s the ethical action for you.

  3. Marius 3 February, 2011 at 05:06 Reply

    I’m having trouble getting this to work. I don’t have a mobileme account, so I’m using a workaround that involves using Dropbox to host the site. It works for the actual site, but the photo effect isn’t working properly. It opens the photo in a new page instead of using the zoom.

    You can take a look here: mariuscmediascript.tk

    • Melvin chuleria 6 March, 2011 at 19:45 Reply

      Marius i was having the same problem. im hosting using dropbox too, heres my website http://www.melvin-chuleria.tk heres how i fix it, FancyZoom does NOT work on text box like Jason mention on the description, when you open a blank page template on iweb, by default, it has a few of text boxes. so i went to my site folder and look for the ” Blank_files folder ” and copy the jpg image that looks like the template you are using and paste it on your desktop. then drag the file into the template ( make some borders or frame so you dont get confused with the templates because they look alike) now you dont have a text box, so drag the photos on top of the copy of the template you dragged from the desktop and follow the steps on the description and you are all set .. i hope it works.,it worked from me ..

      PS: if you have Photoshop or Fireworks you can create your own template and drag it over, it works the same way …

  4. dave 15 February, 2011 at 12:02 Reply

    html file is greyed out in iweb and shows only white icons. What do I do to edit the code. Furthermore which .html file do I try to edit…. the one on the server or the one in iewb itself …. instruction do not specify

  5. Melvin chuleria 6 March, 2011 at 19:49 Reply

    For those having problems with photos opening in a another tab or window, I was having the same problem. im hosting using Dropbox , heres my website http://www.melvin-chuleria.tk heres how i fix it, FancyZoom does NOT work on text box like Jason mention on the description, when you open a blank page template on iweb, by default, it has a few of text boxes. so i went to my site folder and look for the ” Blank_files folder ” and copy the jpg image that looks like the template you are using and paste it on your desktop. then drag the file into the template ( make some borders or frame so you dont get confused with the templates because they look alike) now you dont have a text box, so drag the photos on top of the copy of the template you dragged from the desktop and follow the steps on the description and you are all set .. i hope it works.,it worked from me ..

    PS: if you have Photoshop or Fireworks you can create your own template and drag it over, it works the same way …

    • Abc-mommi 16 April, 2011 at 20:52 Reply

      Hi Melvin, Nice job on getting it to work on your site!

      I started with a blank page template as well. And I’m still very new to this, so I’m not quite following the directions that you wrote on how to get the image zoom to work. I found the ” Blank_files folder ” but I’m pretty much lost after that step!

      Can you please go over again on exactly how you did it… step by step?

      Thanks, your help is much appreciated!!!

  6. ryemac3 26 March, 2011 at 08:40 Reply

    Fancy Zoom works great on my site with one exception…..I also have some HTML snippets for Google ads. There’s 3 on the right hand side of my page. When the fancy zoom box loads, there;s one Google add that always shows on top of the fancy zoom box. I tried redoing the page by sending the html snippets to the back, and bringing the linked images to the front. But it still does it. I tired two other “lightboxes” and they all do it. Anyone know how to always display the fancy zoom box on top?

    • ryemac3 26 March, 2011 at 08:45 Reply

      OK, I got it finally, but don’t really know how. Highlighting all 3 html snippets and “sending to the back” didn’t really work. There was always at least on that consistently appeared on top of the fancy zoom box. I clicked each one and one at a time sent them to the back. That seemed to work. Now all 3 html snippets appear behind the fancy zoom box.

      • Rodrigo Hernández 1 September, 2011 at 03:48 Reply

        ryemac3, I have the same problem with the fancy zoom, the images appear in the back of the html snippets and i can’t moved to the top. But its only in crome IE, and safari. In firefox it works great, what can i do to solve this problem???
        Thanks a lot

  7. Stacy 8 April, 2011 at 08:24 Reply

    I’m probably an idiot, but I’ve tried for 2 days to get fancy zoom to work. My images open slowly in another page and you have to hit the back button to return to the website. I’ve uploaded the fancy zoom files to the parent directory of my web site, and I’ve edited the html file for the page where the images are. The images are not in a text box. I’m using godaddy to host my web site. The web site I’m trying to get this to work in is http://www.sueives.com, and the page in the site where I want this to work is the Published Works page. Can anyone help me? Thanks.

    • Shawn 13 May, 2011 at 10:18 Reply

      I’m also using godaddy to publish my site. Where did you find the parent directory for your website? I have no idea where to drag the fancy zoom folder to. Thanks.

  8. Eduardo Adney 12 May, 2011 at 20:13 Reply

    One thing I would really like to reply to is that fat burning plan fast can be carried out by the appropriate diet and exercise. People’s size not merely affects appearance, but also the general quality of life. Self-esteem, depression, health risks, plus physical capabilities are impacted in putting on weight. It is possible to just make everything right whilst still having a gain. In such a circumstance, a medical problem may be the reason. While excessive food but not enough exercising are usually guilty, common medical conditions and widely used prescriptions might greatly amplify size. Thanks for your post in this article gywl512.

  9. Jakob 23 May, 2011 at 12:44 Reply

    After I enter the code into my html snippet. I then go into my .html file to edit the code (to add titles and and borders, etc.) After I publish it or my changes to my website, the code does not stick. I have to manually enter everything in again. Does anyone else have this issue or know why this is happening? Thanks.

  10. Boban 4 June, 2011 at 04:29 Reply

    Dear Jason,

    I did exactly what you said and it works but as soon as I run my web site on WebCrusher to optimize it it went back as it was before I have changed HTML code. Any ideas how to fix it? Or it is just not possible at all to optimize?

    Thnax,

    B.

  11. dan 9 July, 2011 at 10:56 Reply

    for some reason when I go to click the fancyzoom.html text edit thing it shows only random parts of the page and not code…

  12. slot machines 15 July, 2011 at 06:00 Reply

    Hi there, You have done an excellent job. I’ll certainly digg it and in my opinion suggest to my friends. I am sure they’ll be benefited from this web site.

  13. Dano 26 August, 2011 at 01:44 Reply

    I’m going crazy..I followed all the steps and when I publish to the folder Fancy zoom vanishes.
    What am I doing wrong??? I literally saw it disappear from my folder.
    Help, My sanity is at stake

  14. Miguel 29 September, 2011 at 17:34 Reply

    I have made my website using iweb and followed the instructions here and worked perfectly. Then I wanted to edit it in Adobe Edge, Edge will make a js to animate HTML sites so when I tried that the zoom did not worked just the js that Edge created.

    Any help?

    the code is as follows :

    gallery


    <—————————HERE IS FANCY ZOOM

    <—————HERE IS EDGE

     
     
    …………

  15. Miguel 29 September, 2011 at 17:36 Reply

    Sorry Im new to this CSS stuff

    ” DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
    head

    gallery


    /head
    body style=”background: rgb(255, 255, 255) url(gallery_files/1280_900_MRA_background7.jpg) no-repeat s”

  16. Mike 27 October, 2011 at 04:21 Reply

    Hi

    Thanks for the tip. It worked fine with the first image i tried, but as soon as I created a hyperlink for a second image (on the same page). It then opens them in a new tab.

    Can I use FancyZoom for more than one image on the same page? If so, is there a certain procedure I should follow?

    Thanks…

  17. Charles 4 November, 2011 at 21:35 Reply

    Thanks for the tutorial, it was a tremendous help.

    I had the problem with the zoomed image opening in a new page. I found 2 things that may have caused it
    1. the image i linked to was HUGE – hadnt been resized for the web
    2. using txt editor to replace the text, I found it didnt replace the text in the correct place, just put it at the top of the page

    So, I resized the pic and used text wrangler (free) to search and replace. Text wrangler replaced the text in the body, not what text editor did.

    Not sure which one fixed it, but it works and Im more comfortable this way.

Leave a Reply to robot menager Cancel reply

Facebook
Twitter
YouTube