Error when using Slick.js in modal Jquery

Question

Error when using Slick.js in modal Jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm having trouble using Slick JS , I'm creating a list of images I bring from the database with PHP.

<ul id="imagemProdContainer" class="imagemProdContainer">
<?php
  if(!empty($galeria)):
    foreach($galeria as $foto):
?>
 <li data-legenda="<?=$foto->legenda;?>">
  <button href="#" id="btnFechaProd" class="btnFechaProd">X</button>
  <img src="assets/uploads/<?=$foto->imagem;?>" alt="<?=$foto->legenda;?>">
  <span><?=$foto->legenda;?></span>
 </li>
<?php
    endforeach;
 endif;
?>
</ul>

This is a modal that stays with display none, and only appears when I click on a gallery of thumbnails, which in turn is also a slick (thumbnails to click and open the modal):

ButwhenIclickonanyoftheimages,whatreturnsmeisthemodalwiththeimageloadedonlyintheDOM,butnotinthewindowitself:

WhenIhavesomeinteractionlikeresize,movetothenextslideorclicktheimageappears:

HereistheJavaScriptdeclaration:

//GaleriaDetalhe/AmpliaProdutos{(function(){$('#galeriaProdutosli').on('clicktouch',function(event){varmodalImagem=$('#imagemProdContainer'),index=$(this).data('slide');setTimeout(function(){modalImagem.addClass('active');},8);setTimeout(function(){$('#imagemProdContainer').slick('slickGoTo',index);},5);});$('#imagemProdContainer').on('clicktouch',function(event){varidModal=$(this).attr('id');if(idModal==event.target.id){$(this).removeClass('active');}});})();}//FecharGaleriaDetalhes/AmpliaProdutos{(function(){btnFecharDetalhe=$('.btnFechaProd');btnFecharDetalhe.on('clicktouch',function(e){e.preventDefault();$('#imagemProdContainer').removeClass('active');});})();}//SlickGaleriaDetalhe/AmpliaProduto{$('#imagemProdContainer').slick({fade:true,arrow:true});}

Iaddedasettimeouttoseeifitsolvedandnothing,Itriedtochecktheloadoftheslickwithonloadandnothing,I'mdevelopingandthesiteisontheairinatemporarylink,thisisthelinktothepagewiththeprobleminquestion:

link

I hope you can help me.

jquery modal slider

asked by anonymous 13.07.2018 / 04:47

2 answers

0

Fixed with help from friend DVD Final Code:

    // Galeria Detalhe/Amplia Produtos
    {
        (function(){
          $('#galeriaProdutos li').on('click touch', function(event){
            var modalImagem = $('#imagemProdContainer'),
            index = $(this).data('slide');

            $('#imagemProdContainer').slick('slickGoTo', index);
            modalImagem.addClass('active');
            $(window).trigger("resize");


         });

       $('#imagemProdContainer').on('click touch', function (event){
         var idModal = $(this).attr('id');

        if(idModal == event.target.id){
            $(this).removeClass('active');
        }
       });
      })();
    }

Thank you!

13.07.2018 / 14:38

Python WebDriver Selenium does not find the item on the page after loading How to hide / show a div in HTML?

score 0 · Accepted Answer

Because the plugin's documentation does not report any events when the slider is activated, you can trigger a resize event in the click touch events function, without the need to use setTimeout and other codes you entered. / p>

The function of the event should look like this:

// Galeria Detalhe/Amplia Produtos
{
   (function(){
      $('#galeriaProdutos li').on('click touch', function(event){
         var modalImagem = $('#imagemProdContainer');
         modalImagem.addClass('active');                    

         // dispara o resize
         $(window).trigger("resize");
      });

      $('#imagemProdContainer').on('click touch', function (event){
         var idModal = $(this).attr('id');

         if(idModal == event.target.id){
            $(this).removeClass('active');
         }
      });
   })();
}