Apre il lighrtbox fuori pagina

[djjunior]

Salve
ho questo script:

    <link rel="stylesheet" href="https://www.redshopping.it/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)">Characters</button>
        <button class="enable-b" id="b" onclick="callEnhanced(this.id)">Environments</button>
        <button class="enable-c" id="c" onclick="callEnhanced(this.id)">Props</button>
        <button class="enable-d" id="d" onclick="callEnhanced(this.id)">Covers</button>     
        <button class="enable-e" id="e" onclick="callEnhanced(this.id)">Projects</button>
        <button class="enable-all" id="all" onclick="callEnhanced(this.id)">All</button>
    </div>
    <br/>


<div align="center">
<div id="filtersa" style="width:95%;">


<a href="IMG/IMG1.jpg" class="glightbox filter a" title="TITOLO" data-glightbox="title: titolo; description: descrizione" >
<img src="IMG/IMG1.jpg"  />
</a>
<a href="IMG/IMG2.jpg" class="glightbox filter a" title="TITOLO" data-glightbox="title: titolo; description: descrizione" >
<img src="IMG/IMG2.jpg>"  />
</a>
<a href="IMG/IMG3.jpg" class="glightbox filter b" title="TITOLO" data-glightbox="title: titolo; description: descrizione" >
<img src="IMG/IMG3.jpg"  />
</a>
<a href="IMG/IMG4.jpg" class="glightbox filter c" title="TITOLO" data-glightbox="title: titolo; description: descrizione" >
<img src="IMG/IMG4.jpg"  />
</a>
<a href="IMG/IMG5.jpg" class="glightbox filter e" title="TITOLO" data-glightbox="title: titolo; description: descrizione" >
<img src="IMG/IMG5.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');
			$("#filtersa > a.a").addClass('glightbox');    
        });
        $('.enable-b').click(function () {


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


            $("#filtersa").justifiedGallery({ filter: '.c' });
             $("#filtersa > a").removeClass('glightbox');
			 $("#filtersa > a.c").addClass('glightbox');          
        });
      
        $('.enable-e').click(function () {
            $("#filtersa").justifiedGallery({ filter: '.e' });
	         $("#filtersa > a").removeClass('glightbox');
			 $("#filtersa > a.e").addClass('glightbox');   
        });
        
        $('.enable-d').click(function () {
            $("#filtersa").justifiedGallery({ filter: '.d' });
	         $("#filtersa > a").removeClass('glightbox');
			 $("#filtersa > a.d").addClass('glightbox');       
           
        });
         $('.enable-all').click(function () {
            $("#filtersa").justifiedGallery({ filter: false });
			$("#filtersa > a").addClass('glightbox');
        });
    </script>
<script src="https://www.redshopping.it/glightbox.min.js" ></script>
<script>


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


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


      if (check) {
        item.classList.remove('d-none');
        item.classList.add('fadeIn','glightbox');
      } else {
        item.classList.add('d-none');
        item.classList.remove('fadeIn','glightbox');
      }
    }
  })
}


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');
      }
    }
  })
}






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

Quando clicco sull'immagine per aprirla con il glightbox l'immagine (con relativa descrizione) si apre più grande del browser, tagliando la parte alta e quella bassa, ho provato ad effettuare modifiche sul css dello script senza ottenere risultato, potete aiutarmi? grazie

[ciro78]

Ciao,
sarebbe utile un link alla pagina di prova.

Così è difficile aiutare