This commit is contained in:
parent
e2ad09a9e6
commit
0f22fe2a4e
149 changed files with 12527 additions and 10181 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue