8 Replies Latest reply: Mar 25, 2010 5:08 PM by Cyclosaurus
arnepulle Level 1 (0 points)
Good Morning..

Firstly, let me say I'm now super confused about the subject! So I apologize if the question appears mundane...

I've built a website using iWeb (Version 2.0.4) Really like its intuitiveness and flexibility however.... I am trying to enlarge (as opposed to overlay) an image on the same page. For example, I have 4 thumbnail size photos. I want to be able to click on one of them and it will enlarge to whatever size I want it to be (700 x 400) THe thumbnail is on the top right of the screen, the enlarged image would be in the middle.

I have read ALOT on this (including a few threads here). And perhaps its me not being terribly good with code (ie: have just started) but I can't make it work.

I understand there are two ways of doing it (external URL link and coding) and that it is better to use a larger image and shrink it rather than the other way around but the mechanics of the enlarging (or shrinking) is beyond me.

My question is this: is this even possible in iWeb? I've seen alot of "overlay" type images but only a few enlarged shots. Anyone have any ideas?

Mac Book Pro, Mac OS X (10.6.2), 160GB, 2.4GHz Intel 2 Duo
  • Roddy Level 6 (17,265 points)
    You can use mouse over to enlarge like at the bottom of this page...

    http://roddymckay.com/PhotoSatellite/MouseOverImages.html

    .... or consider one of the flash slideshows using FAExport.....

    http://roddymckay.com/VisualMedia/FlashAlbumExporter.html

    .... or use one the many LightBox type of deals....

    http://www.iwebformusicians.com/PromoPage/VisualLightBox.html

    "I may receive some form of compensation, financial or otherwise, from my recommendation or link."
  • arnepulle Level 1 (0 points)
    Thanks! Definitely helpful but having just played around with it for a few hours, I'm still alittle lost.

    The mouseover image at the bottom of your first page (http://roddymckay.com/
    PhotoSatellite/MouseOverImages.html) is exactly (even down to size) what I am after (ie: a bunch of thumbnails that enlarge when the mouse rolls over it: assuming off course you can put thumbnails next to each other horizontally). I kind of lost you on the create two images thing: where did you put your "Rollover" folder?

    The problem I have with the HTMLBasix site is whilst the code is good, it does not allow much in the way of editing (ie: the border around the photo). Also, editing the size of the 'enlarged photo' is challenging (to say the least) in iWeb? Or maybe I've got that wrong too.

    I also assume you say when you "post to server" you posted the image on something like Flickr? I only posted ONE image (ie: the I want on my website) and not an enlarged version..

    Pardon the silliness of some of these questions.
  • Roddy Level 6 (17,265 points)
    Both the thumbnail and the enlarged image are uploaded in the folder which goes into the root folder on your server or, if using MobileMe, to Finder/Go/iDisk/My iDisk/Web/Sites.

    The URL to any image is.....

    http://www.websitename.com/FolderName/ImageName.jpg

    .... or with MobileMe.....

    http://web.me.com/username/FolderName/ImageName.jpg
  • Old Toad Level 10 (135,388 points)
    Maybe the rollover examples here will help: Mouse Rollover & Animated Gifs. The second image can be larger than the first as in Roddy's example. The second file should be placed on the same server as your site and linked to there. Mine are placed on my iDisk since I have a MobileMe account.

    These fancyzoom examples offer a slightly different result: Fancy Zoom & Image Popup.

    Both examples show both the code and links used.

  • Cyclosaurus Level 6 (12,915 points)
    The mouseover image at the bottom of your first page ... is exactly (even down to size) what I am after (ie: a bunch of thumbnails that enlarge when the mouse rolls over it: assuming off course you can put thumbnails next to each other horizontally). I kind of lost you on the create two images thing: where did you put your "Rollover" folder?


    have you wondered why there is a lot of dead space in that area?

    ------------------
    there are a lot of good pop up method, including OT FancyZoom...
    which won't work in iweb photos page template.

    ----------------
    here is my FancyZoom:
    http://www.cyclosaurus.com/iWeb3Widgets/FancyZoom/PhotosPage.html

    it'll work with iweb photos page and non photos page alike.
    but....

    Message was edited by: Cyclosaurus
  • arnepulle Level 1 (0 points)
    Very fair point Cyclosaurus..

    ..in my iWeb page that I've built, my thumbnails and the enlarged frame are permanent (ie: similar to what say popphoto.com as on the website: three permanent thumbnails, a permanent enlarged box to their left).

    I've managed to get the code working but obviously the box disappears when you click to reduce the thumbnail in size again. Which is not what I'm after (your Fancy-zoom is the same: click on image to enlarge it and then it reduces in size again with another click).

    My question then is this: using Fancy-zoom, assuming your three images where all the same dimension - and in my case they are - how do you keep the enlarged version 'up'? And then if you click on your second version (the girl with with swimsuit) the enlarged photo appears in the same location as your first image?
  • Wyodor Level 6 (19,730 points)
    Here's my way of adding FancyZoom to iWeb:

    [Adding FancyZoom to iWeb without the hassle|http://www.wyodor.net/blog/archives/2010/03/entry_308.html]

    Here's the result : [FancyZoom in iWeb|http://www.wyodor.net/_Demo/Fancy/Fancy2.html]
  • Cyclosaurus Level 6 (12,915 points)
    My question then is this: using Fancy-zoom, assuming your three images where all the same dimension - and in my case they are - how do you keep the enlarged version 'up'? And then if you click on your second version (the girl with with swimsuit) the enlarged photo appears in the same location as your first image?


    you describe exactly how iweb photos page template works.
    so why don't you give it a shot? instead of trying all these work-around that you have little to no controls.
    you can go straight to photos page's detail view with my javascript snippet here:
    http://discussions.apple.com/message.jspa?messageID=6272619#6272619

    with it, your viewers don't have to see photos page's thumbnails view.