Здравствуйте! Помогите плиз настроить Isotope фильтр. Все изображения должны иметь тот же высоту, по исходнику.
а данном случае isotop из них делает в основном квадратом формате.
Сейчас
Моя версия.
Ссылка на сайт
/* 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
});
});
};
}