Как сделать фильтрацию изображений по категориям в самом lightbox?

Здравствуйте, так как сам можно сказать еще чайник во всем этом, прошу помощи специалистов в таком вопросе: есть галерея фотографий с кнопками по категориям. Фильтрацию на кнопки я уже сделал (у меня 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);
    });
});

});
  • Вопрос задан
  • 28 просмотров
Решения вопроса 1
@denmon1911 Автор вопроса
Всем спасибо)
Нашёл ответ сам, но хочу поделится с теми кто столкнется с чем-то таким же.
Просто напросто нужно было при каждом нажатии на ссылку, то есть на миниатюру изображения сделать повторную проверку элементов. Выглядит это так:
$links.click(function (event) {
        event.preventDefault();
        $div = $('.four__galeria').find( " > .portfolio" ).find(" > .active");
        divIndex = $(this).parent().index();
        targetImg = $(this).attr('href');
        replaceImg(targetImg);
        $lightbox.fadeIn();
    });

Понимаю что для кого-то это выглядело просто, но я писал же что еще в этом всем чайник.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы