Здравствуйте, так как сам можно сказать еще чайник во всем этом, прошу помощи специалистов в таком вопросе: есть галерея фотографий с кнопками по категориям. Фильтрацию на кнопки я уже сделал (у меня 6 категорий), то есть когда нажимаешь на одну категорию показывает одни фотографии, когда на другую категорию показывает другие фотографии и т.д., а когда нажимаешь на категорию "все" показывает все. Сейчас написал свой Lightbox без подключения каких-то плагинов. Но теперь возникла проблема что когда в Lightbox я нажимаю на кнопку "следующее фото" или "предыдущее фото" они у меня не фильтруются по категориям, а показываются все. Как сделать что бы в Lightbox мне показывались фотографии только с открытой категории, а не все сразу???
Вот файл HTML:
<body>
<div class="four__galeria">
<ul class="galeria__button ">
<li><a class="button" href="#" data-filter="all">Wszystkie zdęcia</a></li>
<li><a class="button" href="#" data-filter="Dania">Dania</a></li>
<li><a class="button" href="#" data-filter="Wnętrze">Wnętrze</a></li>
<li><a class="button" href="#" data-filter="Pizza">Pizza</a></li>
<li><a class="button" href="#" data-filter="Drinki">Drinki</a></li>
<li><a class="button" href="#" data-filter="Sala bankietowa">Sala bankietowa</a></li>
</ul>
<div class="portfolio">
<div class="portfolio__col" id="col" data-cat="Dania">
<a href="img/galery/da1.jpg"><img src="img/da1.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Wnętrze">
<a href="img/galery/w5.jpg"><img src="img/w5.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Drinki">
<a href="img/galery/d5.jpg"><img src="img/d5.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Sala bankietowa">
<a href="img/fsi.jpg"><img src="img/sb1.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Wnętrze">
<a href="img/galery/w1.jpg"><img src="img/w1.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Wnętrze">
<a href="img/galery/w2.jpg"><img src="img/w2.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Wnętrze">
<a href="img/galery/w3.jpg"><img src="img/w3.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Sala bankietowa">
<a href="img/galery/3.jpg"><img src="img/3.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Drinki">
<a href="img/galery/d1.jpg"><img src="img/d1.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Drinki">
<a href="img/galery/d2.jpg"><img src="img/d2.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Pizza">
<a href="img/galery/p1.jpg"><img src="img/p1.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Pizza">
<a href="img/galery/p2.jpg"><img src="img/p2.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Pizza">
<a href="img/galery/p3.jpg"><img src="img/p3.png" alt=""></a>
</div>
<div class="portfolio__col" id="col" data-cat="Pizza">
<a href="img/galery/p4.jpg"><img src="img/p4.png" alt=""></a>
</div>
</div>
<div class="lightbox">
<div class="overlay">
<img src="#">
</div>
<div class="figure">
<span class="prev">←</span>
<span class="next">→</span>
</div>
</div>
</div>
</body>
Вот файл CSS:
.four__galeria{
text-transform: uppercase;
text-align: center;
padding-bottom: 40px;
}
.galeria__button{
padding-bottom: 40px;
}
.galeria__button li{
display: inline-block;
padding: 0px 5px;
}
.button{
cursor: pointer;
}
.button{
background: #cccccc;
font-size: 20px;
color: #333333;
padding: 5px 10px;
border: 0;
border-radius: 2px;
}
.button:hover{
color: #ff0000;
}
.button:active{
background: #ff0000;
color: #ffffff;
}
.portfolio{
display: flex;
flex-wrap: wrap;
}
.portfolio__col{
flex-basis: 270px;
padding: 10px;
}
.portfolio__col img{
border: 1px solid #ffffff;
border-radius: 5px;
}
.portfolio__col img:hover{
border: 1px solid #ff0000;
opacity: 0.9;
}
.hide{
display: none;
}
.lightbox{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
overflow-y: inherit;
}
.overlay{
position: absolute;
z-index: -1;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.figure {
display: inline-block;
text-align: center;
position: relative;
z-index: 1;
text-align: center;
padding-top: 610px;
}
.lightbox img{
padding-top: 10px;
max-width: 1200px;
max-height: 620px;
}
.next, .prev {
font-size: 48px;
font-weight: normal;
color:rgb(255, 255, 255);
cursor: pointer;
padding: 0px 20px;
}
И вот собственно сам файл JavaScript с применением JQuery :
$(function () {
let filter = $("[data-filter]");
$("[data-cat]").addClass("active")
filter.on("click", function (event) {
event.preventDefault();
let cat = $(this).data('filter');
if (cat === 'all') {
$("[data-cat]").addClass('active');
$("[data-cat]").removeClass('hide');
} else {
$("[data-cat]").each(function () {
let workcat = $(this).data('cat');
if (workcat !== cat) {
$(this).addClass('hide');
$(this).removeClass('active');
} else {
$(this).removeClass('hide');
$(this).addClass('active');
}
});
}
});
$(function () {
var $div = $('.four__galeria').find( " > .portfolio" ).find(" > .active"),
$links = $div.find('> a'),
$lightbox = $('.lightbox'),
$overlay = $('.overlay'),
$prev = $('.prev'),
$next = $('.next'),
divIndex,
targetImg;
function replaceImg(src) {
$lightbox.find('img').attr('src', src);
}
function getHref(index) {
return $div.eq(index).find('> a').attr('href');
}
$links.click(function (event) {
event.preventDefault();
divIndex = $(this).parent().index();
targetImg = $(this).attr('href');
replaceImg(targetImg);
$lightbox.fadeIn();
});
$overlay.click(function () {
$lightbox.fadeOut();
});
$next.click(function () {
if ((divIndex + 1) < $div.length) {
targetImg = getHref(divIndex + 1);
divIndex++;
} else {
targetImg = getHref(0);
divIndex = 0;
}
replaceImg(targetImg);
});
$prev.click(function () {
if ( (divIndex) > 0) {
targetImg = getHref(divIndex - 1);
divIndex--;
} else {
targetImg = getHref($div.length - 1);
divIndex = $div.length - 1;
}
replaceImg(targetImg);
});
});
});
Простой
