visualizzare solo le foto filtrate

[djjunior]

Salve
ho questo script (justify gallery) cui ho aggiunto allor 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.
come posso limitare la visualizzazione delle foto del glightbox a solo quelle filtrate?
Grazie

<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 d" 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>

[djjunior]

nessun aiuto?

[ciro78]

ciao,
prova a rimuovere la classe glightbox2


Se non bastasse prova a rimuovere il lightbox e riapplicarlo dopo il filtro.

[djjunior]

Grazie ciro per la tua risposta ma non va neanche come mi hai suggerito tu.
Di seguito ho modificato lo script, trovando alcuni suggerimenti sul web, togliendo e facendo inserire la classe glightbox-ldd , o farla inserire ma non va neanche che cos'altro posso fare? grazie

    <link rel="stylesheet" href="css/glightbox.css"  />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>
<div align="center">
        <button class="enable-a" id="a" onclick="callEnhanced(this.id)">A</button>
        <button class="enable-b" id="b" onclick="callEnhanced(this.id)">B</button>
        <button class="enable-c" id="c" onclick="callEnhanced(this.id)">C</button>
        <button class="enable-d" id="d" onclick="callEnhanced(this.id)">D</button>     
        <button class="enable-e" id="e" onclick="callEnhanced(this.id)">E</button>
        <button class="enable-all" id="all" onclick="callEnhanced(this.id)">All</button>
    </div>
<div align="center">
<div id="filtersa" style="width:95%;">


<a href="images1.jpg" class="glightbox-ldd show filter2 filter a" data-glightbox="title: titolo; description: descrizione">
<img src="images1.jpg" />
</a>


<a href="images2.jpg" class="glightbox-ldd show filter2 filter a" data-glightbox="title: titolo; description: descrizione">
<img src="images2.jpg" />
</a>


<a href="images3.jpg" class="glightbox-ldd show filter2 filter b" data-glightbox="title: titolo; description: descrizione">
<img src="images3.jpg" />
</a>


<a href="images4.jpg" class="glightbox-ldd show filter2 filter c" data-glightbox="title: titolo; description: descrizione">
<img src="images4.jpg" />
</a>


<a href="images5.jpg" class="glightbox-ldd show filter2 filter c" data-glightbox="title: titolo; description: descrizione">
<img src="images5.jpg" />
</a>


<a href="images6.jpg" class="glightbox-ldd show filter2 filter d" data-glightbox="title: titolo; description: descrizione">
<img src="images6.jpg" />
</a>


</div>
</div>


<script>
             $('#filtersa').justifiedGallery({
                rowHeight: 300,
                maxRowHeight: null,
                margins: 3,
                border: 0,
                lastRow: 'nojustify',
                captions: true,
                randomize: false,
            });
   $('.enable-a').click(function () {
            $("#filtersa").justifiedGallery({ filter: '.a' });
	        $("#filtersa > a").removeClass('glightbox-ldd');
			$("#filtersa > a.a").addClass('glightbox-ldd');    
        });
        $('.enable-b').click(function () {


            $("#filtersa").justifiedGallery({ filter: '.b'  });
             $("#filtersa > a").removeClass('glightbox-ldd');
			 $("#filtersa > a.b").addClass('glightbox-ldd');         
        });
        $('.enable-c').click(function () {


            $("#filtersa").justifiedGallery({ filter: '.c' });
             $("#filtersa > a").removeClass('glightbox-ldd');
			 $("#filtersa > a.c").addClass('glightbox-ldd');          
        });
      
        $('.enable-e').click(function () {
            $("#filtersa").justifiedGallery({ filter: '.e' });
	         $("#filtersa > a").removeClass('glightbox-ldd');
			 $("#filtersa > a.e").addClass('glightbox-ldd');   
        });
        
        $('.enable-d').click(function () {
            $("#filtersa").justifiedGallery({ filter: '.d' });
	         $("#filtersa > a").removeClass('glightbox-ldd');
			 $("#filtersa > a.d").addClass('glightbox-ldd');       
           
        });
         $('.enable-all').click(function () {
            $("#filtersa").justifiedGallery({ filter: false });
			$("#filtersa > a").addClass('glightbox-ldd');
        });
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.js" integrity="sha512-B15xrHLAFUGC5w4jO8iQtCLLaliORCeLUCewc3Pjrtzw6y2ZXECO6bHalENItF5p/yPpz02fGL/luT/Bs17WnA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>


var lightboxDescription = GLightbox({
  selector: '.glightbox-ldd'
});




function call(id) {
  const items = Array.from(document.getElementsByClassName("filter"));
  items.map(function (item, index) {
    console.log(item);
    if (id === "all") {
      item.classList.add('glightbox-ldd');
      setTimeout(clean,500);
    } else {
      const check = items[index].classList.contains(id);
      console.log(check);


      if (check) {
        item.classList.add('glightbox-ldd');
      } else {
        item.classList.remove('glightbox-ldd');
      }
    }
  })
}


function clean() {
  const items = Array.from(document.getElementsByClassName("filter"));
  items.map(function (item, index) {
    item.classList.remove('fadeIn');
  })
}




function callEnhanced(id) {
  call(id); // Here we call your current call method
  const items = Array.from(document.getElementsByClassName("filter2")); // here we filter)
  items.map(function (item, index) {
    if (id === "all") {
      item.classList.add('show');
    } else {
      var check = items[index].classList.contains(id);
      if (check) {
        item.classList.add('show');
      } else {
        item.classList.remove('show');
 
      }
    }
  })
}
</script>