miromannino / Justified-Gallery

Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.
http://miromannino.github.io/Justified-Gallery/
MIT License
1.68k stars 299 forks source link

Filtering with lightboxes (swipebox) #299

Open Brodiero opened 5 years ago

Brodiero commented 5 years ago

Hi, firstly thank you for your great work on a fantastic gallery. This is not so much an issue as a botched solution so forgive me as I'm not a coder. I noticed that when filtering, the whole gallery still appeared when using swipebox, as the 'swipebox' class is already applied to image anchors. I pieced together a workaround from the original script below, but i'm sure it could be done better. Any input or thoughts?

 $('.enable-a').click(function () {
            $("#filters").justifiedGallery({ filter: '.a' });
             $("#filters > a").removeClass('swipebox');
             $("#filters > a.a").addClass('swipebox');

        });
        $('.enable-b').click(function () {
            $("#filters").justifiedGallery({ filter: '.b' });
            $("#filters > a").removeClass('swipebox');
             $("#filters > a.b").addClass('swipebox');
        });
        $('.enable-c').click(function () {
            $("#filters").justifiedGallery({ filter: '.c' });
            $("#filters > a").removeClass('swipebox');
             $("#filters > a.c").addClass('swipebox');
        });
        $('.enable-d').click(function () {
            $("#filters").justifiedGallery({ filter: '.d' });
                $("#filters > a").removeClass('swipebox');
             $("#filters > a.d").addClass('swipebox');
        });
        $('.enable-z').click(function () {
            $("#filters").justifiedGallery({ filter: '.z' });
                    $("#filters > a").removeClass('swipebox');
             $("#filters > a.z").addClass('swipebox');
        });
        $('.enable-all').click(function () {
            $("#filters").justifiedGallery({ filter: false });
            $("#filters > a").addClass('swipebox');

        });

PS - animated/easing filtering would be a great addition...