Gallery with category filter

Question

Gallery with category filter

Navigation

#1 by (0 votes)

3

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

I have several categories on my site and a gallery of images for each. On the front, I'll create buttons with the categories and just below a slider .

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

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

Here are 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><liclass="glide__slide filter c3">
                    <img src="https://fakeimg.pl/300x300/0050ef/?text=category3&font=lobster&font_size=55"></li><liclass="glide__slide filter c1">
                    <img src="https://fakeimg.pl/300x300/a4c400/?text=category1&font=lobster&font_size=55"></li><liclass="glide__slide filter c2">
                    <img src="https://fakeimg.pl/300x300/00aba9/?text=category2&font=lobster&font_size=55"></li><liclass="glide__slide filter c3">
                    <img src="https://fakeimg.pl/300x300/0050ef/?text=category3&font=lobster&font_size=55"></li><liclass="glide__slide filter c4">
                    <img src="https://fakeimg.pl/300x300/d80073/?text=category4&font=lobster&font_size=55"></li><liclass="glide__slide filter c2">
                    <img src="https://fakeimg.pl/300x300/00aba9/?text=category2&font=lobster&font_size=55"></li></ul></div></div><scriptsrc="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 framework front-end carousel

asked by anonymous 01.09.2017 / 22:30

1 answer

Counting the number of IP connections to a web server on port 80. Is the regex correct? I accidentally delete all MySQL users phpMyAdmin [duplicate]

score 0 · Answer 1

You can have an array of objects in these images, and as you change the galleries, map that array and inject the elements according to their quantity. This way you would have a more dynamic page and regardless of the size of the gallery it would always be rendered without much code change. Or you can simply save the values of the img tags, and go overriding their attribute by performing the attribute cleanup when needed.

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, it's something like this:

    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 just point out that injecting elements into the DOM is a hard thing to do all the time, especially if your page loads a lot of content.

This would be a path to your solution, another output is to have all the page content loaded and go changing the display to none / block of each gallery. It depends on what suits you best.