0

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');
    }
});
James
  • 702
  • 2
  • 15
  • 39

1 Answers1

2

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

  • I understand how to watch the reveal. The coding issue comes in where you have the `//run focus here`. – James Feb 26 '18 at 15:38
  • You can se $(this).find(...) also I suggest switching to Swiper which is much better. –  Feb 26 '18 at 19:37
  • $(this).find() what lol. There are 30 elements to try to focus to. Swiper is not better as its code is bloated with to many features which clients dont use. This means slower load times. Slick loads in half the time and is already built into our premium theme. – James Feb 27 '18 at 23:18
  • Swiper can be used in a modular way (ES6). –  Feb 28 '18 at 06:22
  • As I said Im not using Swiper, so you can either help with the question on slick or stop commenting. – James Mar 01 '18 at 13:53
  • I hae created a codepen for you. The issue is in slick which does nothing when the slideshow is focused. You should focus the first slide. –  Mar 04 '18 at 16:16
  • slick is still almost unmaintained and with many bugs. When we switched to Swiper we could also focus the whole slideshow in our projects. https://github.com/kenwheeler/slick/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+focus –  Mar 04 '18 at 16:20
  • Thanks! I was trying to focus the whole slider. `$( '.slick-current', slider ).focus();` worked for me. – Gavin Dec 05 '19 at 15:15