Ссылка на страницу с галереей стилей фильтра данных - PullRequest
0 голосов
/ 24 января 2020

Я пытался найти решения по всем остальным вопросам, и люди предлагали jQuery / Javascript ответ для некоторых, но не могли заставить что-либо работать.

Вот сценарий.

это проекты. php:

    <div class="row text-center">
                <div class="col-md-4">
                    <button class="btn btn-default filter-button" data-filter="past">Past 
                 Projects</button>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-default filter-button" data-filter="present">Present 
                  Projects</button>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-default filter-button" data-filter="future">Future 
                 Projects</button>
                </div>
            </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>

        <!--        Present Projects -->
        <!--                      -->
        <!--            Start     -->
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>


        <!--        Future Projects -->
        <!--                      -->
        <!--            Start     -->
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter future">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter future">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter future">
            <img src="http://fakeimg.pl/365x365/" class="img-fluid">
        </div>

Jquery

    $(".filter-button").click(function(){
    var value = $(this).attr('data-filter');

    if(value == "all")
    {
        //$('.filter').removeClass('hidden');
        $('.filter').show('1000');
    }
    else
    {
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');

    }
});

if ($(".filter-button").removeClass("active")) {
    $(this).removeClass("active");
}
$(this).addClass("active");

Затем на другой странице, ссылающейся на страницу проектов, я хотел бы иметь возможность вернуться к ней фильтр данных либо прошлое / будущее / настоящее, как показано ниже. Я хочу, чтобы это открывало страницу проекта только с отображением галереи в прошлом. В настоящее время у меня есть кнопки, которые

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="projects.php">Projects</a></li>
                    <li class="breadcrumb-item"><a href="projects.php?past">Past</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Bayard Place</li>
                </ol>
            </nav>
...