Fancy-zoom

I have applied some fancy-zoom popups on my web site. As a test, for now. Works great and looks great. However, I should apply these popups to all pages, but won't until I know one thing for sure.
Will I have to add the fancy-zoom tags to the page.html file with every alteration and publication to MobileMe?

Here's a solution to add FancyZoom to an iWeb page without the hassle of editing the iWeb files after publishing.
First the page : http://www.wyodor.net/_Demo/Fancy/Fancy.html
Click the link on the page to open the widget-markup file and look at the source. This is the code you paste in the HTML Snippet :
var headID = parent.document.getElementsByTagName("head")[0];
var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'fancy-zoom/FancyZoom.js';
headID.appendChild(newScript);
var headID = parent.document.getElementsByTagName("head")[0];
var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'fancy-zoom/FancyZoomHTML.js';
headID.appendChild(newScript);
setTimeout('window.parent.setupZoom()',500);
The timeout is needed to allow the browser to set up everything. Too short a time and the setup will fail. It will fail too, when a visitor can't wait to click the image to zoom.
The setupZoom() is usually added in the <body> element in the onLoad() JavaScript function.
It is assumed that the fancy-zoom folder is INSIDE the Sitename folder.
Personally I would keep non-iWeb files outside the Sites folder. When you do a complete re-publish, iWeb will delete everything in the Sites folder and you have to start over again.
Besides that, if you have more than one Site, you need only one fancy-zoom folder.
If you keep the fancy-zoom folder outside the Sitename folder you have to edit the FancyZoom.js file.
Open the file in a plaintext editor and find :
var zoomImagesURI='fancy-zoom/'
Change it to :
var zoomImagesURI='../fancy-zoom/'
That should work.
Edit : The Sitename folder is the name of your iWeb site. NOT the iDisk>Web>Sites folder
Message was edited by: Wyodor

Similar Messages

  • Fancy zoom pics with transparent background

    hello,
    i have successfully setup fancy zoom in my iweb site (based on the various tutorials found on the web), but there is one problem i'm having. the pics i'm using are .png with transparent background and the background renders properly in safari. however in firefox the background always shows as white. i have double checked my pics and i believe they are fine and again in safari the background renders transparent, but i can't figure out what's causing the background to show white in firefox? i'm guessing it's something in the css maybe but i'm not sure. any ideas at all? i have noticed some people posting in the forum regarding fancy zoom so hopefully someone know... note: the zooming part is working fine in either browser...
    thanks,
    rick

    I love you!!!
    Well, you know what I mean.
    It worked, thank you, thank you, thank you.
    I figured it was a simple solution, and it was. Thanks Varkgirl.

  • Pop-up text

    I have a question that should be simple to answer I think.
    I'm trying to edit the text in a pop-up. I can edit the
    popup by going to library and edit, however I can't get to the text
    to edit it. I know there is text because when i test the movie I
    see it when I click on the links.
    Also is there a way i can put up my page so it makes it
    easier to explain my problem on here?

    You need to make sure you have the fancy-zoom folder inside your website folder and that you edit the page's html file to make those changes that the tutorial describes. Any time you republish the page you have to reedit the page's html file to add those changes back. The changes are:
    1 -
    Find: </head>
    *+Replace with+*: <script src="fancy-zoom/FancyZoom.js" type="text/javascript"></script><script src="fancy-zoom/FancyZoomHTML.js" type="text/javascript"></script></head>
    2 -
    Find: onload="onPageLoad();"
    *+Replace with+*: onload="onPageLoad(); setupZoom();"
    If you use the free TextWrangler to edit the page the first Find and Replace (which can be saved for easy use next time) can be done with the Grep box checked.
    The second Find and Replace should be done with the Grep box unchecked.
    Click to view full size
    You can use Text Wrangler to edit the page on your iDisk. But it has to be the real iDisk and not the copy on your HD if you have that feature activated. Also if you publish the entire site for any reason you will have to add the fancy-zoom folder to the website's folder on the iDisk again. So keep a copy of that folder handy.

  • Want user to click on pic from my Web page and for it to enlarge in awindow

    I've uploaded my pic from iPhoto and placed in on my page in iWeb. I want the user to be able to click on the pic on my web page and for the page to "enlarge" so the user can see it better. Possibly in a new window.
    Is this possible in iWeb?

    There are a couple of ways. See my demo pages Fancy Zoom and Opening Item in New Specially Sized Window. Both will do what you want. The code uses is also described.
    OT

  • Links within pages in iWeb

    Maybe I'm missing something obvious, but I can't figure out how to create hyperlinks within a page in iWeb. Specifically, I'm trying to write a FAQ, and want to link individual questions listed at the top of the page with their answers further down in the page. Help???

    Those are called anchors and not supported by iWeb. Put in a feature request to Apple via http://www.apple.com/feedback/iweb.html.
    It can be done with HTML snippets and javascript as Cyclosaurus mentions here: http://widgets.cyclosaurus.com/Anchors/Anchorsfiles/widget0markup.html. But one must be proficient with javascript.
    There's a crude workaround with snippets that Peter Berglund describes in his blog: http://web.me.com/petber/iWebtips/iWeb_Tips/Entries/2009/2/22_How_to_use_Anchors_iniWeb.html. This Contents page uses that method for some of it's links - those that are green.
    Alternate solutions are with using rollovers like shown in this demo page: Show and Hide Text or using Fancy Zoom shown in the right hand example in this page: FancyZoom You could replace the photo with an image that says Click for Answer" or whatever and have the answer in a jpg file. Both are somewhat low tech solutions.
    OT

  • The cool little features in iWeb templates

    Hi all,
    I was just wondering how to get the cool little add-ons that the iWeb templates have on my site?
    For example, iWeb has scissors on one of the sites. Their are also others like.. doodles, post its, "hello, my name is" I know I can simply cut and paste, but I'm looking for additional add ons. is there a stock pile of these somewhere on the web or maybe on my mac?

    You can add scrolling banner text, blinking text, mouse rollover, Fancy Zoom, Show and Hide text and many other enhancements.
    OT

  • How to show full size images from a thumbnail view?

    Hi,
    I am trying to setup a simple portfolio of projects. I have a series of 4 screen dumps of some web work I did, and they have to be greatly reduced in size so they can all fit on one page. I'd like to be able to have the user click on any of the 4 screen shots (imported png files) and then see a full size image. I know how to do this basically in plain html, but uncertain how to set this up with iWeb. Do I need to create 4 new pages with the full size images on them? Or is there an easier way.
    thx
    'mark

    mark:
    The method described on this demo page is one way you can accomplish what you want: Opening Item in a New, Precisely Sized Window.
    Another method can be seen here: Fancy Zoom.
    There are a number of flash based slideshows that might do what you want. Check out these:
    Jalbum
    SimpleViewer and Flash Album Exporter
    Mouse Over
    OT

  • After editing, photos now look blurry

    The photos out of my digital SLR camera were really crisp right after upload to iPhoto; but after straightening and using the editing tools while in full screen mode, the photos now look a little blurry. Any ideas?

    Hi all,
    I've noticed the same problem.
    But clearly this blur does not affect the picture files as they are saved on your disk. It's probably just a question of optimized display when looking at pictures in iPhoto.
    Take a crisp image, import it into iPhoto. Now simply crop it a bit (you don't even need to rotate it !). When looking at it in full screen, it will now look much softer than the original one, you can check this by pressing the shift key. But now press "1" to see it at 100% : your image is not blurred, it's just badly displayed !
    Same problem when simply opening an image in Preview.app -- since leopard there are some fancy zoom animations, but images look indeed very soft at everything but 100%
    Hope they will fix this soon, It's frustrating to look at softened images from a marvelous camera ...
    Malte

  • Getting images to enlarge in iweb

    I'm obviously a novice here, but when I import my iphoto images to iweb pages, how can I get them to enlarge from thumbnails. Please explain simply as I am really just learning. Also, is there any way to change the background colors of headers in different templates?
    thank you!

    Welcome to the Apple Discussions. There are several ways to do what you want.
    1 - put the photos into a photo page in iWeb and when you double click on a thumbnail the image will open in a larger widow.
    2 - use Fancy Zoom as on this demo page: Fancy Zoom
    3 - use an HTML widget to open an item in a new user size specified window without a button
    OT

  • Droplet for text snippet?

    Hi,
    I have a handy little shell-script, that I want to share with my users. But I would need to create some sort of GUI for it first.
    The easiest way would be a "text droplet".
    I would want to mark a text in Safari, and drag-and-drop it to the Dock-Icon of my Application. The Application could be a small Applescript or something, that just forwards the dropped snippet to the shell script.
    Is this possible?
    How?
    The regular Droplet only works for files, not snippets.
    Any hints for me?
    Thank you very much.
    macServo

    Here are a couple of popups that might work for you:
    Fancy Zoom & Image Popup.
    Mouse Rollover
    OT

  • Opening one of my pages in a new window.

    Hi there, i'm trying to create link that opens a larger version of an image in a new window. So far i've created a hyperlink from the original (small) image to a larger version of the same image on a new page but it doesn't look like i can get that new page to open in a new window. Is there anyway to make this happen? Thanks in advance.

    Toby:
    This is what Alancito is referring to:
    Click to view full size
    Or you can use one of these methods:
    Opening Item in a New, Precisely Sized Window
    Fancy Zoom
    OT
    Message was edited by: Old Toad

  • IWeb print or download

    I am trying to put forms on my IWeb so that clients may print or download them in order to fill them out. Also how do I make the Home, Photo, etc. buttons active to go from page to page in the website. I have before and after photos that I am trying to find out how you are able to click on them to make them larger for clients to view them in a larger format. I have not yet published and want to get this all set before I go public. I have watched the tutorials but it does not get into the explanation of these questions.
    Maybe someone can get me going on the right track.
    Thanks
    Kenia

    Hello Kenia
    Forms to download: You can create a form as a .doc or .pdf in a word-processing program. Save it anywhere on your computer. (make sure it includes emailing or mailing contact info to return it to you).
    In iWeb, create a text box, such as 'xyz form' then
    1. select the box and in the Inspector, Hyperlink tab, enable it as a hyperlink and choose what to link to: +a file+ , then you'll be shown a window to browse your computer for the form to link to. When iWeb publishes the pages, it will also publish the associated file to that page's files-folder in the site (so you don't have to move it there yourself).
    2. select the text in the same textbox, and make it a link too. Then you can also format this text to rollover colours, etc.
    When visitors click the link, the file will open on another page which they can then print. You might add the note for visitors to 'right click' or 'command click' the link to automatically download the file
    An example of ours is here
    http://stjamesanglicanchurch.ca/Miscellanea.html
    Click on the 'Order of the Shell' link to see it work
    Photos: if it's just a single small photo on the page that you want to connect to a larger view: let's call this Sample Page':
    Make an additional blank page and place the large view on it. (title it eg View A large)
    In Inspector, turn off the 'include in navigation menu' option (or you'll over fill that navbar with all these extra pages), (you could also not include a menu on this page).
    Go back to 'Sample Page'
    Select the small photo and in Inspector, Hyperlink tab, enable as hyperlink and this time, link it to *+one of my pages+* and choose the page with the larger view on it. That will take visitors to the larger image
    On the large view's page you should also add a text box 'return to sample page' and make it a link back.
    On the sample page, you could have as many small photos as you want, making them all links, (and not clutter up your navigation menu)
    Our site has a page like this:
    http://stjamesanglicanchurch.ca/StainedGlassWindows.html
    There's also another option : fancy zoom (i've seen it mentioned here)
    a tutorial is here http://web.mac.com/ijasonwhite/iwebunlimited/VideoTutorials/Entries/2008/10/7_Fancy_Zoom_iniWeb.html
    Hope this has been helpful
    Elizabeth

  • How to get bigger versions of double-clicked photos?

    double-clicking a photo opens an image which is not exactly big.
    Is there any way to make them open bigger than they currently open up ?
    Thanks!

    Well, Snappir, there are a few ways to try this:
    there's *'fancy zoom'* and 'rollover'. If you search the forum here you'll find the threads that discuss these methods.
    You could also create a blank page, put the large version of your photo on it. (Don't let this page show in the navigation menu, but title it anyway).
    Then, back on the page with the small images, select your photo and in the Inspector, Hyperlink tab: enable this photo as a hyperlink and link it to 'one of my pages' and select the large photo page you just created. It's a good idea to create a text box 'back to photos' and link it back to the original photo page.
    Note: this *+doesn't work+* if you've put your original photos onto an iWeb +photo page+, only if you've added them as separate elements to your first page. You could see my example here:
    http://www.stjamesanglicanchurch.ca/StainedGlassWindows.html
    Just one suggestion
    Elizabeth

  • Hyperlinks go blurry after publishing??!!

    Help me please. I've just designed a quick site for my girlfriend on iWeb.
    She's an illustrator so it needs to look simplistic/arty.
    I'm really happy with the design (considering I only learnt iWeb yesterday) and I've even added the lytebox fancy zoom feature...BUT...
    It seems when i publish the site all the hyperlinks (text and picture files) go blurry and lose definition.
    I've published it on both mobile me to my iDisk and by FTP to her mochahost account. Still no success.
    Any suggestions guys?
    Cheers...
    check out the site if you want to see what's happening.
    www.rainbowcade.com

    Hi Jess,
    I would recommend that you delete the existing buttons and
    create new ones. I have seen many instances where buttons (as well
    as click boxes) don't work as expected, in fact I was working on a
    Captivate 3 project yesterday where a click box just wouldn't
    pause. If creating new buttons doesn't fix this issue, then create
    a new blank project, copy all your slides from the original project
    and paste these into your new project file.
    Best - Mark

  • 08-09 html issues?

    So I am not real saavy at this stuff yet so please be patient with me...
    built a website which has picture pages (pictures only, no snippets) and a music player (using html snippet) on the pages. published to a folder and uploaded to godaddy. worked like a charm.
    updated to ilife 09. made a minor change to the text on the page with the music player, published to a folder. works fine in the folder. uploaded to godaddy and the player disappears. soooo...i replaced the 09 html page with the 08 html page and uploaded to godaddy. works fine. WHAT'sthedeal???
    wanted to do fancy zoom on the pictures so downloaded and followed instructions to the letter. the pictures come up in a separate browser window rather than in a pop up window as they should. WHY WHY WHY? haven't tried this in 08 but my suspicions are that it would work in 08 and not 09.
    any ideas?

    well here's what i've discovered in a nutshell...it hasn't much mattered whether or not i publish changes or the entire site -- my results have been the same either way. What did seem to matter was the seeming conflict upon upload with published folders created in iweb08 and updated in iweb09.
    *fancy zoom:* overlapping pictures do not seem to cause trouble. the strokes and background seemed to be what was stopping progress. once i eliminated them everything worked just like it was supposed to.
    fancy zoom code needs to be adjusted each time you publish. when editing the code in text wrangler i found i need to do the find / replace in order (head first, then page load) to make sure nothing gets forgotten / dropped. finally placed the html code in a separate place so it's just a matter of copy and paste. Just for grins i did remove the previously uploaded files from godaddy prior to posting the new ones just in case there were any stray free range electrons that might gummy up the works (see music player issue below)
    *old picture files issue:* i publish to a folder on my desktop first then use godaddy's ftp to get it up. the old picture files appear upon publishing to the desktop folder. This folder should be cleaned out prior to uploading and it's a pain in the you know what, but is more neat and tidy on the uploaded site.
    *music player issue*: The player kept disappearing on upload to godaddy and i had to finally delete the previous file from godaddy before uploading the new one (this was after the iweb08 / 09 conversion). happened the first time and works well now - subsequent uploads no problem.
    seems like a lot of bashing and thrashing about for something so seemingly simple. but i guess that's what you get when you give the inexperienced monkeys like me some cool tools to play with!
    Thanks again for taking the time to get this all on the right track. i have learned.....
    cheryl

Maybe you are looking for