Browse Source

docs : add imagesLoaded to troubleshooting

pull/14/head
David DeSandro 14 years ago
parent
commit
b5bd1cd17e
  1. 18
      _posts/docs/2010-12-11-troubleshooting.mdown
  2. 6
      css/style.css

18
_posts/docs/2010-12-11-troubleshooting.mdown

@ -13,6 +13,8 @@ Most layout modes (i.e masonry, fitRows) need to measure the size of each item t
### Images
#### Inline dimensions
For images, the best method is to specify the width and height of images inline.
{% highlight html %}
@ -23,6 +25,22 @@ For images, the best method is to specify the width and height of images inline.
If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function.
#### imagesLoaded plugin
The next best solution is to use the imagesLoaded plugin included with Isotope. It's a fork of [Paul Irish's plugin](https://gist.github.com/268257) that finds all the images in a context, and fires a callback function once all the images have loaded.
{% highlight javascript %}
$('#container').imagesLoaded( function(){
$(this).isotope({
itemSelector : '.item',
});
});
{% endhighlight %}
#### `$(window).load()`
Another solution is to initialize Isotope inside `$(window).load()` instead of `$(document).ready()`.
{% highlight javascript %}

6
css/style.css

@ -424,11 +424,15 @@ body.doc {
.doc h3 {
color: #FEC;
background: hsla( 0, 0%, 0%, 0.15 );
background: hsla( 0, 0%, 75%, 0.05 );
padding: 2px 0.5em;
margin-bottom: 0.5em;
}
.doc h4 {
margin-bottom: 0.5em;
font-size: 14px;
}
.doc h2,

Loading…
Cancel
Save