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:

• FancyBox
• LightBox
• FancyZoom

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.

1. 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 .jpeg or .png. For more details, see the FancyZoom post by Cabel.

   

2. Now publish your iWeb site to your default location.
3. Now go ahead and take a look at the downloaded FancyZoom folder. Inside there you should find two further folders. One is named images-zoom and the other js-global. Open up the images-zoom folder. 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 folder js-global two directories higher. You can now trash the images-zoom folder.

   

4. Rename the folder js-global to fancy-zoom.
5. Now we have to do some nasty little code editing. What you have to do is open up the file FancyZoom.js and edit line 44 from this:

   var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images

   to this:

   var zoomImagesURI = 'fancy-zoom/'; // Location of the zoom and shadow images

   Alternatively you can just download the edited file and replace it with the original one.

6. 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.”

7. 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.

8. 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.
9. 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.