Filter images by class

Wappler General Need Help
1

Hi everybody. I would like to replicate the gallery section of this page:
http://www.miolaboratorio.it/photox/index.php
When you click on “all”, “free”, “new” or “pro” the images are filtered by class.
Let me explain:
this is the code of a picture:

                    <div class="filter new">
                        <img src="images/img1.jpeg" width="380">
                    </div>

each image is wrapped into a div with two classes (filter and new for example).
The wollowing is the code for a link above the images

                <li class="list-inline-item gallery-list-item active-item" data-filter="all">All <span class="mx-3 mx-md-5 text-muted">/</span></li>

At least there is a script

  $('.gallery-list-item').click(function () {
    let value = $(this).attr('data-filter');
    if (value === 'all') {
      $('.filter').show(300);
    } else {
      $('.filter').not('.' + value).hide(300);
      $('.filter').filter('.' + value).show(300);
    }
  });

Is it possible to replicate this effect by wappler without writing code?
This page issmomething like an exercise. I can’t write javascipt.
That’s why 'm asking if it’s possible to replicate it by wappler.
ATTENTION: I already know how to do something like this effect using dynamic data. The example page is made with static data

2

Hi,
You can try to use variables instead of classes.
Create a variable varFilter and set its value to say ‘all’ by default and on click of the filter buttons, set value as per the button.
Then, configure the image list to look something like:

<div dmx-show="varFilter.value == 'new' || varFilter.value == 'all'">
    <img src="...">
</div>
<div dmx-show="varFilter.value == 'free' || varFilter.value == 'all'">
    <img src="...">
</div>
3

Thank you Sid.
How can I create the varfilter variable? I mean do I have to create it in server connect or in app (global, query or template data)?

4

Well as you are using static data then add it in App Connect:

Screenshot 2021-03-17 at 9.35.37
Screenshot 2021-03-17 at 9.35.37805×653 66.6 KB

Then use the show/hide dynamic attribute to only show specific images when the variable has a specific value set.

1 Like
5

Thank you Sid and Teo.
These are pages.
Very similar

http://www.miolaboratorio.it/photox/index.php
made by wappler but using only bootstrap and no wappler apps

http://www.miolaboratorio.it/photox/index_w.php
made by wappler when possible