/ / Nastavte zaostrenie na hladký snímok pri otvorení nadácie s otvoreným modálnym - zurb-foundation, slick.js, zurb-foundation-6, zurb-reveal

Nastavte zaostrenie na hladký snímok, keď sa otvorí nadácia modál otvorený - zurb-foundation, slick.js, zurb-foundation-6, zurb-reveal

Slickové klávesové skratky vľavo a vpravo fungujú iba vtedyzameranie sa na snímku. Keď sa objaví modálne odhalenie, zaostrenie sa nenachádza na snímke, takže klávesové spojenie nebude fungovať. Hľadám spôsob, ako nastaviť správne zaostrenie, alebo nastaviť viac globálnej klávesnice, ale majte na pamäti, že na stránke môže byť viac ako jedna galéria. Akékoľvek návrhy by boli veľmi ocenené.

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

odpovede:

1 pre odpoveď č. 1

S klopou to funguje len vtedy, keď jedno z tlačidiel (prev / ďalšia) je zaostrené alebo jedna z snímok. Nepôsobí to, keď zaostríte celú prezentáciu

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

Vo všeobecnosti existuje veľa častí, ktoré je možné zjednodušiť pomocou rozhrania API nadácie a lepšej logiky v kóde.

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