缩略图点击后消失,FancyBox

2024-03-30

我创建了 FancyBox 画廊。 但现在,当我单击缩略图时,它会按计划显示图像库。 但在后台我可以看到所有缩略图都一一消失。 F5 或页面重新加载后,所有缩略图都会恢复。

My code:

    <a class="fancybox" data-fancybox-group="gallery" title=""> <%=  image_tag('s_1.jpg') %></a>
    <a class="fancybox"  data-fancybox-group="gallery" title=""><%= image_tag('s_2.jpg') %></a>
    <a class="fancybox" data-fancybox-group="gallery" title=""><%= image_tag('s_3.jpg') %></a>
   <a class="fancybox"  data-fancybox-group="gallery" title=""> <%= image_tag('s_4.jpg') %></a>
   <a class="fancybox" data-fancybox-group="gallery"  title=""> <%= image_tag('s_5.jpg') %></a>

In 应用.js

$(document).ready(function() {
    $(".fancybox").fancybox();
});

你可以看到的例子here http://darbs.ecotechno.lv/en/services


您需要在中定义图像源<a>-标签。即使您没有不同大小的图像用于缩略图和图库视图,您仍然需要定义两次,如下所示:

<a class="fancybox" href="image_source" data-fancybox-group="gallery" title=""><img src="image_source" alt="" /></a>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

缩略图点击后消失,FancyBox 的相关文章

  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • jQuery,REAL:不是等价的运算符?

    此代码行选择任何类名不是 id 和 quantity 的 div 内的所有子输入 div item gt div not id quantity gt input live keydown function event 执行相反操作的代码行
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化?

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • JQuery 验证在 IE8 中不起作用

    我使用 JQuery 验证脚本来验证 HTML 表单 这在 Firefox 中完美运行 但在 IE8 中不起作用 我认为冒号 或分号 有问题 但我无法抓住它 jQuery validator addMethod selectNone fun
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗

随机推荐

  • Spring boot @RequestParam unix时间戳到LocalDateTime [重复]

    这个问题在这里已经有答案了 假设我的 RestController 中有 GetMapping public list RequestParam LocalDateTime date 我使用日期请求参数作为 unix 时间戳发出 GET 请
  • python 3.9 中的类型注释约束(`ValueRange`/`MinLen` 等)在哪里?

    看到 很棒的 新产品后Annotatedpython 3 9 中的类型注释 可变类型约束 我赶紧升级 以便可以检查它们 https docs python org 3 library typing html highlight valuer
  • 在 Swift 编程语言中隐藏文本字段的键盘

    我对 Objective C 的经验很少 我想使用 Swift 编程语言隐藏文本字段的键盘 我也尝试过这个 func textFieldShouldReturn textField UITextField gt Bool called wh
  • 使用final关键字声明一个List字段

    如果我在课堂上有以下声明Synapse是一个抽象类型 private final List
  • writeToFile 和 writeToURL 有什么区别?

    也许有人可以在这里解释一下或者发送给我正确的文档 我已经阅读了 IOS 文档 但仍然无法得到它 我什么时候使用 writeToURL 方法 也许问题出在我身上 如果除了我之外的其他人都明白这一点 但如果有人可以帮助我 我将非常感激 不同之处
  • 如何从大气噪声中获得随机数?

    我最近讨论了寻找一种生成真正随机数的方法 讨论最终讨论了使用大气噪声 有人这样做过吗 这个过程涉及什么 有人创建了一个返回从噪声中获得的随机数的网络服务吗 整个网站基于使用大气噪声生成的 真正随机 数字 他们有一个 API 如果您愿意 您可
  • 如何在 Python 中进行按位非运算?

    为了测试使用更基本的构建块 在我的例子中使用 Nand Or 和 And 构建 Xor 操作 我需要能够执行 Not 操作 内置的not似乎只用单个位来做到这一点 如果我做 x 0b1100 x not x 我应该得到0b0011但我只是得
  • sql查询获取已删除的记录

    你有一张桌子table1其中包含id列 即int 11 not null auto increment并从 1 开始 假设您有 10 000 条记录 可以看出最后一条记录的id是10000 一旦删除了 3 条记录 表中就有 9 997 条记
  • HttpWebRequest 的 URL 被特殊字符截断

    我需要调用的 Web 服务的 URL 包含一个包含自由格式文本的参数 我不知道为什么它是这样设计的 因为它是使用 POST 发送的 并且包含许多字段作为 POST 的一部分 但是 这给我带来了一个问题 对于井号和 等某些字符 URL 在遇到
  • 如何在ireport中为堆积条形图中的条形设置不同的颜色?

    我需要为堆积条形图中的每个条形设置唯一的颜色 无论我在一个条中看到什么颜色 它都不应该在任何其他条或任何其他堆栈中重复 例如 我的报告中有 5 个栏 每个栏有 3 个不同的堆栈 我想将红色相关颜色应用于第一个条形及其堆栈 第二条应该有蓝色相
  • JTextField - setColumns() 方法对我不起作用

    我的问题是我的 JTextField setColumns int field1 setColumns 5 不起作用 我猜这是布局管理器的问题 不过 我正在从练习册上学习 我所知道的唯一布局是 flowLayout borderLayout
  • JQuery同步动画

    在很多情况下我希望动画能够同步执行 特别是当我想制作一系列连续的动画时 有没有一种简单的方法来制作 jQueryanimate函数调用同步 我想到的唯一方法是在动画完成时将标志设置为 true 并等待该标志 jQuery 无法制作同步动画
  • response.sendRedirect() 和 request.getRequestDispatcher().forward(request,response) 有什么区别[重复]

    这个问题在这里已经有答案了 我使用JAVA时出现页面跳转的问题 如果我使用 response sendRedirect login jsp 然后我得到这个网址 http localhost 8080 login jsp 但如果我使用 req
  • Android:寻找不同的 TimePicker 样式

    大家好 一个简短的问题 我一直在寻找这种风格的 TimePicker 但到目前为止没有结果 如图所示 机器人绘图 http www droiddraw org widgetguide html 我开始怀疑这种风格的存在 P 任何知道如何获得
  • 在 Helm 值属性中传递数组

    我想将数组作为 Helm 中 yaml 值文件 中的属性传递 我尝试过的 Attempt elasticsearch uri 127 0 0 1 9200 127 0 0 2 9200 Error ReadString 期望 或n 但发现
  • 阻止设计者调用 getter(VS 2008,WinForms)

    我有一个简单的用户控件 其中包含一个最初为空的组合框 该 CB 的 setter 向其添加项目 而 getter 返回选定的项目 当将此 UC 添加到 Form 时 设计者会自动调用空 CB 的 getter 稍后会调用用项目填充 CB 的
  • 获取下周一的日期

    如何在 JavaScript 中获取下周一 我在互联网上找不到任何相关内容 我也尝试了很多代码并对此有所了解 但我无法真正做到这一点 这是我的代码 var d new Date var day d getDay d new Date d s
  • 访问 PHP 中的活动会话

    如何获取服务器上所有活动 PHP 会话的列表并从一个用户的实例中访问它们 激励案例是显示网站上所有当前活动用户的列表 其中用户名存储在每个用户的 PHP 会话中 注意 我知道我可以通过数据库 甚至文件系统 创建自己的状态 但我正在寻找一种利
  • Elasticsearch - 合并多个文档中的字段

    假设我有一堆这样的文档 foo 1 2 3 foo 3 4 5 对于针对这些文档运行的查询 我正在寻找一种方法来返回所有值的数组foo 最好是唯一的值 但重复也可以 foo 1 2 3 3 4 5 我研究了聚合 API 但我不知道如何实现这
  • 缩略图点击后消失,FancyBox

    我创建了 FancyBox 画廊 但现在 当我单击缩略图时 它会按计划显示图像库 但在后台我可以看到所有缩略图都一一消失 F5 或页面重新加载后 所有缩略图都会恢复 My code a class fancybox title a a cl