Video Tutorial-FancyZoom in iWeb
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.
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
Why are you screaming with your big letters!!!!!!!
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.
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
screaming man… your website has broken links..
Leo, which links did you find that were broken? Let me know and I’ll fix them.
See my comments on your other post.
hi thank you for your tips, I do have one question, I am NOT getting a new window when you click on the image and the original content is being taken over, how do i get that cool little pop up window that you have?
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.
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.
I’m wondering if the fancy zoom will also work with video formats, and whether that requires other HTML adjustments. Thanks. This site rocks.
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.
Thank you, Jason! The zoom in/out scripting worked perfectly first time! You’re brilliant!
Thanks Graham, I love to hear good feeback like that.
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?!
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.
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?
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
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.
so does this only work with a mobile me account to get into the iDisk?
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).
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
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.
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
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!
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.
Where did you get that picture frame? That one didn’t come with my iweb 09.
Thaaankssss!!! you are being so helpful!!!! Regards from Madrid, Spain
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
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
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
Worked perfectly well for me. Thanks for the tutorial.
Tutorial video won’t play. Tried on several different computers. Help.
Great Tutorial, but where is the zip file located now?
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!
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!
btw i hope there will be a lightbox tutorial as well! or is it the same method?
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
OK, I figured it out! I was over thinking the HREF and where it needed to direct the zoom image. Looking good now.
I even played with making the image much larger. No sweat for professional web developers, but I am quite proud of myself.
Thanks again. Time to donate. Good to see your work on YouTube as well.
The BETA site I am working on:
http://www.lateafternoon.com/annbaker/project_imagezoom.html