打开基础揭示模态时，将重点放在光滑的幻灯片上

Question

左右右键单击时，仅当焦点放在幻灯片上时起作用。当揭示模态打开时，焦点不是放在幻灯片上，因此钥匙夹无法工作。我正在寻找一种方法来正确设置焦点或设置更多的全局钥匙夹，但请记住，页面上可能有一个以上的画廊。任何建议都将不胜感激。

$('.galleryGroup').each(function(){
    if (typeof $(this).data('gallery') !== 'undefined'){ 
        var id = $(this).data('gallery');
        // Open reveal on click
        $('.galleriesImage'+id).click(function(){
            // Open Reveal Modal
            $('#galleriesReveal'+id).foundation('open');
            // Cancel Any previously created reveals    
            $(window).on('closed.zf.reveal',function(){ $('#slides'+id).slick('unslick'); });
            // Set the inital slide 
            if (typeof jQuery(this).data('ref') !== 'undefined'){ var iid=jQuery(this).data('ref'); }else{var iid=0;}
            // Initiate slideshow
            $('#slides'+id).slick({infinite: true,dots: false,lazyLoad: 'ondemand',autoplay: false,initialSlide: iid});
            // Set focus on the slideshow
            $('something').focus();
        }).css('cursor','pointer');
    }
});

Answer 1

slick slick它仅在一个按钮(prev/next(聚焦或幻灯片之一时起作用。当您聚焦整个幻灯片

时，它不起作用

$(document).ready(function(){
  $(document).foundation();
  $('.galleryGroup').each(function(){
    if (typeof $(this).data('gallery') !== 'undefined'){ 
      var id = $(this).data('gallery');
      // Open reveal on click
      $('.galleriesImage'+id).click(function(){
        // Open Reveal Modal
        $('#galleriesReveal'+id).foundation('open');
        // Cancel Any previously created reveals    
        $(window).on('closed.zf.reveal',function(){ $('#slides'+id).slick('unslick'); });
        // Set the inital slide 
        if (typeof jQuery(this).data('ref') !== 'undefined'){ var iid=jQuery(this).data('ref'); }else{var iid=0;}
        // Initiate slideshow
        $('#slides'+id).slick({infinite: true,dots: false,lazyLoad: 'ondemand',autoplay: false,initialSlide: iid});
        // Set focus on the first slide
        //setTimeout(function() {
          $('#slides'+id+' .slick-slide').eq(0).focus()
        //}, 0);
      }).css('cursor','pointer');
    }
  });
});

通常，使用基础网站API简化了CNA的许多部分，并且在代码中使用更好的逻辑。

https://codepen.io/danielruf/pen/rqmpbd