0

我正在将 Fancybox 用于大型画廊，但我似乎无法找出正确的方法来使用 tabindex 来专注于单个画廊控件，以进行键盘导航。

jQuery(document).ready(function() {
      $("[data-fancybox]").fancybox({
        baseTpl : '<div class="fancybox-container" role="dialog" tabindex="-1">' +
                    '<div class="fancybox-bg"></div>' +
                    '<div class="fancybox-caption-wrap" style="top:0;padding-top:15px;background:none;">' +
                      '<div class="fancybox-caption" style="border:0;"></div>' +
                    '</div><button class="fancybox-button fancybox-button--left" data-fancybox-previous="" style="top:45%;left:0 !important;z-index:9999999;" title="Previous" tabindex="1"></button>' +
                    '<div class="fancybox-controls" style="bottom:0;top:auto;">' +
                      '<div class="fancybox-infobar" style="width:100%;">' +
                        '<div class="fancybox-infobar__body" style="background:transparent;">' +
                          '<span class="js-fancybox-index"></span>&nbsp;/&nbsp;<span class="js-fancybox-count"></span>' +
                        '</div>' +
                      '</div>' +
                    '</div>' +
                    '<div class="fancybox-controls">' +
                      '<div class="fancybox-buttons">' +
                        '<button class="fancybox-button fancybox-button--close" data-fancybox-close="" title="Close (Esc)" tabindex="1"></button>' +
                      '</div>' +
                    '</div>' +
                    '<div class="fancybox-slider-wrap">' +
                      '<div class="fancybox-slider"></div>' +
                    '</div>' +
                    '<button class="fancybox-button fancybox-button--right" data-fancybox-next="" style="top:45%;right:0 !important;z-index:9999999;position:fixed;" title="Next" tabindex="1"></button>' +
                  '</div>'
      });
    });

知道我做错了什么吗？我已将 tabindex="1" 附加到每个节点并以这种方式对其进行了测试 - 当我在浏览器中使用选项卡时，我似乎得到的只是对标题的关注，但没有任何控件（按钮等）。

http://fancyapps.com/fancybox/3/

4

0 回答 0