Question

jquery

$(".gallery_bg").fancybox({//displaying images

        /*openEffect    : 'elastic',
        closeEffect : 'elastic',
        'cyclic':'true',
        'scrolling':'yes',
        'showNavArrows':'true',
        helpers : {
            title : {
                type : 'inside'
            }
        }
    */
        openEffect  : 'elastic',
    closeEffect : 'elastic',
    showNavArrows        : true,
    closeBtn        : false,
    helpers     : { 
        title   : { type : 'inside' },
        buttons : {}
    }

    });

我已经包含了style.css

#fancybox-left-ico {
left: 20px;
}

#fancybox-right-ico {
right: 20px;
left: auto;
}

包括之后我无法看到下一个和上一个图标？

jsfiddle link

Answer 1

在用户在html页面中点击的锚标记上，确保在锚标记中包含rel =“group”。这应该会自动拉入下一个和上一个按钮。

Answer 2

确保同一文件夹中的fancybox_sprite.png文件不是jquery.fancybox.css文件。

如果要永久显示下一个/上一个箭头，而不是仅显示鼠标悬停，请使用此内联css（在加载/链接到jquery.fancybox.css文件后）

<style type="text/css">
 .fancybox-next span {
  left: auto;
  right: 20px;
 }
 .fancybox-prev span {
  left: 20px;
 }
</style>

注意：这是针对fancybox v2.x（我假设您使用的是因为您在脚本中使用的选项）

Answer 3

我有一些简单的提示，但它对我有用。你必须添加rel =“gallery1”。

<a class="fancybox" href="images/product2_big.jpg" rel="gallery1"><img src="images/open-icon.png" alt="" /></a>
<a class="fancybox" href="images/product2_big.jpg" rel="gallery1"><img src="images/open-icon.png" alt="" /></a>

我希望每个人都可以解决它。感谢

Answer 4

编辑：

在您的测试页上：

检查是否正确包含了jquery.fancybox.js和fancybox.css（没有Type-Exception：此对象没有方法“fancybox”）
检查您的代码以查看图片是否已加载（css中的路径错误，拼写错误...）
检查您的箭头是否正确定位（显示，可见度，位置左，右......）

我敢肯定，这是上述三件事之一。

Answer 5

我知道这是一个老问题，但我不得不添加数据-fancybox-group =＆＃39; 1＆＃39;让按钮自动显示

Answer 6

这是一个老问题，但是我最近遇到了一个问题，即Fancybox3没有显示关闭，下一个和上一个按钮。我以正确的顺序包含了必要的CSS和JS文件，并且我的JS配置正确（没有JS错误）。

要解决此问题，我必须在锚（data-fancybox="gallery"）标记中添加<a>。

下一个和上一个按钮在fancybox jquery中不可见

6 个答案: