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