205 lines
11 KiB
HTML
205 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html class="no-js">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<title>imagefill.js | Project Page</title>
|
||
|
|
<meta name="description" content="imagefill.js - The jQuery plugin for making images fill their containers (and be centered)">
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
|
||
|
|
|
||
|
|
<!-- Extra Strength Responsive Grids https://github.com/dfcb/extra-strength-responsive-grids -->
|
||
|
|
<link rel="stylesheet" href="css/grid.css">
|
||
|
|
<link rel="stylesheet" href="css/main.css">
|
||
|
|
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||
|
|
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
<!-- Prevent FOUC (flash of unstyled content) -->
|
||
|
|
<style type="text/css">
|
||
|
|
.no-fouc {display: none;}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.documentElement.className = 'no-fouc';
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="wrapper">
|
||
|
|
<header>
|
||
|
|
<div class="block">
|
||
|
|
<div class="imagefill-icon">
|
||
|
|
<img src="img/fill-icon.png" alt="">
|
||
|
|
</div>
|
||
|
|
<h1>imagefill.js</h1>
|
||
|
|
</div>
|
||
|
|
<div class="block">
|
||
|
|
<h2>The jQuery plugin for making images fill their containers (and be centered)</h2>
|
||
|
|
<p><small><em>a potentially useful tool for Responsive Web Design</em></small></p>
|
||
|
|
</div>
|
||
|
|
<div class="block">
|
||
|
|
<p>Created by <a href="http://johnpolacek.com" target="_blank">John Polacek</a></p>
|
||
|
|
<div class="follow-btn">
|
||
|
|
<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&id=twitter-widget-0&lang=en&screen_name=johnpolacek&show_count=false&show_screen_name=true&size=l" class="twitter-follow-button" style="width: 169px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<a href="https://github.com/johnpolacek/imagefill.js/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
|
||
|
|
|
||
|
|
<div class="simple-demo">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="block">
|
||
|
|
<h3>Download</h3>
|
||
|
|
<p>Source files <a href="https://github.com/johnpolacek/imagefill.js/" target="_blank">on github</a> or <a href="https://github.com/johnpolacek/imagefill.js/zipball/master/" target="_blank">download the zip</a>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="block">
|
||
|
|
<h3>Simple Example</h3>
|
||
|
|
<p>Given this html:</p>
|
||
|
|
<pre><div class="container"><img src="myawesomeimage" /></div></pre>
|
||
|
|
<p>Do this:</p>
|
||
|
|
<pre>$('.container').imagefill();
|
||
|
|
// image stretches to fill container</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="block">
|
||
|
|
<h3>Grid Example</h3>
|
||
|
|
<p>Given a grid like this:</p>
|
||
|
|
<pre><div class="grid-whole">
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="myawesomeimage.jpg">
|
||
|
|
</div>
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="myawesomeimage.jpg">
|
||
|
|
</div>
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="myawesomeimage.jpg">
|
||
|
|
</div>
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="myawesomeimage.jpg">
|
||
|
|
</div>
|
||
|
|
</div></pre>
|
||
|
|
<p>Do this:</p>
|
||
|
|
<pre>$('.grid-quarter').imagefill();
|
||
|
|
// image stretches to fill container</pre>
|
||
|
|
<div class="block clearfix">
|
||
|
|
<div class="grid-demo">
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
<div class="grid-quarter">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p>Check out <a href="responsive.html" target="_blank">this simple responsive grid example</a>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="block">
|
||
|
|
<h3>Different Sizes Example</h3>
|
||
|
|
<p>Given images that vary in sizes, for example using jQuery Masonry or Packery, do this:</p>
|
||
|
|
<pre>$('.item').imagefill();
|
||
|
|
// image stretches to fill container</pre>
|
||
|
|
<div class="block clearfix">
|
||
|
|
<div class="sizes-demo">
|
||
|
|
<div class="sizes-example sizes-example1">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
<div class="sizes-example sizes-example2">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
<div class="sizes-example sizes-example3">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
<div class="sizes-example sizes-example4">
|
||
|
|
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p>Check out <a href="packery.html" target="_blank">this simple packery example</a> which is also a nice use case for the <code>{runOnce:true}</code> option.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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.
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="block">
|
||
|
|
<h3>Requires:</h3>
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://github.com/desandro/imagesloaded">imagesLoaded</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="block">
|
||
|
|
<h3>If you like imagefill.js, you might also like:</h3>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://packery.metafizzy.co/">Packery</a> - The bin-packing layout library that is from the same <a href="https://github.com/desandro">mad genius</a> who created jQuery <a href="http://masonry.desandro.com/">Masonry</a> and <a href="http://isotope.metafizzy.co/">isotope</a>.</li>
|
||
|
|
<li><a href="https://github.com/tsvensen/equalize.js/">equalize.js</a> - The jQuery plugin for equalizing the height or width of your elements</li>
|
||
|
|
<li><a href="http://dfcb.github.io/extra-strength-responsive-grids/">Extra Strength Responsive Grids</a> - The Fluid CSS Grid System for Responsive Web Design. Take total control of your layouts.</li>
|
||
|
|
<li><a href="http://johnpolacek.github.io/stacktable.js/">stacktable.js</a> - jQuery plugin for stacking tables on small screens.</li>
|
||
|
|
<li><a href="http://johnpolacek.com/2012/10/03/help-prevent-fouc/">Prevent FOUC</a> - Prevent FOUC with 2 easy steps.</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
||
|
|
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
|
||
|
|
<script src="js/jquery-imagefill.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// SIMPLE DEMO
|
||
|
|
$('.simple-demo')
|
||
|
|
// call image fill throttled to 30 fps (default is only 10 fps, works for most situations)
|
||
|
|
.imagefill({throttle:1000/60})
|
||
|
|
// add looped animation queue
|
||
|
|
.queue(function(next) {
|
||
|
|
$(this).animate({width:640},2000).delay(2000).animate({width:90},2000).delay(2000);
|
||
|
|
$(this).queue(arguments.callee);
|
||
|
|
next();
|
||
|
|
});
|
||
|
|
|
||
|
|
// GRID DEMO
|
||
|
|
$('.grid-quarter').imagefill();
|
||
|
|
$('.grid-demo').queue(function(next) {
|
||
|
|
$(this).animate({width:320},4000).animate({width:640},4000);
|
||
|
|
$(this).queue(arguments.callee);
|
||
|
|
next();
|
||
|
|
});
|
||
|
|
|
||
|
|
// VARIED SIZES EXAMPLE
|
||
|
|
$('.sizes-example').imagefill({runOnce:true});
|
||
|
|
|
||
|
|
// Prevent FOUC
|
||
|
|
$('.no-fouc').removeClass('no-fouc');
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var _gaq=[['_setAccount','UA-2821890-9'],['_trackPageview']];
|
||
|
|
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
|
||
|
|
g.src='//www.google-analytics.com/ga.js';
|
||
|
|
s.parentNode.insertBefore(g,s)}(document,'script'));
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|