Gallery with category filter

Asked

Viewed 869 times

4

I need to implement the following: category buttons + category gallery

I have several categories on my site and an image gallery for each one. On the front, I will create buttons with the categories and just below a slider.

I need to click on a category button, stay on the slider, only the images referring to that category.

Ps: ignore the 'all' button because it will not have

Follow the codes I already have:

$("#Glide").glide({
    type: "carousel",
    autoplay: 0
});

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

    if (value == "all") {
        $('.filter').show();
    }
    else {
        $(".filter").not('.' + value).hide();
        $('.filter').filter('.' + value).show();

    }
});
.glide {
    margin: 0 auto;
    width: 300px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">        
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/glide.core.css">        
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/glide.theme.css">        
    <title>Gallery Filter By Category</title>
</head>

<body>
    <div align="center">
        <button class="filter-button" data-filter="all">All</button>
        <button class="filter-button" data-filter="c1">Category 1</button>
        <button class="filter-button" data-filter="c2">Category 2</button>
        <button class="filter-button" data-filter="c3">Category 3</button>
        <button class="filter-button" data-filter="c4">Category 4</button>
    </div>

    <br>
    <br>
    <br>
    <br>
    <br>

    <div id="Glide" class="glide">

        <div class="glide__arrows">
            <button class="glide__arrow prev" data-glide-dir="<">prev</button>
            <button class="glide__arrow next" data-glide-dir=">">next</button>
        </div>

        <div class="glide__wrapper">
            <ul class="glide__track">
                <li class="glide__slide filter c1">
                    <img src="https://fakeimg.pl/300x300/a4c400/?text=category1&font=lobster&font_size=55">
                </li>
                <li class="glide__slide filter c3">
                    <img src="https://fakeimg.pl/300x300/0050ef/?text=category3&font=lobster&font_size=55">
                </li>
                <li class="glide__slide filter c1">
                    <img src="https://fakeimg.pl/300x300/a4c400/?text=category1&font=lobster&font_size=55">
                </li>
                <li class="glide__slide filter c2">
                    <img src="https://fakeimg.pl/300x300/00aba9/?text=category2&font=lobster&font_size=55">
                </li>
                <li class="glide__slide filter c3">
                    <img src="https://fakeimg.pl/300x300/0050ef/?text=category3&font=lobster&font_size=55">
                </li>
                <li class="glide__slide filter c4">
                    <img src="https://fakeimg.pl/300x300/d80073/?text=category4&font=lobster&font_size=55">
                </li>
                <li class="glide__slide filter c2">
                    <img src="https://fakeimg.pl/300x300/00aba9/?text=category2&font=lobster&font_size=55">
                </li>
            </ul>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/glide.js"></script>    
    
</body>

</html>

javascript css front-end framework carousel

  • Will you upload all the images at once and then filter, or will you change the content of the gallery by clicking the buttons? Have a look at that link see if it’s more or less the idea.

  • A: That’s about it, but in the case of this example, it exchanges loose images, I need mine to work inside the slider the problem is to set javascript for the slider to work

  • Join the idea this one with the other’s filter logic I believe is ideal.

1 answer

1

You can have an array of objects from these images, and as you change the galleries, go mapping this array and injecting the elements according to their quantity. This way you would have a page more dynamic and regardless of the size of the gallery it would always be rendered without much change in the code. Or you can simply save the values of the img tags, and go on replacing their attribute, cleaning the attributes when necessary.

document.getElementsByTagName("img").map(function(item){ 
    item.setAttribute("src","novo valor")
})

This would be a way to change the attribute without injecting elements, if you want to inject elements into the DOM, is something in this sense:

    var arrayImages = ["img1.jpg","img2.jpg","img3.jpg","img4.jpg"]
    var galeria = document.getElementById("galeriaId")
    var arrayElementImages = []
    for(var i = 0; i < arrayImages.length; i++){
        var imgContainer = document.createElement("div")
        var imgElement = document.createElement("img")
        imgElement.setAttribute("src", arrayImages[i])
        imgContainer.appendChild(imgElement)
        galeria.appendChild(imgContainer)
    }

I only point out that injecting elements into the DOM is a heavy thing to do all the time, especially if your page carries a lot of content.

This would be a way to your solution, another way out is to have all the content of the page loaded and go changing the display to None/block of each gallery. Depends on what suits you best.

  • Here is a similar example: https://jsfiddle.net/tetbdkpe/

Browser other questions tagged javascript css front-end framework carousel

You are not signed in. Login or sign up in order to post.