Your best bet would be to deal with smaller images. When Shadowbox resizes the images, it doesn't resample them which would account for what may appear to be digital artifacts or a visual loss of quality. The quality of the images, however, is exactly the same—they're just squished.
The drag allows you to move the image around. Please see the Great Wall example you cited.
You currently have three options: Clipped, Resized, and Draggable. Clipped will simply "chop" your image. Resize is the default and will resize your image. Draggable will load your image as-is and allow the user to move the image around to view it.
Those are the three options.
To do what you're asking for, to have Shadowbox display the image at it's actual size, would break the experience of using Shadowbox in the first place. It would force scroll bars in the viewport and, essentially, ruin the experience. You might want to look into pop-up windows if you need to have full-resolution photos displayed.
Sort of. All you can do is change the viewportPadding option. The thing with that, though, is that it will never be a constant percentage as all browsers and displays are set at different sizes and resolutions.
Shadowbox is client-side processing, so you are at the mercy of the particular browser's capability when it comes to image handling.
Shadowbox works solely within the confines of the available viewport area, and it does not attempt to control that area by resizing the browser window (personally, I avoid like the plague any site that does!).
Shadowbox determines the width/height of the viewport, and 'resizes' (if configured to do so!) the media to be displayed such that it fits within those dimensions. There is a configurable gap applied, such that any edge of the Shadowbox will be at least X distance from the corresponding edge of the viewport - viewportPadding:X - and this defaults to 20px but can be set by you in the options passed in to Shadowbox.init().
The 'resizing' applied by Shadowbox will maintain the proportions of the original media, and such 'resizing' is accomplished simply by modifying the width and height properties of the relevant DOM element for the media, the subsequent effect of which is down to the browser.
Shadowbox will accept a width and height value as part of its configurable settings but these are not overrides! They are values that will not be exceeded when Shadowbox calculates its dimensions according to the options applied to, and properties of, the current media; the size of the viewport is still the overriding factor.
Therefore ... setting width/height greater than the current viewport dimensions will have no effect; setting width/height to be portrait when your media is landscape simply restricts the landscape width to the width setting (assuming the resultant width still fits within the viewport, with the viewportPadding gap applied!) and height proportional to resultant width.
NB : Shadowbox does not (currently) accept or use any percentage values, although it can be made to do so. And even if it did, that would not change the basic rules it applies for calculating its dimensions.
You have stated that the 'resized' Wall of China fits your browser screen better than your own image? This would probably be because the original dimensions Wall of China image are closer to being landscape - and therefore more likely to be proportionate with the viewer's browser viewport area - than your nearly-square image dimensions. Unless you resize your browser window to get a nearly-square viewport area, you are unlikely to get your image to 'fill' the screen as well as the Wall of China does!
In order to maximise the media dimensions:
- set viewportPadding to a lower value, maybe even down to 0 (zero)
- change the skin styling to effectively 'remove' unwanted title and/or info bars, by setting height to 0 (zero)
- reduce the shadowbox border to the lowest acceptable (to you) value - ie. if you don't want a border, remove it; if you do want a border, keep it small.
It is important to remember, though, that you have no control over the user's available viewport area, so using the 'resize' option for handleOversize will only guarantee that the user can see the entire image (in proprortion!) within their viewport area. If you use handleOversize:drag/none then the image will be displayed with its original dimensions, but the user will only be able to see the portion of the image that fits within the confines of the Shadowbox (within the viewport). However, with the 'drag' option, the image can be moved around to view other 'portions', whereas with 'none' the image is 'clipped' to the Shadowbox dimensions.
[There is also the possibility of a fourth handleOversize option]
Having said all the above, you do of course have the option of restyling the Shadowbox skin such that large images are displayed in full, and can be scrolled into view. But if you intend to do that I would suggest looking at other packages, such as Lightbox which does not restrict media to the viewport.
If you wish to look into real-time image resampling and resizing, then I think you need to consider server-side processing, using something like PHP's GD2 library or ImageMagick, to serve up your images.
Combine literacy with curiosity and a whole world of information opens up to you