www.webdeveloper.com
Results 1 to 13 of 13

Thread: open large image with zoom

  1. #1
    Join Date
    Mar 2008
    Posts
    11

    open large image with zoom

    I have seen this particular effect in various places - it is used a lot on wikipedia - where you click on an image and get a large version of the image that fills the browser window. When you hover over the larger image, the cursor becomes a magnifying glass that allows you to click and zoom to 100% and back to "fill window" size.

    What I think is happening is that the image link just goes to the large version of the image itself (as opposed to another html page), as in
    <a href="xyz.jpg">
    and the browser is handling the hover/zoom effects. I am using Safari and Firefox on a mac and currently don't have access to windows, but I am assuming it works on ie and other browsers this way as well - can anyone confirm this? Is there anything special about how this is done, or is it a simple link to a standard jpeg image file?

    Can it be counted on to be standard behavior for most browsers?

    Are there other common ways this is achieved?

    The reason I am asking this is that I have a client that is requesting this behavior on a site I am making. One of their requests is that the "fill-window-sized" view of the image not be left aligned in the screen, but rather centered (safari and ff left align it if the window is of a shorter aspect ratio than the image). They may want other customization as well, such as a caption.

    I don't think this behavior can be customized without some somewhat involved css/js work. Or are there any coding techniques that can can easily modify these behaviors - as opposed to coding a solution from scratch?

    Or are there any libraries or solutions for customizing this (I am aware of various js overlay box solutions, but this is not what they want - they want the image to open in a new browser window, filling the window with the zoom cursor).

    The "open in new window" thing is another issue I have questions about, but as it is a separate issue and this post is already way too long, I will start a new thread. Thanx.

  2. #2
    Join Date
    Mar 2006
    Posts
    172
    Quote Originally Posted by fisheye View Post
    I have seen this particular effect in various places - it is used a lot on wikipedia - where you click on an image and get a large version of the image that fills the browser window. When you hover over the larger image, the cursor becomes a magnifying glass that allows you to click and zoom to 100&#37; and back to "fill window" size.

    What I think is happening is that the image link just goes to the large version of the image itself (as opposed to another html page), as in
    <a href="xyz.jpg">
    and the browser is handling the hover/zoom effects. I am using Safari and Firefox on a mac and currently don't have access to windows, but I am assuming it works on ie and other browsers this way as well - can anyone confirm this? Is there anything special about how this is done, or is it a simple link to a standard jpeg image file?

    Can it be counted on to be standard behavior for most browsers?

    Are there other common ways this is achieved?

    The reason I am asking this is that I have a client that is requesting this behavior on a site I am making. One of their requests is that the "fill-window-sized" view of the image not be left aligned in the screen, but rather centered (safari and ff left align it if the window is of a shorter aspect ratio than the image). They may want other customization as well, such as a caption.

    I don't think this behavior can be customized without some somewhat involved css/js work. Or are there any coding techniques that can can easily modify these behaviors - as opposed to coding a solution from scratch?

    Or are there any libraries or solutions for customizing this (I am aware of various js overlay box solutions, but this is not what they want - they want the image to open in a new browser window, filling the window with the zoom cursor).

    The "open in new window" thing is another issue I have questions about, but as it is a separate issue and this post is already way too long, I will start a new thread. Thanx.
    There are solutions with similar, though not exactly the same, out there generically called 'lightbox'. I'm not aware of any that allow for that much zooming. they basically open a larger version of an image you click on in the page, which opens up a window (while blurring the original page) with a larger version of the image. The ones I've looked at allow for captions and allow you to navigate to other pictures using arrows that appear on hover.

    Might not work in your case, but if I were setting up something to display images, that's what I'd look at first.

    Here's a blog post that is a compilation of some of the available iterations. there's even some additional ones in the reply posts below the round-up.

  3. #3
    Join Date
    Mar 2008
    Posts
    11
    Quote Originally Posted by CFHutton View Post
    There are solutions with similar, though not exactly the same, out there generically called 'lightbox'.
    As I said in the original post, I am aware of various solutions for overlay type boxes within the same browser window. What the client is asking for is not that, but for the image to open in it's own browser window, with that specific behavior that I mentioned: IMAGE COMPLETELY FILLS WINDOW, HOVER CURSOR BECOMES ZOOM ICON, CLICK WILL ZOOM IN ON IMAGE. They have seen this behavior, as it appears on many websites. What I am asking for is help in understanding what causes this behavior and if it can be easily customized.

    An example of what I am talking about can be seen here:
    http://en.wikipedia.org/wiki/File:Ma...fairy_wren.jpg
    Click on the image and you will see what I am talking about.

  4. #4
    Join Date
    Mar 2006
    Posts
    172
    Sorry for the confusion.
    Last edited by CFHutton; 03-10-2010 at 03:04 PM.

  5. #5
    Join Date
    Mar 2008
    Posts
    11
    Quote Originally Posted by CFHutton View Post
    Sorry for the confusion.
    I appreciate any attempt to respond, and I realize it is a pretty specific and kind of nit-picky question I am asking, but I am trying to please a client without making big headaches for myself.

    Quote Originally Posted by CFHutton View Post
    Btw, That image you linked doesn't open in a new browser window.
    I realize that, but it does exhibit the behavior I am being asked to duplicate/customize.

    So anyone who can discuss this is appreciated. As I said it appears to be a simple link to a normal (albeit very large) jpeg file. Is that all there is to it? Does it behave the same in all browsers? Is there a not-too-complex way to customize it?

  6. #6
    Join Date
    Mar 2006
    Posts
    172
    Here I believe is the relevant code:

    Code:
    <div class="fullImageLink" id="file"><a href="http://upload.wikimedia.org/wikipedia/commons/3/32/Male_superb_fairy_wren.jpg"><img alt="File:Male superb fairy wren.jpg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Male_superb_fairy_wren.jpg/800px-Male_superb_fairy_wren.jpg" width="800" height="534" /></a><br /><small>Size of this preview: 800  534 pixels</small><br /><a href="http://upload.wikimedia.org/wikipedia/commons/3/32/Male_superb_fairy_wren.jpg">Full resolution</a>‎ (1,600  1,067 pixels, file size: 358 KB, MIME type: image/jpeg)</div>
    As you can see, there appears to be more than one photo, which makes sense because you can't maintain picture quality by just changing the values for width and height.

  7. #7
    Join Date
    Mar 2006
    Posts
    172
    Attached is a picture of the body portion of the page (the code of it) that opens up when you click on the wiki image. Not sure if that will help, but it at least does show the cursor code.

    Maybe it will help some.
    Attached Images Attached Images

  8. #8
    Join Date
    Mar 2008
    Posts
    11
    Well, when I simply open an image file from my local drive in Safari or Firefox, it gets this behavior: making the window smaller than the image causes the image to change size to fill the browser window and the cursor becomes the zoom icon. So I am assuming there is nothing unusual going on behind the scenes here.

    So my question is: does this happen in other browsers and can it be customized?

    One thing that is curious about the wikipedia link is the formation of the url as:
    HTML Code:
    http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Male_superb_fairy_wren.jpg/800px-Male_superb_fairy_wren.jpg
    The beginning appears to be a path to an image:
    HTML Code:
    http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Male_superb_fairy_wren.jpg
    And that is followed by a slash and another image name:
    HTML Code:
    800px-Male_superb_fairy_wren.jpg
    Is this some weird formation of the src attribute? Or is it perhaps just from the fact that one of the directories in the path was named with ".jpg" at the end?
    Last edited by fisheye; 03-10-2010 at 03:44 PM.

  9. #9
    Join Date
    Mar 2008
    Posts
    11
    Quote Originally Posted by CFHutton View Post
    Attached is a picture of the body portion of the page (the code of it) that opens up when you click on the wiki image. Not sure if that will help, but it at least does show the cursor code.

    Maybe it will help some.
    Interesting. I have to look into the css cursor selector.

    However, this seems to happen automatically, at least in FF and Safari (mac) - all you have to do is open an image file from your hard drive.
    Last edited by fisheye; 03-10-2010 at 03:59 PM.

  10. #10
    Join Date
    Mar 2010
    Posts
    128
    That is a function of the browser, not a function of HTML. It is not something you can implement into your page, as least not that I am aware of. You can get similar effects using javascript, preferably jquery. Take a look at this example, might get you started.

    http://www.mind-projects.it/projects/jqzoom/

  11. #11
    Join Date
    Mar 2008
    Posts
    11
    Quote Originally Posted by rproctor83 View Post
    That is a function of the browser, not a function of HTML.
    As I suspected. I have 2 questions about it:

    1 - How consistent is that behavior across browsers?

    2 - Is that behavior caused by providing an ordinary link to an ordinary jpeg file?

    Thanks

  12. #12
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,086
    Here's "FancyZoom", then you just need to use some CSS to change the cursor...

    http://www.cabel.name/2008/02/fancyzoom-10.html

  13. #13
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,086

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles