Develop Reference

Isotope executing before Images load

I'm struggling to get my Isotope to execute after images load because otherwise, the Isotope items overlap. - I am trying to apply the ImagesLoaded plugin (http://imagesloaded.desandro.com/) to my Isotope, however, I am struggling to execute the Isotope after Images load.
Below is my Isotope WITHOUT ImagesLoaded, if anyone knows how to go about this I'd be most grateful! (: Here is my Isotope in action: http://illuminategg.hol.es/portfolio.html
var isotope_port = $('.port-isotope');
isotope_port.isotope({
'itemSelector': '.item'
});
$('.port-filter a').click(function() {
$(this).parent().parent().find('li').removeClass('selected');
$(this).parent().addClass('selected');
var selector = $(this).attr('data-filter');
isotope_port.isotope({ filter: selector });
return false;
});

For imagesloaded, first add the script to your page since it is not part of isotope. Then use it as follows:
var isotope_port = $('.port-isotope');
isotope_port.imagesLoaded( function() {
isotope_port.isotope({
'itemSelector': '.item'
});
});

Overlapping masonry divs with instafeed and twitterFetcher scripts

I have a small problem where two masonry blocks are overlapping on load. Both blocks contain empty divs that use scripts to add content. One is instafeed to display the latest instagram image and the other displays the latest tweet. If I resize the window then they stack nicely.
I've tried using .imagesLoaded method below but that doesn't change anything. And the tweet block is just text anyway.
<script>
$(document).ready( function() {
var $container = $('#container').imagesLoaded( function() {
$container.masonry({
"gutter": ".gutter-sizer",
"itemSelector": ".item",
"stamp": ".stamp"
});
});
});
</script>
If I use the following this fixes it for all browsers except IE9:
<script>
$(window).load(function(){
$('#container').masonry({
"gutter": ".gutter-sizer",
"itemSelector": ".item",
"stamp": ".stamp"
});
});
</script>
I suspect it may have something to do with masonry loading before the other two scripts but I have no idea how to solve it.
Thanks for looking!

isotope container - show on click

I'm using isotope to create a filter feature. But the entire isotope container needs to be hidden on the initial page load, and visitor will have to click on a button for the container to show.
I have the filter working, but when you click on the button, the first time the container loads, all items are on top of each other, then when you click on either one of the filters, everything falls into place.
You can see my code here - http://chrsdev.com/test.html
How can I fix the issue of all items positioning on top of each other on the initial content load?
Would greatly appreciate it if someone can point me in the right direction.

Download imagesloaded.js and add the script to your page. (Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue)
Then call isotope like this:
//Initialize isotope on each container
jQuery.each($container, function (j) {
this.imagesLoaded( function() {
this.isotope({
itemSelector : '.element-item'
});
});
});
ADDENDUM
The issue is with your each function and "this". Try this instead.
//Initialize isotope on each container
jQuery.each($container, function (j) {
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.element-item'
});
});
});

When Isotop/masonry 1st loaded it get crumpled all together how to fix?

When Isotop/masonry 1st loaded it get crumpled all together how to fix ? but after i refresh it it just got back to normal. Visit this link to check it live.

Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. Here are the instructions on how to utilize it. Isotope v2 does not include it so you need to download and load it in your page.

If your layout has images, you probably need to use imagesLoaded.
Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.
You can use ImageLoaded by adding some JS:
<script type="text/javascript" src="http://imagesloaded.desandro.com"></script>/imagesloaded.pkgd.min.js
// init Isotope
var $grid = $('.grid').isotope({
// options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});

Jquery Masonry and Foundation 5

I've used Dylan Baumann's GitHub repository for integrating Masonry and Foundation. It worked great in Foundation 3, but not so well in Foundation 5. On both F3 and F5 I get images stacking vertically.
For F3, I used the following JS to resize the window and stop the images stacking vertically:
$(".title").click(function () {
$(window).trigger('resize');
});
But that does not work in F5 with the following (Masonry is within a Foundation Accordion element):
<script>
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector: '.box',
isFitWidth: true
});
});
$("#secondary div.row div.small-12.large-9.columns dl.accordion dd.accordion-navigation a").on("click", function () {
$(window).trigger('resize');
});
The markup changed for the Accordion element in F5, so the window resize target changed. I've tried many different methods, but can't get it to work.
The site in question is here - need to click on "Bilder far Adventure".
Anyone found a solution to the images stacking problem?

Ok I figured it out. Use window.dispatchEvent(new Event("resize")) instead of window resize:
$("dd.accordion-navigation a").on("click", function () {
window.dispatchEvent(new Event("resize"))
});
Works!

I am doing a content site project using Jekyll and as I was doing my research I came up with a possible answer:
I suggest you to do it The Zurb Way