visualizzare solo foto filtrate

djjunior

Utente Attivo
24 Lug 2004
99
1
8
Salve
ho questo script (si chiama justify gallery) cui ho aggiunto uno script di lightbox cioè glightbox che mi permette di aggiungere secondo le me esigenze titolo e descrizione.
Solo che se uso il filtro delle sezioni offerto da justify gallery e per esempio ci sono 2 foto in una sezione cliccando per aprire le foto con glightbox mi fa vedere quelle selezionate ma anche tutte altre non filtrate
come posso limitare la visualizzazione delle foto del glightbox a solo quelle filtrate?
Grazie
Codice:
<div align="center">
        <button class="enable-a">A</button>
        <button class="enable-b">B</button>
        <button class="enable-c">C</button>
        <button class="enable-d">D</button>     
        <button class="enable-e">E</button>
        <button class="enable-all">TUTTI</button>
    </div>
  
    <div id="filters" style="width:95%;" >

        <a class="glightbox2 d" href="../photos/8083451788_552becfbc7_b.jpg" title="TITOLO" data-glightbox="title: titolo; description: descrizione">
         <img src="../photos/8083451788_552becfbc7_m.jpg" />
        </a>
        <a class="glightbox2 d" href="../photos/7948632554_01f6ae6b6f_b.jpg" title="TITOLO" data-glightbox="title: titolo; description: descrizione">
         <img src="../photos/7948632554_01f6ae6b6f_m.jpg" />
       </a>
        <a class="glightbox2 e" href="../photos/7302459122_19fa1d8223_b.jpg" title="TITOLO" data-glightbox="title: titolo; description: descrizione">
            <img src="../photos/7302459122_19fa1d8223_m.jpg" />
        </a>
        <a class="glightbox2 a" href="../photos/7222046648_5bf70e893a_b.jpg" title="TITOLO" data-glightbox="title: titolo; description: descrizione">
            <img src="../photos/7222046648_5bf70e893a_m.jpg" />
        </a>
        <a class="glightbox2 a" href="../photos/7002395006_29fdc85f7a_b.jpg" title="TITOLO" data-glightbox="title: titolo; description: descrizione">
            <img src="../photos/7002395006_29fdc85f7a_m.jpg" />
        </a>
        <a class="glightbox2 b" href="../photos/7062575651_b23918b11a_b.jpg" title="TITOLO" data-glightbox="title: titolo; description: descrizione">
            <img src="../photos/7062575651_b23918b11a_m.jpg" />
        </a>
        <a class="glightbox2 c" href="../photos/6841267340_855273fd7e_b.jpg" title="TITOLO" data-glightbox="title: titolo; description: descrizione">
            <img src="../photos/6841267340_855273fd7e_m.jpg" />
        </a>
</div>
<script>
             $('#filters').justifiedGallery({
                rowHeight: 200,
                maxRowHeight: null,
                margins: 3,
                border: 0,
                rel: 'filters',
                lastRow: 'nojustify',
                captions: true,
                randomize: false,
                sizeRangeSuffixes: {
                    lt100: '_t',
                    lt240: '_m',
                    lt320: '_n',
                    lt500: '',
                    lt640: '_z',
                    lt1024: '_b'
                }

            });
    </script>
 <script>
        $('.enable-a').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {

            return $(entry).is('.a');

            }});
        });
        $('.enable-b').click(function () {

            $("#filters").justifiedGallery({ filter: function (entry, index, array) {
                  
            return $(entry).is('.b');
          
           }});
        });
        $('.enable-c').click(function () {

            $("#filters").justifiedGallery({ filter: function (entry, index, array) {
            
            return $(entry).is('.c');

            }});
        });
        $('.enable-d').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {

            return $(entry).is('.d');
            }});
        });
        $('.enable-e').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {

                return $(entry).is('.e');
 
            }});
        });
        $('.enable-all').click(function () {
            $("#filters").justifiedGallery({ filter: false });

 
        });
        $('.add-entry-filted-in-d').click(function () {
            $("#filters > a").removeClass('jg-filtered');
            $("#filters > a.d").addClass('jg-filtered');
            $("#filters").justifiedGallery({ filter: false });
        });

        $("#filters").justifiedGallery();
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
 

Discussioni simili