zurb-foundationslick.jszurb-foundation-6zurb-reveal

Set Focus on slick Slide when foundation reveal modal is opened


Slick keybindings left and right only work when the focus is on a slide. When the reveal modal is opened the focus is not on the slide thus the keybindings wont work. I am looking for a way to either set the focus correctly or set more of a global keybinding but keep in mind there may be more than one gallery on a page. Any suggestions would be greatly appreciated.

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

Solution

  • With slick it only works when one of the buttons (prev / next) is focused or one of the slides. It does not work when you focus the whole slideshow

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

    In general there are many parts which cna be simplified using the Foundation Sites API and better logic in the code.

    https://codepen.io/DanielRuf/pen/RQmPbd