部署后,fancybox 无法移动到下一张/上一张图片

Posted

技术标签:

【中文标题】部署后,fancybox 无法移动到下一张/上一张图片【英文标题】:fancybox can't move to next/prev picture after deployment 【发布时间】:2015-09-02 10:07:09 【问题描述】:

我对fancybox 有一个非常有趣的问题。在本地一切正常。部署到 SaaS 电子商务解决方案后:

    点击拇指后显示图片 - 确定

    无法点击显示的图片(链接的光标未更改) - ISSUE

基本上不可能在图片之间移动。预览需要关闭并打开另一张照片。

我尝试了很多方法,包括禁用页面中包含的 css 和 js 脚本。不幸的是没有运气。

图库在内容的开头实现(带有拇指的滑块)。 代码没有什么花哨的(独立运行完美)。

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css?v=1.0.7" />
<link href="css/gallery.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.0.2.min.js" type='text/javascript'></script>    
</head>

<body>

<script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>    
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="js/gallery.js"></script>

<div class="dg-container">
<div class="dg-items">
    <div>
    <a class="fancybox-thumbs" data-fancybox-group="thumb" href="7_b.jpg"><img src="7_b.jpg"   /></a>
    <a class="fancybox-thumbs" data-fancybox-group="thumb" href="6_b.jpg"><img src="6_b.jpg"   /></a>
    <a class="fancybox-thumbs" data-fancybox-group="thumb" href="5_b.jpg"><img src="5_b.jpg"   /></a>
</div>  
</div>
</body>
</html>

我使用过拇指变体,但使用简单的方法也会出现同样的问题。

请让我知道我应该进一步检查什么。在哪里可以找到fancybox 代码中预览照片链接的实现?

提前致谢。

【问题讨论】:

【参考方案1】:

据我所知,当我使用fancybox 时,我在所有a 标签中添加了rel="gallery1" 以使Prev/Next 工作。因此,所有图片都归入一个相册/画廊。

【讨论】:

谢谢。我已经添加了该属性,但仍然无法正常工作......重要的是,代码在本地运行良好。问题出在更大的站点上,其中包含更多脚本/ css(许多来自电子商务解决方案核心机制)。 有一个 ; produkty-reklamowe-nfc-custom 中缺少,请检查您的控制台并尝试将其删除。这可能是导致问题的原因。 感谢页面验证。这是 SaaS 脚本。不知道是什么原因......它被删除了。 Fancybox 预览仍然显示照片,无法点击它:( 我还添加了 jquery-2.0.2.min.map(它丢失了)。解决这个问题仍然没有运气。我的想法是外部 css 与 css form fancybox 混淆了。我不熟悉与图像预览一起使用的 fancybox css 类。也许唯一的方法是查看那些fancybox 文件... 我可以看看你用来初始化你的fancybox的js脚本吗?

以上是关于部署后,fancybox 无法移动到下一张/上一张图片的主要内容,如果未能解决你的问题,请参考以下文章

(相机校准)如何让我的循环读取图像只等待 10 秒,如果没有任何东西移动到下一张图像?

滑动到下一张图片时,PageControl 没有动画

sencha touch 2 在轮播中滑动到下一张卡片时停止音频?

在JAVA中,实现一个简单的图像浏览器,部署“上一张”、“下一张”两个按钮,点击按钮可前后翻阅图片。

安卓轮播图怎么让到最后一张的时候来

React 中的简单轮播 - 如何注册滚动到下一张幻灯片?