Enlarge photo when clicking on it

Andrew ~ If you don't mind uploading each picture to imageno.com, and you like the result of clicking on this thumbnail:



...then use Imageno's "HTML code for webpages" in iWeb's HTML Snippet widget.

Or there's a FancyZoom tutorial here:

http://web.me.com/toad.hall/Demo_2/FancyZoom.html

More may be found by doing THIS.

Is this just one photos you're referring to or a bunch? If it's just one then try the method shown on this demo page: Opening Item in a New, Precisely Sized Window. The same method without the button is at the bottom.

Happy Holidays

Then you might want to create a MobileMe Gallery thru iPhoto which can be updated frequently by adding and removing photos from it and then you can embed the gallery in a web page like on this demo page: MobileMe Galleries and Quicktime Movies. You can select any of the modes of the gallery to start with, grid, mosaic or carousal.

You wouldn't need iWeb to make the changes, just go thru iPhoto.

AndrewD wrote:
I was hoping for a simple "cut and paste" option (e.g into the HTML Snippet box) that didn't require anything more.

Andrew ~ Here's some basic HTML (perhaps not up to current standards!) that could be pasted into the HTML Snippet box:

<a href="MYPICTURE" target="_blank"><img src="MYPICTURE" title=" Will open in new window " width="150"></a>

Here's an example with "MYPICTURE" replaced by the path to the image — click on the thumbnail:



...That uses only the original image — so the thumbnail (produced by the width="150") will load the original (large) image even if it's not clicked.

To avoid that you could create a real thumbnail from the original image and use that as the second path in the HTML and remove the width="150". Then the original (large) image is only loaded if the small thumbnail is clicked.

AndrewD wrote:
1. In order for the code to work, do I need to resize my small photos so that they appear at 150 pixels?

Andrew ~ No. As I wrote: "That uses only the original image". The width="150" only shrinks the appearance of the large image, not its actual image or file size. ...If you don't mind large photos being loaded and appearing as thumbnails before they're clicked, you don't need small photos.

AndrewD wrote:
2. I want people to have to click on the small photo to make it larger. The small photos are not a standard width and height at the moment. Do they need to be?

No. Since you already have small versions of your photos, use the HTML I hinted at in the last paragraph of my previous reply:

<a href="MYPICTURE_LARGEVERSION" target="_blank"><img src="MYPICTURE_SMALLVERSION" title=" Will open in new window "></a>

AndrewD wrote:
3. Do I have to paste the code in the HTML Snippet box just once? Or on every page on which there are photos I want to have this effect on?

You have to paste the code into the HTML Snippet box for every photo.

AndrewD wrote:
4. I don't know where my site folder is, so I hope this is not necessary. In case it is important to know, I am going through another host, not MobileMe.

Presuming your site has been published, right click/control click an image on your site and choose "Open Image in New Tab". In the browser's address bar you'll see the image's path/URL that you would copy & paste over MYPICTURE in that HTML I gave. Click on the thumbnail in my previous post and look at the URL in the browser's address bar — that's what I copied & pasted over MYPICTURE in that HTML I gave to produce that clickable thumbnail.

In the end, you'll understand better by experimenting yourself. Or consider using an alternative to iWeb such as weebly.com. They offer a nice photo gallery set up via simple drag & drop, and their "square images" option displays all the photos square so they're always in a perfect grid. Click on the photos in this article:

_Weebly Photo Galleries_