Wyodor On The Web

iWeb : Adding FancyZoom to iWeb without the hassle

I updated to FancyZoom 1.1 : http://www.cabel.name/2008/02/fancyzoom-10.html

First, put the FancyZoom folder in the root of the server.

Then paste this code in the HTML Snippet :

<script language="JavaScript" type="text/javascript">
<!--

var bodyLoad = parent.document.getElementsByTagName("body")[0];
load = bodyLoad.getAttribute("onLoad");
bodyLoad.setAttribute("onLoad", load + "setupZoom();");

var headID = parent.document.getElementsByTagName("head")[0];
var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/FancyZoom/js-global/FancyZoom.js';
headID.appendChild(newScript);

var headID = parent.document.getElementsByTagName("head")[0];
var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/FancyZoom/js-global/FancyZoomHTML.js';
headID.appendChild(newScript);

// -->
</script>

Here's the widget file. Look at the source :

http://www.wyodor.net/_Demo/Fancy//Fancy2_files/widget1_markup.html

The FancyZoom 1.1 code uses this variable in the js-global/FancyZoom.js file to find its own images :

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

The slash before images indicates it uses a relative to root link. To make it work with the FancyZoom folder add /FancyZoom before /images.

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

This way it will not work on MobileMe when you use web.me.com/Username. Only when you have Personal Domain enabled. To use it with your MobileMe username, change it to :

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

Change it also in my script above.

Adding titles to the FancyZoom images

Here are to 2 JavaScripts that add the caption (title) to the FancyZoom picture.

http://www.wyodor.net/FancyZoom/myPictures.js

http://www.wyodor.net/FancyZoom/setTitle.js

The myPictures.js file contains the filenames of the images you place on the iWeb page + the descriptions you give them. You have to compile that list yourself.

Note : The filenames of the pictures on the iWeb page and the pictures you link to should only have characters a-z, A-Z, 0-9 and _ (underscore).

The setTitle.js file loops thru the links on the page until it finds a link with your image.

It then loops thru the list of names in myPictures.js to find a match and gives the title of the link the description you gave it.

Note : the // at the begining of a line is a comment. Remove it to test the steps.

FancyZoom uses that title as the caption under the zoomed image.

The script only finds links to images with the extension .jpg. If you want, you can leave out the test.

If you leave out an imagename + discription for an image that fit the seach a default caption ("Foto" + sequence number) will be given.

You can change "foto" to something else.

Store both files in the FancyZoom folder.

If you have more than one page with images you have to duplicate the myPictures.js file, give it a unique name and use that file.

You have to paste two lines after the Javascript I published earlier :

<script language="JavaScript" type="text/javascript">
<!--
other javascript
// -->
</script>

<script src="/FancyZoom/myPictures.js" type="text/javascript"></script>
<script src="/FancyZoom/setTitle.js" type="text/javascript"></script>

Admire the result : http://www.wyodor.net/_Demo/Fancy/Fancy2.html