如何使用 fancybox 按钮助手 + fancybox 缩略图助手?

2024-01-08

我需要同时使用它们(fancybox按钮助手和缩略图助手)

我一次只能使用其中一个。

这些是每个函数的示例:http://fancyapps.com/fancybox/#examples http://fancyapps.com/fancybox/#examples

已经尝试使用这两个类:

<a class="fancybox-buttons fancybox-thumbs"    

但这不起作用... 一次只有一个,例如:

<a class="fancybox-buttons"    

or

<a class="fancybox-thumbs"     

.

这些是每个的 javascript:

            /*
            Button helper. Disable animations, hide close button, change title type and content
        */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
            Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
        */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : { 
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

    });    

Thanks


您只需要一个脚本即可使用这两个脚本,因此只需一个脚本class在你的html应该像

<a class="fancybox" ...

然后是脚本:

$('.fancybox').fancybox({
 openEffect  : 'none',
 closeEffect : 'none',
 prevEffect : 'none',
 nextEffect : 'none',
 closeBtn  : false,
 arrows    : false,
 nextClick : true,
 helpers : {
  title : {
   type : 'inside'
  },
  buttons : {},
  thumbs : {
   width : 50,
   height : 50
  }
 },
 afterLoad : function() {
  this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
 }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 fancybox 按钮助手 + fancybox 缩略图助手? 的相关文章

  • 动态添加案例到交换机

    我需要动态地将案例添加到交换机 我希望用户能够添加项目 并且每个项目都需要它自己的开关盒 您可以使用带有回调函数的对象 You can have initial cases var callbacks something gt 42 and
  • Setinterval随着指数时间减少

    我有一个带有 setinterval 的 mousedown 事件 我希望间隔时间是可变的 所以第一个是 500 第二个是 500 2 250 等等 有什么建议吗 plus mousedown function e increment 20
  • 如何在jquery中每4秒添加和删除一个类

    由于某种原因 这并不是每 4 秒在具有 post 类的元素上添加和删除一个新类 jquery 正确加载 就像这样 chrome 显示代码没有错误 document ready function post addClass display d
  • 未捕获的 TypeMismatchError:无法在“CanvasRenderingContext2D”上执行“drawImage”

    我对以下代码片段有疑问 var o inserted motive find span contains document documentElement o 0 b fillText m i h b drawImage d i h e f
  • Jquery UI 可调整大小的问题超出了遏制范围(也使用了可拖动)

    我面临的问题是 div 的可调整大小 当我将它与 Draggable 一起使用时 它会出现问题并且无法调整其宽度方向的大小 如果我单独使用可调整大小 那就没问题了 但我需要让它与可拖动功能一起使用 请建议 单击演示的 jsFiddle 链接
  • 如何按多个项目搜索/过滤列表?

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l
  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 如何在jqplot中显示饼图之外的标签?

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以
  • 雷达扫描仪旋转效果

    我正在尝试找出一个可能的解决方案 如何使用 jQuery 和 CSS 创建雷达扫描仪效果 本质上 半透明三角形光束将围绕 div 的中点旋转 这可以用 jQuery 实现吗 还是我应该采取其他方法 我不喜欢使用 gif 动画 你不需要 jQ
  • 输入类型=图像 - onclick(),将触发其事件,但在 jquery 中的函数上表现不佳

    我认为这可能是两篇文章 2个问题 所以如果你对此发表评论 我会将它们分开 主要问题实际上是 我怎样才能为按钮设置图像背景 简单且正确 我想现在我可以确定这些事实了 因为我在将图像设置为按钮背景时遇到了 小 问题 我想 好吧 如果很难设置的话
  • Jquery:将链接标记为已访问而不打开它们?

    我无意仅仅更改链接 我听说这是不可能的 但如果不是 我很想知道如何更改 如果需要的话 我可以将其添加到浏览器历史记录中 我想遍历所有 a 位于页面上并将其状态更改为已访问 例如 a each function mark as visited
  • jquery select 如果 option.value 等于某个值,则标记为选中

    我有一些关于 jquery 选择的问题 就我而言 如果option value等于某物 标记 aselected为了它 在线代码在这里 http jsfiddle net WnEfJ 再次重复代码 它引起了Uncaught TypeErro
  • 下划线反跳与参数

    假设我有这个事件处理程序 var mousewheel function e blah 但是 我想消除它 所以我这样做 它按预期工作 var mousewheelDebounced debounce mousewheel 500 docum
  • 如何重新加载 jquery dropkick 对象

    我使用一个简单的选择列表和 jquery dropkick 库来使其美观 现在我想在更改相应的选择元素后更改 dropkick 内容 出现了一个新选项 但只需调用 select dropkick 不起作用 而且好像不支持 只需从头开始重建那
  • 无法将数据加载到 mvc 4 中的 jTable 中

    好的 我第一次尝试 jTable 我可以加载表 但这对我没有什么好处 因为它不会加载我的任何数据 当我调试程序时 我想要的表中的所有行都存储在我的列表中 因此我很困惑为什么当我运行应用程序时会弹出一个对话框 显示 与服务器通信时发生错误 H
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素?

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有
  • IE 中的 jQuery .width(val) 错误 - 无效参数

    通过ajax加载内部div book table 后 我想调整正文的宽度以适应更大的内容 var new width parseInt book table css width 407 body width new width 在 FF 和
  • :jQuery / Sizzle 中的 nth-of-type()?

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编

随机推荐