Здравствуйте, я подключила grid (кирпичная кладка) для галереи. При загрузке страницы всё работает хорошо, но когда переключаю между галереями через фильтер футер наезжает на галерею, помогите справится с проблемой.. Вот
ссылка где обнаружена данная проблема..
<section class="gallery-section full-width pb_2" style="margin-bottom: 100px;">
<div class="auto-container">
<!--Filter-->
<div class="filters">
<ul class="filter-tabs style-one clearfix anim-3-all">
<li class="filter active" data-role="button" data-filter="all">
Все<!-- Все-->
</li>
<li class="filter" data-role="button" data-filter=".child">
Столы, лавочки<!-- Столы, лавочки-->
</li>
</ul>
</div>
</div>
<div class="images-container">
<div class="grid-row">
<!-- news -->
<section id="news" class="filter-list widget news news-4">
<div class="grid" style="position: relative; height: 1369.08px;">
<div class="item image-box mix mix_all child" style="position: absolute; display: inline-block; left: 0px; top: 0px;">
<div class="inner-box">
<div class="event">
<div class="event-thumb" style="position: unset;">
<figure class="image"><a href="/uploads/all/53" class="lightbox-image"><img src="/uploads/all/53" alt="Лавочка №1"></a></figure>
<a href="/uploads/all/53" class="lightbox-image btn-zoom" title="Лавочка №1 <br /> "><span class="icon fa fa-dot-circle-o"></span></a>
<ul class="event-date">
<li class="date"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
.gallery-section {
/* position: relative; */
background: #ffffff;
padding: 70px 0px 50px;
}
.gallery-section .images-container {
position: relative;
}
.footer {
background-image: url(/armful/img/nebo.jpg);
}
/**/
/* on resize event */
/**/
$(window).resize(function()
{
/**/
/* news */
/**/
$('#news .grid').isotope({
masonry: {columnWidth: $('#news .item').outerWidth()}
});
});
/**/
/* on load event */
/**/
$(function()
{
/**/
/* news */
/**/
var $container = $('#news .grid').isotope({
itemSelector : '.item',
masonry: {columnWidth: $('#news .item').outerWidth()}
});
// // Layout Isotope againe after all images have loaded
$container.imagesLoaded(function(){
$container.isotope();
})
$('#news').on('click', '.more', function()
{
loader = $(this);
page = $(this).data('page');
template = $(this).data('template');
$.get('ajax/' + template + page + '.html').done(function(data)
{
$('#news .grid').isotope('insert', $(data));
loader.data('page', ++page);
$.get('ajax/' + template + page + '.html').fail(function()
{
$('#news .more').addClass('button-disabled');
});
}).fail(function()
{
$('#news .more').addClass('button-disabled');
});
return false;
});
});
Простой
