在fancybox jquery中看不到下一个和上一个按钮

Posted 2023-02-25

技术标签:

【中文标题】在fancybox jquery中看不到下一个和上一个按钮【英文标题】：Next and previous button not visible in fancybox jquery 【发布时间】：2012-02-07 08:05:13 【问题描述】：

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

【问题讨论】：

请在jsfiddle.net上拉小提琴 okies 将添加到 jsfiddle.net @diEcho 添加了 jsfiddle.net 链接..... 伙计们，fiddle 无济于事，因为我们需要查看所有的 fancybox 依赖项（图像、css 文件等）。在您自己的网络空间上创建一个带有（工作？）关闭按钮的演示页面！ @dude 我编辑了我的答案，检查 3 点，这应该会有所帮助。 【参考方案1】：

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

【讨论】：

【参考方案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（我假设您正在使用它，因为您在脚本中使用的选项）

【讨论】：

【参考方案3】：

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

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

希望大家都能解决。谢谢

【讨论】：

【参考方案4】：

编辑：

在您的测试页面上：

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

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

【讨论】：

是的，我确信图标和路径是正确的......因为关闭按钮出现在同一个文件夹中请提供演示页面以获得更多帮助。【参考方案5】：

我知道这是一个老问题，但我必须添加 data-fancybox-group='1' 才能让按钮自动显示

【讨论】：

【参考方案6】：