This commit is contained in:
Alex Corbi 2015-09-16 21:01:58 +02:00
parent e2ad09a9e6
commit 0f22fe2a4e
149 changed files with 12527 additions and 10181 deletions

View file

@ -4,10 +4,12 @@ by [John Polacek](http://johnpolacek.com)
See demo and documentation at the [project page](http://johnpolacek.github.io/imagefill.js)
Requires imagesLoaded - https://github.com/desandro/imagesloaded
* * *
#### follow [@johnpolacek](https://twitter.com/johnpolacek)
* * *
## Legal
Author & copyright (c) 2013: [John Polacek](http://johnpolacek.com), Dual MIT & GPL license
Author & copyright (c) 2013: [John Polacek](http://johnpolacek.com), Dual MIT & GPL license

View file

@ -134,12 +134,15 @@
<div class="block">
<h3>Options</h3>
<p><strong>runOnce</strong><br>
Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside. To only run once, set to false.
Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside. To only call imagefill once, set to true.
</p>
<pre>$('.img-container').imagefill({runOnce:true});</pre>
<p><strong>throttle</strong><br>
Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside. This option lets you adjust the frequency of this check (default is 100ms). To run at a higher frequency, such as for an animation rate like 60fps, do this:</p>
<pre>$('.animating-container').imagefill({throttle:1000/60})</pre>
<p><strong>target</strong><br>
By default, Imagefill will use 'img' as the target selector. To use a custom selector to tell imagefill which img to target for filling its container use the target option.</p>
<pre>$('.animating-container').imagefill({target:'.background-image'})</pre>
</div>

View file

@ -24,16 +24,18 @@
$.fn.imagefill = function(options) {
var $container = this,
$img = $container.find('img').addClass('loading').css({'position':'absolute'}),
imageAspect = 1/1,
containersH = 0,
containersW = 0,
defaults = {
runOnce: false,
target: 'img',
throttle : 200 // 5fps
},
settings = $.extend({}, defaults, options);
var $img = $container.find(settings.target).addClass('loading').css({'position':'absolute'});
// make sure container isn't position:static
var containerPos = $container.css('position');
$container.css({'overflow':'hidden','position':(containerPos === 'static') ? 'relative' : containerPos});
@ -58,7 +60,7 @@
containersH = 0;
containersW = 0;
$container.each(function() {
imageAspect = $(this).find('img').width() / $(this).find('img').height();
imageAspect = $(this).find(settings.target).width() / $(this).find(settings.target).height();
var containerW = $(this).outerWidth(),
containerH = $(this).outerHeight();
containersH += $(this).outerHeight();
@ -67,7 +69,7 @@
var containerAspect = containerW/containerH;
if (containerAspect < imageAspect) {
// taller
$(this).find('img').css({
$(this).find(settings.target).css({
width: 'auto',
height: containerH,
top:0,
@ -75,7 +77,7 @@
});
} else {
// wider
$(this).find('img').css({
$(this).find(settings.target).css({
width: containerW,
height: 'auto',
top:-(containerW/imageAspect-containerH)/2,