Skip to content

periplox/jquery.imagefit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 

Repository files navigation

jQuery ImageFit 1.0.2

A simple, lightweight plugin to make images fit anywhere and anyway.

##Demo: right here

##Usage

First, include the required files:

<script src='//code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='jquery.imagefit.js'></script>

Then identify the elements you want to be affected. Let's say...

<div class="im"><img src="images/01.jpg" alt=""></div>
<div class="im"><img src="images/02.jpg" alt=""></div>
<div class="im"><img src="images/03.jpg" alt=""></div>
<div class="im"><img src="images/04.jpg" alt=""></div>
<div class="im"><img src="images/05.jpg" alt=""></div>
<div class="im"><img src="images/06.jpg" alt=""></div>

Finally set the ImageFit in the 'window load' event. If you detect visual flips or white margins then try doing it in both, the 'document ready' and the 'window load' events. There might be more accurate methods depending on how you apply the plugin.

$(window).load(function() {
	$('div.im').imagefit();
});

##Ignoring images

You can choose to ignore certain images, by defining a class name to use. This is especially helpful if using gallery thumbnails in jQuery Cycle2.

<img src="images/01.jpg" alt="" class="ignore">
<img src="images/02.jpg" alt="">

##Options

$('.cycle-slideshow').imagefit({
    ignore: '.ignore',
    mode: mode,
    force : 'true',
    halign : 'center',
    valign : 'middle',
    onStart: function (index, container, imagecontainer) {
	/* Some code */
    },
    onLoad: function (index, container, imagecontainer) {
    	/* Some code */
    },
    onError: function (index, container, imagecontainer) {
	/* Some code */
    }
});

And that would be it.

##Reference

Option Type Default Description
ignore string '' Takes a class name to use. e.g. '.ignore'.
mode string 'inside' It determines how images will be fitted inside the element: 'inside' or 'outside'.
halign string 'center' Horizontal alignment of the images relative to the container element: 'left', 'center' or 'right'.
valign string 'middle' Vertical alignment of the images relative to the container element: 'top', 'middle' or 'bottom'.
force bolean true Force resizing, even when image real size is smaller than container's.
onStart function Function to be executed on start event.
onLoad function Function to be executed on load event.
onError function Function to be executed on error.

About

A simple, lightweight plugin to make images fit anywhere and anyway.

Resources

Stars

Watchers

Forks

Packages

No packages published