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.
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.
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.
Hello, first sorry for my english…
The tuto works fine for me but is there a method to use it with pictures not in landscape mode? because for all the pictures, the result when i click is “landscape”. Thanks
Hi! Thank you for showing this fantastic feature. Thank you too for this Lytebox tutorial. At the end I decided without the Lytebox. I have a question respective the FancyZoom. Is its posible that the window opens a little bit slower. In my opinion the window opens very fast and that looks a little bit rough. Its not such a big problem but I think if it would open and close slower, the zoom effect would be more elegant. Is there a way to change it in the HTML Code?
Best regards,
Sebastian
Thank you for the good writeup. It in truth used to be a entertainment account it. Look advanced to more brought agreeable from you! By the way, how could we communicate?
super easy you’re a monkey if you can get it on the first try!
What if you publish to an FTP server. Some of the steps like dragging the FancyZoom into the .html page you’re using wouldn’t work at all. Also trying to open with text/edit doesn’t bring up the hmtl to view.
Hi
Have just begun to use the iWeb (yes slow starter) but just needed to see what it could do and must say yes it is simpel. Almost too simpel – normal I use the DreamWeaver, so I was hoping to find something like this and must say Wouw this is good stuff
Keep up the spirit this rocks :O)
Hi, I have followed step by step 100 times with FancyBox and FancyZoom but I keep getting the same results. The pictures open in a different window instead of the popup window. I have not published my site yet waiting to solve this issue. Any help would be highly appreciated. Thanks in advance…..
Another problem, everytime you make an update, iweb erase the modified lines in the html file, and anactive Fancyzoom.
There is another solution using snipset on this page, but that’s in french.
http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/3/11_Effet_FancyZoom.html
thanks,
this trick and the tutorial is awesome
Hey!
I’m using iWeb 3.0.4 and my OS is 10.6.8
I downloaded the zip file but I do not have any facy-zoom.html
I am not using iDisk because it wont allow me to use mobile me.
Help?
Thanks!
Pretty section of content. I simply stumbled upon your web site and in accession capital to say that I get in fact enjoyed account your blog posts. Any way I will be subscribing on your augment and even I fulfillment you get admission to persistently quickly.
This is so simple and elegant – a perfect solution !
לפני הכל המלצה ממני , רוצים בית ולא בחרתם לבית שלכם עיצוב פנים העונה לטעם שלכם , כדאי לכם להזמין אנשי מקצוע או עם מעצבת פנים ממגוון מקצועות , עיצוב פנים , שיפוצים , עיצוב חדרי ילדים ועוד.
The pictures open in a different window instead of the popup window. Any help would be highly appreciated. Thanks