Grow your CSS skills. Land your dream job.

Open a Window with Full Size Unscaled Image

Published by Chris Coyier

For the gallery section of this site, I wanted people to have the ability to see the screenshot at its original size. Due to the fluid nature of this site, it's fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution.

My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to do is this:

window.open(path-to-image);

Actually it's a bit more complex than that. We need to pass in a bunch of parameters to get the window we want. Namely, the kind with as little chrome as possible. A top bar with a close button and that's about it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can't just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot');

img.width;  // current size, not natural size
img.height; // current size, not natural size

To get the natural size, we'll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it's untainted by CSS on the page.

var img = document.getElementById('screenshot');
		
var magicEtherImage = new Image();
magicEtherImage.src = img.src;

var padding = 20; // little buffer to prevent forced scrollbars
		
// Values to use when opening window
var winWidth = magicEtherImage.width + padding;
var winHeight = magicEtherImage.height + padding;

I use jQuery on my site, so ultimately my code is like this:

$(".view-full-size").click(function() {

  var mainScreenshot = $("#main-screenshot");
	
  var theImage = new Image();
  theImage.src = mainScreenshot.attr("src");
	
  var winWidth = theImage.width + 20;
  var winHeight = theImage.height + 20;
	
  window.open(this.href,  null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); 
	
  return false;
	
});

You can see it in action on single gallery pages like this.

Obviously it doesn't do much on mobile, so I just remove the button with a media query.

Comments

  1. Jon
    Permalink to comment#

    I disagree that this is a good UX. It is just a pop up which I then have to move my mouse or use a keyboard shortcut to close.

    A lightbox that has an option to scale the image is far better in my opinion. Personally I like prettyphoto lightbox that has this option. Then it will open the image fitting to the size of the window the user has, and then a button they can press if they want to see it full size if it needed to be scaled down to fit. This is only really a concern for those running in a window rather than fullscreen, but then they have the option to go full screen or maximised and resize the image.

    I’m curious as to what happens if you open an image that is of a larger resolution than the users display? It is removed from mobile users as an option, but what if you had a 1080p image and only a smaller resolution screen?

    • I tried to find answer on your question. I placed 3000 x 3000 image and it was showing only top left part of the image in pop-up window. My screen is 1680×1050.

    • The whole point, to me, is that there is an option to see the image UNscaled. If that’s bigger than the users browser window, fine. That probably won’t be super common anyway (there will be no 3000px wide images). I know that because it’s mine =)

  2. I will have to agree with Jon here, it seems better to use a modal/lightbox that stays within the users current browser window.

  3. Permalink to comment#

    Agreed…
    But besides the UX. You could measure the image size on the server side and add two “data-” attributes with the original image size So no JS request for the full image would be needed for that.

  4. Tim Mackey
    Permalink to comment#

    I’m going to have to vote against this too. People are used to lightboxes, and throwing up a popup window feels like digging up internet dinosaurs. As Jon pointed out, there are many lightboxes that have the option to fit an image to the browser window, and allow the user to click to view it full-size. I’ve never used it on my own websites, but I like Shadowbox.js’s “draggable” feature which fits the image frame to the browser window, and allows the user to click and drag to pan around the image.

    Also, Jon’s point about images that are bigger than the user’s screen is a good one. You could modify your script to limit the popup size to the user’s screen size, but accurately measuring a desktop screen can be tricky business (cf this post)—it’s much easier to get the browser window size and resize a lightbox image that way.

  5. Permalink to comment#

    Same here, I hate that kind of comportment, I dislike even the lightbox but it’s better for me… well like everything that come in front of me and disturb my navigation I hate when it happens.

    I prefer a simple link to the image so it open it in the same tab… but yeah, I know that I don’t have the same habits than everyone.

  6. Kevin
    Permalink to comment#

    You are forcing people to download a full size image in the first place and relying on the browser to resize it for your page. That’s bad practice in my book!

  7. Permalink to comment#

    I think IMG elements have naturalWidth/naturalHeight attribute already (checked Chrome/Safari/Opera/Firefox). You might just use

    
    var img = document.getElementById('screenshot');
    
    img.naturalWidth;
    img.naturalHeight;
    
    • Permalink to comment#

      Ooh good point Tung.

      At first this seems like a bit of a dinosaur but ultimately I came to agree with the those who think that this is perfectly acceptable UX – a full-size image may be very large and not fit within a modal window, or even the entire document window!

      That said, the demo is not *quite* working for me in firefox 8 or chrome 16 – I think the html window or the document body or something has some inherent padding or margins that make the image scale to about 96% in the new tab.

    • Permalink to comment#

      COOL! I like it so much!!!

  8. drew
    Permalink to comment#

    I do not see anything wrong with how YOU are doing it , although I can see how others may use this for UX evil. First, the user is creating this new pop-up, it is not being thrown up automatically. Second, the button says “View Full Size”, that button in itself should tell the user (it did me) that the image could be large (or else there would be no need for the button/scaled image). Third, no one is being “forced” to download it, like I said, they are being told that they are getting the actual sized image, and are pressing a button to view it. It is not being loaded until a button is pressed, viewing large pictures required large data transfer. This being a “technical” site, I think you can get away with MUCH more than a designer can at a normal business site.

  9. ben
    Permalink to comment#

    Is it the “view full size” button that need to be clicked here(http://css-tricks.com/gallery/simple/) in order to have an example for what you’re explaining here ?

  10. Why don’t you do this:
    <a href=”image.png” target=”_blank”><img src=”image.png”></a>

    Using:

    http://css-tricks.com/snippets/html/open-link-in-a-new-window/

  11. Permalink to comment#

    I like lightbox, I disagree with pop-up open, I agree with john.

  12. Donna
    Permalink to comment#

    You should probably check for the image dimensions in an onload event handler. You’re checking them right away, possibly before the image has loaded (unless it’s already cached).

  13. Permalink to comment#

    A slightly different variation of an old&bad.

    Why reinvent the wheel? Or why ignore the new? On newest mobile/tablet no image is full size, it’s just full screen maybe.

    Good UX: fit the image to screen by default and provide the user with a 1:1 button/gesture. Years and years of hard work and development tell us this is *the* solution. Check. Now lets move on :)

  14. jsdev
    Permalink to comment#

    @Druid of Lûhn your way doesn’t resize the new window per size of the image. I think some are missing the point of this exercise. What Chris is doing is opening a new window and sizing it based on it’s contents: an image.

    where this might be useful is say you want to compare three images, like deciding which print to buy, a modal window allow you to tab through three you’ve chosen, or compare on the screen at once.

  15. Permalink to comment#

    FYI: Your form looks great in Opera but fails in IE8 XP/Pro SP3.

    I have to dumb down forms just for IE 8(

  16. i thank window.open should be fired in theimage.onload function.

  17. well it is very great and works pretty well. But getting it work in IE6 is quite a tough job.

  18. TeMc
    Permalink to comment#

    On the example url, clicking Full size still gives me a slightly shrunk image in latest Chrome/Mac. Hovering the image gives an enlarge-cursor and clicking enlarges it to its full-size.

  19. mike
    Permalink to comment#

    I’m not a huge light box fan. I like the fact that a pop up window is easily closed with a quick and easy keyboard shortcut. More effort is spent closing a light box by having to locate the (often times) small close button. Some light boxes let you close them by clicking on the overlay which is nice but still not as fast as good old command/ctrl-w! I know pop ups have been abused but they do have a purpose. Twitter is a good example. An official twitter button on your site will pop a login and tweet posting window, works great and gets out of your way quickly when you’re done.

    • leo
      Permalink to comment#

      mike: ‘I’m not a huge light box fan. ‘

      I’m not either. It’s interesting going through the comments here how much personal preference gets mistaken for “good UX” — as if your whole window suddenly going dark and an image of unpredictable dimensions appearing, closed only by some ‘x’ hopefully prominent enough to identify — as if that were particularly user friendly.

  20. Eddy
    Permalink to comment#

    In the example you link to, I still get the plus minus magnifying glass.

    • mike
      Permalink to comment#

      Quick question: is your screen resolution smaller than the image popping up?

      If I set my screen resolution that low the pop up is resized to fit my screen which activates the magnifying glass.

    • Eddy
      Permalink to comment#

      Only by a few pixels on the height (my screen is 900px high but then there’s the menu bar and other stuff). If I go into fullscreen mode, however, I don’t get the magnifying glass.

  21. ege
    Permalink to comment#

    what about existing user habits?

    I think it would be safe to assume that most of us associate pop-ups with spam or inter-web communications (auth.net and similar dialogues). I, for one, tend to close a pop-up even before it can load the whole page. In which case, I would have made a mistake and it would definitely create some frustration on my end.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".