/ / Set Fokus auf Slick Slide, wenn Fundament offenbaren Modal geöffnet ist - Zurb-Stiftung, slick.js, Zurb-Stiftung-6, zub-zeigen

Setzen Sie den Fokus auf Slick Slide, wenn Foundation Reveal Modal geöffnet wird - zurb-foundation, slick.js, zurb-foundation-6, zurb-layer

Slick Keybindings links und rechts funktionieren nur wennDer Fokus liegt auf einer Folie. Wenn das Laibungsmodal geöffnet ist, liegt der Fokus nicht auf der Folie, so dass die Tastenbelegungen nicht funktionieren. Ich bin auf der Suche nach einer Möglichkeit, den Fokus richtig zu setzen oder eine globale Tastenkombina- tion einzurichten, aber bedenke, dass es mehr als eine Galerie auf einer Seite gibt. Irgendwelche Vorschläge würden sehr geschätzt werden.

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

Antworten:

1 für die Antwort № 1

Mit Slick funktioniert es nur, wenn eine der Tasten (prev / next) oder eine der Folien fokussiert ist. Es funktioniert nicht, wenn Sie die gesamte Diashow fokussieren

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

Im Allgemeinen gibt es viele Teile, die mit der Foundation Sites API und einer besseren Logik im Code vereinfacht werden können.

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