Question

我是新来的JQuery / Javascript中的新手 - 我遇到了2个问题。

如果你下载文件here，我真的很感激！ - 因为这是让自己清楚的更简单的方法 - 我希望。

我使用 Coin Slider 作为主画廊，我需要在幻灯片下看到所有画廊图片（用过的小图片）和幻灯片，点击图片时，应该在 Fancybox 灯箱库的帮助下以全屏视图打开（使用更大的图片）。

因此...

问题1 ：在幻灯片放映下，用拇指显示图库中的所有图片。目前没有显示 - 设法显示某个图片，但不与所有图库相关。

问题2 ：点击图片（当前是幻灯片显示）时，应在全屏视图中打开。目前似乎与 Coin Slider 发生冲突，因为 Coin Slider 未在index.html文件中链接，全屏视图有效，但图片显示在列表模式。

我相信并希望 Coin Slider 文件中的拇指（问题1）和index.html中的全局视图（问题2）中的一些代码更正需要进行小的修正。

这是一个很长的阅读 - 谢谢你为最后的阅读而烦恼，并为可能的语法错误感到抱歉（我是非英语人士）。

Answer 1

我遇到了同样的问题。我发现可以通过与{Coin Slider一起使用的href执行javascript调用。例如：

href="javascript:alert('hello');"

理论上，可以使用它来打开Fancybox图库的特定元素。

我正在研究一个例子。

编辑：

在这里。让我们说我们有一个像下面这样的Coin Slider：

<div id="coin-slider">
    <a href="javascript:box(0);"><img src="img/small/1.jpg"></a>
    <a href="javascript:box(1);"><img src="img/small/2.jpg"></a>
    <a href="javascript:box(2);"><img src="img/small/3.jpg"></a>
</div>

然后我们可以使用参数“i”创建一个名为“box”的函数，它将打开位于“i”的Fancybox图库。

<script type="text/javascript">
    function box(i) {
        $.fancybox.open([
            {
                src  : 'img/big/1.jpg',
                opts : {
                    caption : 'Optional description 1'
                }
            },
            {
                src  : 'img/big/2.jpg',
                opts : {
                    caption : 'Optional description 2'
                }
            },
            {
                src  : 'img/big/3.jpg',
                opts : {
                    caption : 'Optional description 3'
                }
            }
        ], {
            loop : false, index : i
        });
    };
</script>

我正在使用Fancybox 3，但我确信这可以编辑以与其他版本一起使用。希望这有助于那里的人。

请帮助我让我的画廊工作（jQuery; Coin Slider; Fancybox）

1 个答案: