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
Autore Titolo Forum Risposte Data
W visualizzare solo file html e sottocartelle di una cartella PHP 1
trattorino [PHP] funzione per visualizzare solo carattere PHP 2
A Visualizzare minuti con due cifre anche se il valore del tag ne riporta solo uno jQuery 1
A Visualizzare minuti con due cifre anche se il valore del tag ne riporta solo uno jQuery 0
L visualizzare solo 10 record con LIMIT PHP 5
D Joomla: Codice php per visualizzare solo prime righe di un articolo da DB Joomla 4
P Visualizzare solo una porzione di testo in un file txt PHP 3
metalgemini Visualizzare solo tot records Classic ASP 4
I visualizzare lista utenti registrati PHP 1
N php problemi a visualizzare video PHP 3
P come posso visualizzare l'nvr online IP Cam e Videosorveglianza 0
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
M Visualizzare ultima data registrata MS Access 2
G Numero zero null non deve visualizzare nulla PHP 0
M Visualizzare nuove domande in base a risposta precedente PHP 0
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
M visualizzare ip cam in windows IP Cam e Videosorveglianza 0
napuleone visualizzare il codice senza usare gli & HTML e CSS 1
Y Come caricare e visualizzare un'immagine PHP 0
M Visualizzare file PDF con link preso dal DB PHP 0
Alex_70 Visualizzare 2 bandiere PHP 6
Alex_70 Visualizzare anteprima foto in dropdown PHP 2
L Visualizzare tabella all'interno finestra modal PHP 4
P Visual Studio VB.NET Visualizzare un messaggio alla scadenza. .NET Framework 0
J [PHP] Visualizzare risultato query stessa pagina PHP 3
B visualizzare una sola riga Database 3
Alex_70 [PHP] Visualizzare foto tramite select PHP 0
K [ASP] Visualizzare nome del file selezionato Classic ASP 3
M [PHP] Visualizzare un array partendo dal numero 1 e non 0 PHP 5
L [PHP] Visualizzare utente dopo login PHP 0
L [PHP] Visualizzare se una pagina è pingata PHP 1
M [PHP] Visualizzare nell'alert il calcolo PHP 4
D [WordPress] come fare per estrarre dati da un db MySQL tramite una form e visualizzare il risultato WordPress 0
L come visualizzare array di oggetti php PHP 9
S [PHP] visualizzare commento su un prodotto precedentemente selezionato PHP 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
W [PHP] Visualizzare errori su Statements in MySQLi PHP 3
S [javascript] visualizzare/nascondere div Javascript 3
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
W [Javascript] Visualizzare l'href di un link nascosto Javascript 0
L [HTML] Problemi a visualizzare le modifiche eseguite alle pagine del sito. HTML e CSS 2
G [HTML] Visualizzare iframe in un blog non funziona sempre xchė? HTML e CSS 3
tritabit [HTML] Visualizzare stelle tipo rating HTML e CSS 5
A Visualizzare div quando le immagini sono state uploadate con successo (Ajax) Ajax 0
T Visualizzare un Xml su un sito in modo semplice XML 1
F Visualizzare data in formato gg/mm/aaaa da database mysql. PHP 3
M [PHP] Visualizzare record nel db PHP 2
M Visualizzare immagini in PHP - MYSQL PHP 0
M Visualizzare immagini da DB in php PHP 0
ecosito [WordPress] Visualizzare una mappa con i pin dei post tramite GPS? WordPress 4

Discussioni simili