Video Tutorial-FancyZoom in iWeb

58
1236

FancyZoom in iWeb, huh? What’s that. Well there are a many websites these days that have that popular image zoom effect so that when you click on the image it animates the photo larger. Well many have asked, how can I do that with iWeb? Well here it is, this is the tutorial to show you just how to do that. Keep in mind this one is a bit more complex, but it can be done without getting your hands to dirty in code.

58 comments

  1. SONNY MARCYAN 7 March, 2010 at 14:12 Reply

    LOVE YOUR TUTORIALS BUT I AM NOT CLEAR WHERE OR HOW YOU STORE THE IMAGES. DO YOU PUT THEM IN IDISK WEB FOLDER? CAN YOU LEAVE THEM IPHOTO? IF YOU MOVE IMAGE FOLDER DO YOU LOSE THE LINK? PLEASE INCLUDE THESE INSTRUCTIONS FOR A BEGINNER SUCH AS MYSELF.

    THANK YOU,

    SONNY

    • iWebUnlimited 15 April, 2010 at 09:49 Reply

      Sonny, the images are stored by linking your dragged thumbnail to the actual high res photo. By doing this iWeb will add it to your site directly. As you see in the video above all I do is drag a photo onto my iWeb page, then link it to the same photo itself (one that is about 600px wide or so), upon publishing the site iWeb will grab the images that we linked to and put them in the site folder automatically. So you don’t need to store them elsewhere. Hopefully that makes sense.

  2. SONNY MARCYAN 7 March, 2010 at 17:02 Reply

    DEAR JASON

    I AM MISSING SOMETHING. I HAVE FOLLOWED EVERYTHING CAREFULLY BUT IS NOT LINKING TO IMAGE. THIS IS THE ONLY INFO LEFT OUT OF THE TUTORIAL. HOW TO MANAGE IMAGES. I COULDN’T SEE WHERE YOU STORED YOUR IMAGES. PLEAE HELP, I AM SO CLOSE.

    SONNY

  3. Luke 10 March, 2010 at 19:21 Reply

    Sonny,

    It doesn’t matter where you store the images. iWeb will automatically copy them and place them in the right folder for you. As long as you point iWeb to where they are on your hard drive, it will take care of the rest.

  4. John 22 March, 2010 at 12:30 Reply

    Ok, I followed the steps, found and replaced the HTML content, set up the respective hyperlink and published the content.

    Live on the web, I click my link – the photo opens a new web page. I was hoping for the same response I saw on your tutorial. What step did I leave out?

    Thanks for the videos, They give me a chance to learn and explore the HTML side of my iWeb program.

  5. Deborah 13 April, 2010 at 13:21 Reply

    I’m wondering if the fancy zoom will also work with video formats, and whether that requires other HTML adjustments. Thanks. This site rocks.

    • iWebUnlimited 15 April, 2010 at 09:52 Reply

      Deborah, sorry FancyZoom is only setup to work with images at this time. But if you’d like to have video with this type of a look, check out my other posts, Shadowbox and Highslide.

  6. Desiree 27 April, 2010 at 18:22 Reply

    Hello,

    I have followed every step and have successfully been able to apply “fancyzoom” to my art page. I did notice though, that the Fancyzoom file autodeletes or removes itself from my MobileMe’s webpage folder… Why is this? I don’t have any viruses, the folder is pasted, the codes are well adjested…. The fancyzoom folder just dissapears! What’s going on?!

    • iWebUnlimited 29 April, 2010 at 09:57 Reply

      When you republish with iWeb it replaces the old items many times with the new items (depending on what you updated). So depending on how and what you updated you may have to reupload the fancyzoom folder to your iDisk server.

  7. Alex 8 May, 2010 at 14:11 Reply

    Hi,
    Firstly, your site rocks! Secondly, my fancyzoom opens to a new page. I noticed a few other people had the same issue but I wasn’t ablt to find a response for the problem. Does anyone have any thoughts?

  8. Alex 25 May, 2010 at 13:12 Reply

    Hi Jason,
    I have a site with multiple pages and each one has photos. If I re-publish one of the pages the fancyzoom folder erases and I have to re-do everything again. Is there a way around this?

    Cheers and thanks!
    Alex

    • iJason 17 July, 2010 at 09:58 Reply

      Sorry Ales, you do have to redo this each time. I sometimes will create a whole separate site just for the page I I want to have this effect on, then when you update your full regular site this page is untouched.

    • iJason 17 July, 2010 at 09:59 Reply

      No, you can do this with any server. Use the same instructions but with your own server. Pretend that the “Web” folder I’m using in this tutorial is your servers root level (sometimes servers root level is marked at public_html, or html_files, or just the first level when you connect).

  9. RT 29 June, 2010 at 14:23 Reply

    Hi, I really need HELP on this, I have try to working on the steps many many time, but still can not Facyzoom.

    I have download the zip file and drag into the website folder folder, and the mainly problem is, I was try to replace the code in you website to my html file, Only the Flie 1 can be Find and replace, and teh File 2 can not be find and replace, please help me on this, Many Thanks

    Hope to have to reply from e-mail soon.

    THANK YOU VERY VERY MUCH

    • iJason 17 July, 2010 at 10:00 Reply

      RT, put your page that’s not working online with a link to it and then I or someone can take a look at your code and see what the problem is.

  10. Paul 21 July, 2010 at 12:31 Reply

    I have the same issue as Desiree – as i update my website, the fancyzoom folder is deleted. Any ideas? I’m using iweb and idisk

  11. avery 28 July, 2010 at 11:46 Reply

    i have had no success with this, though the video tutorial was excellent, very clear! i do notice that the fancy zoom tutorial in your TIPS BLOG on your site is from 2008 —- does the downloaded zipped folder there support iweb 09? from your video tutorial i see when you go to your site the TIPS BLOG for fancy zoom looks different than the one i am seeing on your site now. [in fact the date for the tutorial is 2008, whereas your video tutorial is 2010] the location and appearance of the zipped folder looked very different in the video compared to what i am seeing — furthermore in the video you refer to 2 folders in the downloaded folder — the single folder i just downloaded from your tutorial has all the fancy zoom files directly in it [there are not 2 sub folders]. something leads me to believe thatt i am downloading an older version —- please advise. i’d love to get this to work!

    • avery 28 July, 2010 at 18:59 Reply

      jason, sorry —- ignore the part where i indicate that you said there are 2 folders in the zipped folder — i confused that with a suggestion from the author of fancy zoom in a comment on the apple forum — it has something to do with placing the fancy zoom folder outside of the actual website [on mobile me] in order for iweb not to erase it each time the site is updated in iWeb. that didnt work for me either.

  12. Victor 12 September, 2010 at 03:43 Reply

    Hi there, thanks for all your work.

    I would like not to see any names/titles under my photos, is there an option as well?

    Cheers,
    Vic

  13. Herby 28 September, 2010 at 09:17 Reply

    Hello,
    Fancyzoom works fine, however, it does not open in separate window! It uses the present window and I can only go back to my site when hitting the return bottom of my browser! How can this be corrected?
    Regards
    Herby

    • tania 10 October, 2010 at 17:47 Reply

      I am having this same issue- in your tutorial it opens in a great new pop up with the little x close here thing- I get none of this but instead ina new window- how can i fix this

  14. Paul 9 December, 2010 at 12:31 Reply

    Is there any way to control the size of the zoom? I have it working, but at this point there is no actual zoom—the image does pop out with the “x” in the upper lefthand corner, but it’s the same size as the image already on the page (a thumbnail will not enlarge, it only pops out as a thumbnail still).

    Any thoughts on what I can do about that?

    Thanks much!

  15. thomas 17 December, 2010 at 07:37 Reply

    Hey it worked for me! Kinda can’t believe it.
    I was thinking I might give-up if this doesn’t work either.
    I tried on other illustration sites and it doesn’t work! So you rock!

    I don’t know why others have problem.
    I might tried couple of your other tutorial as well.
    I think your illustration is really basic, especially folder to folder!(important)
    Anyway great stuff!

  16. Nick 17 December, 2010 at 14:34 Reply

    Thanks so much for your tutorial, great work.
    I am interested to know how you work with this script when posting to your own server. I have tried fiddling with the SRC portion of the code with no luck. Any suggestions? Is where a particular location URL I should be using, i.e. not creating my own.
    Thanks for the hot tip on CODA as well, great little tool that.

    Much thanks, N

Leave a reply

Recommended

Facebook
Twitter
YouTube