Alizoda
@Alizoda
WEB DESIGNER

Как настроить Isotope фильтр?

Здравствуйте! Помогите плиз настроить Isotope фильтр. Все изображения должны иметь тот же высоту, по исходнику.
а данном случае isotop из них делает в основном квадратом формате.

Сейчас
63a73738a1793855733088.jpeg

Моя версия.
63a73761555a3659465300.jpeg

Ссылка на сайт

/* Portfolio items */

.entry {
    overflow: hidden
}

.entry-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.entry:hover .entry-image {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.work-entry-hover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(66, 66, 66, 0.6);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.entry:hover .work-entry-hover {
    opacity: 1;
    visibility: visible
}

.work-entry-content {
    position: absolute;
    bottom: 50px;
    left: 50px
}

.work-entry-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    position: relative;
    top: 15px;
    -webkit-transition: all .5s cubic-bezier(0.4, .2, 0, 1) .2s;
    transition: all .5s cubic-bezier(0.4, .2, 0, 1) .2s
}

.work-entry-cat {
    font-size: 14px;
    opacity: 0;
    position: relative;
    top: 15px;
    -webkit-transition: all .5s cubic-bezier(0.4, .2, 0, 1) .3s;
    transition: all .5s cubic-bezier(0.4, .2, 0, 1) .3s;
    color: #fff;
}

.entry:hover .work-entry-title,
.entry:hover .work-entry-cat {
    opacity: 1;
    top: 0
}

.project-intro li {
    font-size: 18px;
    color: #000000;
    padding: 12px 0 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    max-width: 200px;
}

.project-intro li.title {
    font-weight: 700;
    padding: 0px 0 22px;
}


/** GENERALS */
/** ===================== */


var win = $(window);

// viewport dimensions
var ww = win.width();
var wh = win.height();

$(document).ready(function() {

    // load functions
    imageBG();
    grid();

});

win.on('load', function() {

    setTimeout(function() {
        $('#preloader').addClass('hide');
    }, 1000);

    // load functions
    grid();

});

win.on('resize', function() {

    // viewport dimensions
    ww = win.width();
    wh = win.height();

    // load functions
    grid();
    

});



/** SHOW/HIDE HEADER */
/** ===================== */

function show_hide_header() {

    var last_scroll = 0;

    win.on('scroll', function() {
        if (!$('#about').hasClass('visible')) {
            var scroll = $(this).scrollTop();

            if (scroll > last_scroll) {
                $('#main-header').addClass('hide');
            } else {
                $('#main-header').removeClass('hide');
            }

            last_scroll = scroll;
        }
    });

}



/** BACKGROUND IMAGES */
/** ===================== */

function imageBG() {

    $('.imageBG').each(function() {
        var image = $(this).data('img');

        $(this).css({
            backgroundImage: 'url(' + image + ')',
            backgroundSize: 'cover',
            backgroundPosition: 'center'
        });
    });

}



/** GRID */
/** ===================== */

function grid() {

    var container = $('.grid');

    for (var i = 0; i < container.length; i++) {
        var active_container = $(container[i]);
        var container_width = active_container.width();

        var items = active_container.find('.entry');

        var cols = parseInt(active_container.data('cols'), 10);
        var margin = parseInt(active_container.data('margin'), 10);
        var height = parseFloat(active_container.data('height'));
        var double_height = parseFloat(active_container.data('double-height'));

        if (!margin) margin = 0;
        if (!double_height) double_height = 2;

        // set margins to the container
        active_container.css('margin', -Math.floor(margin / 2) + 'px');

        if (ww >= 1000) {
            if (!cols) cols = 2;
        } else if (ww >= 700) {
            if (cols !== 1) cols = 2;
        } else {
            cols = 1;
        }

        var items_width = Math.floor((container_width / cols) - margin);
        var items_height = Math.floor(items_width * height);
        var items_double_height = items_height * double_height;
        var items_margin = Math.floor(margin / 2);

        items.each(function() {
            $(this).css('width', items_width + 'px');
            $(this).css('height', items_height + 'px');
            $(this).css('margin', items_margin + 'px');

            if (!height) $(this).css('height', 'auto');
            if ($(this).hasClass('w2') && ww >= 500) $(this).css('width', (items_width * 2) + (items_margin * 2) + 'px');  /* Add w2 or h2 to the portfolio item for varoius layout sizes */
            if ($(this).hasClass('h2') && ww >= 500) $(this).css('height', items_double_height + (items_margin * 2) + 'px');
        });

        // isotope
        active_container.isotope({
            itemSelector: '.entry',
            transitionDuration: '.2s',
            hiddenStyle: {
                opacity: 0
            },
            visibleStyle: {
                opacity: 1
            },
            masonry: {
                columnWidth: items_width + margin
                
            }
        });

        $('#filters li a').on('click', function(e) {
            e.preventDefault();

            var filter = $(this).attr('href');

            $('#filters li a').removeClass('active');
            $(this).addClass('active');

            active_container.isotope({
                filter: filter
            });
        });
    };

}
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы