Did you ever want this cool image-zoom effect? You click on an image and the image enlarges itself right in the window? No reloading and it all looks sexy? Well this tutorial will show you a perfect and easy way to add an effect that will enlarge your images right in your iWeb-made site.
Image Zooms … what? Not sure what I am talking about? Take a look at the demo.
The internet has quite a variety of scripts that allow you to create these zooms. Here are just a few:
All of them are very easy to integrate, but Cabel Sassers FancyZoom is the simplest. That’s why we will be using his.
Now let’s get started.
- For this tutorial you will be needing four things:
» iTweak. It’s free.
» This search and replace database file for iTweak.
» The actual FancyZoom. Download it from the blog post.
» An iWeb-site with an image. That image needs to be enabled as a hyperlink. That hyperlink needs to go to an image file (the image that should later enlarge). The file type should be.jpegor.png. For more details, see the FancyZoom post by Cabel.
- Now publish your iWeb site to your default location.
- Now go ahead and take a look at the downloaded FancyZoom folder. Inside there you should find two further folders. One is named
images-zoomand the otherjs-global. Open up theimages-zoomfolder. Inside that folder you will find another folder. Open that one up as well. In there you will find a collection of images. Move all of the images into the folderjs-globaltwo directories higher. You can now trash theimages-zoom folder.
- Rename the folder
js-globaltofancy-zoom. - Now we have to do some nasty little code editing. What you have to do is open up the file
FancyZoom.jsand edit line 44 from this:var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow imagesto this:
var zoomImagesURI = 'fancy-zoom/'; // Location of the zoom and shadow imagesAlternatively you can just download the edited file and replace it with the original one.
- Open up iTweak and navigate to the Search & Replace tab. There you will find a button labeled “Open Table.” Click on it and now choose the file downloaded previously. The file is named
FancyZoom.itwksr. Once you’ve opened it up, you should see something like this:
Make sure you tick the option to “Search & Replace Code.”
- Now navigate to the “File Copy” tab in iTweak. Tick the option to “Copy Files.” Then click the “+” button and for your source folder select the renamed folder
fancy-zoom(step 4). For your destination folder select your published iWeb site.
Optionally you can save the “File Copy” table using the “Save Table” button. That will allow you to reopen the table the next time you launch iTweak without having to manually reselect your folders.
- Now click the button in the bottom-left labeled “Choose Published Site.” Navigate to your published site and hit “Choose.” Then hit the “Create” button and iTweak should do it’s job.
- Now you’re done! Visit your site and enjoy the zoom you’ve got.
Please do note that when you publish again … you’ll have to start all over with this tutorial as iWeb overwrites the published files each time you publish.
Looking for iWeb Templates? Check out my huge collection right here.
If you have enjoyed this article and you wish to make a small donation, then feel free to do so by clicking here.
I would like to learn how to do something similar to this. With shadowbox, I know it is possible to have external websites load within a ’shadowbox’. Is it possible to implement this feature using iTweak? and would you be able to make a tutorial or video on how to do it for the newbs.. like me!.. lol
Max, hi!
Thanks a lot for doing it!
I don’t know what’s going on, but I did repeat your instructions very carefully several times, and it’s not working. I honestly don’t know, where the problem is hidden.
I’ve made a simple website (nothing else, except of one image, that supposed to be enlarged), and followed all the steps you’ve wrote and I can see the image, I can choose it, so that the big one appears (in a new window), but there are on fancy zoom at all.
Help me! Help me!
Piotr J.
Any chance you’re working on a simple tutorial like this for FancyBox? I like the look of it better and the options to load iframes and videos but i’m a complete moron when it comes to this stuff and my only way is to use the wonderful idiot-proof info you provide.
thanks
Max,
Wow. Great.
))
I will zip the iweb file and upload it to my server, but please give me a week time. And I would rather like to give you the link via mail, is it possible?
Thanks a lot!
Piotr J.
Yes. I will do so!
Thanks . Piotr J.
Hey there,
I’m using the fancyzoom instructions for a website i’m building for someone else. I’d like to get rid of the captions that come up because they are displaying not only the random title of the jpeg, but they are also revealing the path to the file. Is there any way to turn off the captions?
Thanks…caskey
ha! I actually figured it out on my own…
If anyone wants to know. Edit the FancyZoom.js file and on line 431, change the “visible” value to “invisible”
Great tip. By the way, your search and replace table is wrong. It’s search for onload=”onPageLoad();”> when it should be searching for onload=”onPageLoad();” same thing just without the “>” tag.
Also you people should know, that:
• 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.
• 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.
Thanks for the help. I might post a video tutorial on iWebUnlimited.com too.
Once finished and online you can hold the “Shift” key while you click on an image and it will go in slow motion just like in OS X. How cool is that!
I keep getting error messages while doing Search and Replace and adding Hitcounter (Google Analytics).
This is my site: http://allbertproductions.com – I checked the source and the find and replace seems to have worked, but the zoom effect is not working. I am using iWeb ‘08 and publishing to MobleMe. Any advice? Thanks for your time.
I also seem to have lost all my comments. Bummer.
Just a note: I re “Publish All”ed in the hope of of getting my comments back. No luck. ITweek is generally great. Don’t know why I’m having this problem.
Max,
Just wanted to let you know the Jason was right when he said:
“By the way, your search and replace table is wrong. It’s search for onload=”onPageLoad();”> when it should be searching for onload=”onPageLoad();” same thing just without the “>” tag.”
I got rid of it and it worked for me! I think this may be the solutions to a prior commenter named Piotr.
Take care and keep up the great work! Loving this iTweak!
a
Hi,
Earlier, IJASON posted “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.”
Can you please let me now how / where I do this? Is this done using ITWEAK?
I have a large number of photos on my site that I would like to apply this zoom function to…but also have captions visible on the zoomed picture.
Thanks very much
Todd
Hi,
Thanks for the program/tutorial works excellent, The only problem I have is that the Zoom function does not work on Blog Entry pages!
any idea why this is? instead of zooming out it opens the hyperlink in a new page. On other type of pages that I have tried it works as advertised!!
Thanks in advance for looking into this for me
Fred
Todd,
To add or replace the title to your images you can just use TextEdit. Open up your published .html file that has the fancyzoom stuff on it with TextEdit (whether it be on your hard drive or on your iDisk) and press command F to open up the find feature. Then type “title” in the search field, it will take you one at a time to your title and just enter a name you’d like. You’re looking for something like this-
<img src=”fancyzoom_files/mypicturename.jpg”
Only change what is in the title=”put your title here”
Hope that helps. I made a video tutorial on how to do this on iWebUnlimited.com if you’d like to take a look.
iJason
Hi Max,
Your tutorials are excellent, very helpfull for a novice (read absolute numbnut) like myself.
I wonder if you can help me out with setting up lightbox 2 in iWeb.
FancyZoom looks very nice and I got it to work but I’m missing the next/prev. in the zoomed picture, a feature lightbox 2 does have.
Now, I have no clue of where to place the files that come with lightbox2
Like I said earlier, I have no experience with building websites, let alone scripts, so your (or anyone elses) help would be greatly appreciated!!
TIA
Lenny
I love the zoom effect its ace. Just one thing, i cant understand why when i publish with itweak it removes my comments section from my blog. Is it possible to stop it doing that?
Thanks
Simon
Hi Max,
just tried to follow your directions. I’m a total newbie in iWeb. I assume I’ve followed the steps correctly. When I try to open it in Safari with ‘open file’ the zoomeffect doesn’t work. Do I have to upload it? I’m building my first (simple) site (6 pages). Everything else seems to work well when I open it in Safari or Firefox.
Thanks for responding,
PJ
Hi Max,
I figured is out, with help from iWebunlimited.com. I copied the fancy-zoom folder in the wrong root-folder…………..
I know now, it takes precission.
PJ
Table has been updated.
Hi Max
Does this work if you publish to mobile me server as I seem to be having problems getting it to work?
Many thanks, and keep up the great work,
Dan
Thanks for a great tutorial. I just want if it is possible to make a tutorial on how to imagezoom 2 or more images. I mean I want to be able to click on a single image but to have a 2 or more images inside a zoom lihe a Highslide JS gallary style. They also have a nice dim effect then whole page goes darker ( a solid with 70 percent transparency I suppose).
hi
thanks for the great tutorials.
i wanted to know after all this is done, how to publish it. see, when i open up the html file on my mac, the effect works perfect. now how do i get it to open up on the net? i publish to mobileme, maybe that can help you help me. im actually copying the file to my idisk now to see if that would make it work….we’ll see.
thanks!
Max, please help me out here…I followed these steps very carefully but could not find “FancyZoom.itwksr”. Am I being a *&%$ here or what?
Hi,
I’ve trying to put fancyzoom into the Blog page and at first I ran to the same problem as Fred. Meaning that I got my image in a new window instead of a zoom.
I figured out that the folder “fancy-zoom’ needs to be in the same folder as the page in your trying to use. In my case in the Blog folder.
Toze, Hi…
I am doing that, but cannot find the FancyZoom.itwksr file.
Is anyone else having a problem with finding FancyZoom.itwksr??
I was looking interestingly at the fancy zoom options but what i want is a mouse over on a thumbnail and the the larger version of this image to appear in a specific location on the page. Is this possible and any suggestions on how this would be achieved?
thanks in advance
Silas Tic
Thanks for the great tutorial…
It would be fine, if you add a tutorial, which is describing the use of FancyBox. Oder lightbox2
maybe you can explain how to integrate lightbox2
http://www.huddletogether.com/projects/lightbox2/
this lightbox looks cleaner and works better with the IE…
Thanks
Trying to set up the effect I’ve run into a snag. I get through all the way to open iTeak, look for the Search & Replace and Open Table buttons. Then you say to look for the previously downloaded file FancyZoom.itwksr. Nowhere is there such file. How can I get it? Please help. Been going around in circles and very frustrated.
Thanks,
Jorge
Duh! I found it! Didn’t realize the word “this” had to be clicked! Sorry about that.
Am I doing something wrong?? I have done this so carefully 10 times now on fresh new pages each time. I would so LOVE this to work. I am using iweb 09 on Macbook Pro OSX 10.5.6.
Your help would be greatly appreciated!
Thank you soo much for this. it helped immensely.
hello,
i have followed your tutorial and it works great. however the .png images i used that have transparent backgrounds always show as a white background on firefox (mac). on safari they properly show as transparent. do you have any idea why? i’m sure my pics are ok but i’m thinking there’s something in the css somewhere or maybe with fancy zoom i can’t figure it out. any help is appreciated thanks!
rick
After downloading the software and following your tutorial my mac is completely messed up. I can’t drag anything anymore. And some programs (like photoshop) won’t open. Any idea?
worked perfectly for me except i had to manually copy the itwksr file coz it dint do it automatically.. truly enjoying it!
Thanks for the tutorial, the only problem is that it’s fine doing this for one/a few images, but i need to do this for thousands of images! I think they’ll be fine without the effect!
It just doesn’t work. I followed every step carefully but no luck. I use iWeb 09.
It works now. I retyped the following
onload=”onPageLoad(); setupZoom();”
in the search/replace in iTeak and now it’s all good. i guess I mistyped before.
———————-
Is it possible to change the speed of the zoom box to appear? It seems a little slow right now.
Where is the FancyZoom.itwksr file ?
Help! I can’t figure out what I am doing wrong. I have enabled the hyperlink of the image on the homepage in iweb, published the site to a folder on the desktop. The step (7) asks to choose the destination folder in itweak says to choose my publised iweb site. When I choose the published folder on my desktop, then click “choose publised website” in the bottom left hand corner, it pulls up the drop down menu again, and I don’t get anywhere. This is true if I choose the whole folder, or just the home files folder where the logo I want to enlarge is located. So basically I am stuck, and I know I am almost there. Any ideas?
or do I somehow need to get to the actual published site that is hosted on Godaddy.com?
Can you give a tutorial on how to do it with FancyBox?
i can make it work, almost
the picture opens in a new browser window, instead of just appear in a bigger size over the main page… anyone knows what to do?
I have the same problem as Kat…. i have done it very slowly step by step i can’t see where the problem is
Help Please?!
I tried as well like Kat and Alice, but it doesn’t seem to work.
nor with Fancybox or FancyZoom.
can anyone help out here, please ?
Im having the same issue as Kat and Alice – I have tried to get this work at least 50 different ways from several different websites and help sites. I have a hyperlinked image and a non hyperlinked image. Neither work. I have used TextEdit, Coda and iTweak. I’ve tried instructions from several different places. Nothing. My hyperlinked image just opens in a new window and my plain image just sits there.
HELP!