Блог

Фикс высоты для изображений в плагине «Isotope»

Есть такой небезызвестный плагин как Isotope (Filter & sort magical layouts), который помогает делать на сайте сортировку с красивой анимацией, однако плагин как и абсолютно всю в нашем мире — не совершенен.

В частности имеет проблемы с высотой у изображений, и иногда картинки просто схлопываются, что крайне печалит, но решение есть, и для этого нам понадобиться небольшой дополнительный скрипт под названием imagesLoaded, который проследит, чтобы наши изображения сперва загрузились, а уже потом дать isotop с ними работать, таким образом мы избежим бага с высотой или схлопыванием изображений.

Код:

$('.container').imagesLoaded(function(){ // Инициализируем imagesLoaded
        $('.works').isotope({ // Запускаем изотоп
            itemSelector: '.work'
        });
});

Ссылка на плагин Isotope: https://isotope.metafizzy.co/

Ссылка на плагин imagesLoaded: https://imagesloaded.desandro.com

Любые вопросы в комментарии.

Оставить комментарий

avatar