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
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.
Originally Posted by fisheye
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.
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.
Originally Posted by CFHutton
An example of what I am talking about can be seen here:
Click on the image and you will see what I am talking about.
Last edited by CFHutton; 03-10-2010 at 03:04 PM.
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.
Originally Posted by CFHutton
I realize that, but it does exhibit the behavior I am being asked to duplicate/customize.
Originally Posted by CFHutton
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?
Here I believe is the relevant code:
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.
<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>
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.
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:
The beginning appears to be a path to an image:
And that is followed by a slash and another image name:
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.
Here's "FancyZoom", then you just need to use some CSS to change the cursor...
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread