JQuery Masonry and Foundation 5

Question

Я использовал хранилище GitHub Dylan Baumann для интеграции масонства и фонда. Он отлично поработал в Foundation 3, но не так хорошо в Foundation 5. На F3 и F5 я получаю снимки вертикально.

Для F3, я использовал следующий JS, чтобы изменить размер окна и остановки изображения укладки по вертикали:

$(".title").click(function() { 
    $(window).trigger('resize'); 

});

Но это не работает в F5 со следующим (масонства находится в пределах элемента Foundation аккордеона):

<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'); 
}); 

Разметка изменилось для аккордеона элемента F5, поэтому целевое окно изменения размера изменилось. Я пробовал много разных методов, но не могу заставить его работать.

The site in question is here - необходимо нажать на ссылку «Приключенческое путешествие».

Кто-нибудь нашел решение проблемы с укладкой изображений?

Answer 1

Хорошо, я понял. Используйте window.dispatchEvent(new Event("resize")) вместо изменения размера окна:

$("dd.accordion-navigation a").on("click", function() { 
    window.dispatchEvent(new Event("resize")) 
}); 

Работы!

Answer 2

Я делаю содержание сайта проект с использованием Джекила и как я делал мои исследования я придумал возможный ответ:

Я предлагаю вам сделать это The Zurb Way