Download
User Rating: 0/5 ( 0 votes)
Image Fit Window is a small jQuery plugin to automatically resize important artwork images to fit within the visible area of the page i.e within the first scroll. You can also have it fit images to any other container besides the window, but the uses for this are few.
On art-focused websites it's often important that a large image be visible in its entirety to be properly appreciated. As websites are often fluid-width and browser dimensions up to the user, this can be tricky to ensure.
This plugin helps by reducing the image to fit within the window and gives the user a toggle with which to toggle between the "fit" size and the actual size image.
Source: github.com
1. INCLUDE JS FILES
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.image-fit-window.js"></script>
2. HTML
<img id="my-image-1" src="http://fillmurray.com/1000/700" width="1000" height="700" />
3. JAVASCRIPT
$(function(){
$('#my-image-1').imageFitWindow();
});
4. OPTIONS
|
option |
description |
default |
value(s) |
|
auto |
Whether to fit the image automatically upon initialisation of the plugin (you can execute the fitting function manually) |
true |
boolean |
|
container |
What element to fit the image within. As this plugins is primarily for fitting images to the window, this option defaults to window. There are few scenarios to set it to anything else |
window |
jQuery element or window |
|
offsetY |
A manual pixel value by which to offset the image from the top of the window. Can be used to accommodate the height of a menu, or other surrounding livery which should also remain visible in the first scroll. |
0 |
numeric value in pixels |
|
wrapperClass |
The classname of a div that gets wrapped around the image for utility purposes |
"fit-wrapper" |
string |
|
toggleClass |
The classname of the toggle which gets added to the wrapper |
"fit-toggle" |
string |
|
allowUpscaling |
Whether to allow the fitting method to scale an image beyond it's initial size. Generally undesirable |
false |
boolean |
|
onFit |
Callback function run once the image fitting function has run |
undefined |
function |
|
onUnfit |
Callback as above, except for when the image has been enlarge to it's full size |
undefined |
function |
|
onMaxed |
Requires allowUpscaling:false. Callback run when the plugin detects the image can be enlarged no further without upscaling |
undefined |
function |
5. METHODS
You can also manually fit or unfit the image within the container.
// set up the fitting plugin without automatically fitting the image during setup
$('#my-image').imageFitWindow({auto:false});
// manually fit the image
$('#my-image').imageFitWindow('fit');
// manually unfit the image
$('#my-image').imageFitWindow('unfit');
// turn off the plugin completely (turning it back on requires the user to set up the plugin again)
$('#my-image').imageFitWindow('destroy');
JS Tutorial
