Question

我在Rails 3应用程序上使用FancyBox。我想获得像gallery这样的多个图像的弹出窗口。所有图像均可在服务器上使用。

到目前为止我的代码：

            <a class="fancybox"   title=""><%=  image_tag('s_1.jpg',:width=>100) %></a>
            <a class="fancybox"   title=""><%= image_tag('s_2.jpg',:width=>100) %></a>
            <a class="fancybox"  title=""><%= image_tag('s_3.jpg',:width=>100) %></a>
            <a class="fancybox"   title=""><%= image_tag('s_4.jpg',:width=>100) %></a>
            <a class="fancybox"   title=""><%= image_tag('s_5.jpg',:width=>100) %></a>

我的application.js

$(document).ready(function() {
    $(".fancybox").fancybox({
        type: "iframe",
        width : 380, // or whatever
        height: 280
    }).trigger("click");
});

我得到的错误是

The requested content cannot be loaded.

尝试将应用程序代码更改为：

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

然后，当我点击图像时，他们改变了位置，并且完全失望。

Answer 1

您的<a>没有href属性。 Fancybox需要一个href attr来连接。

你可能想要的是： <a class="fancybox" href="PATH_TO_THE_LARGE_IMG" title=""><img ../></a>

示例：

<a class="fancybox" href="http://placehold.it/800x600/ff0/0f0" title=""> <img src="http://placehold.it/400x300/ff0/0f0" alt="img" /> </a>

编辑：

如果您要创建包含多个图片的图库（使用next＆amp; prev按钮），请尝试将属性rel添加到该组中的所有锚点

示例<a class="fancybox" href="..." title="" rel="gal-1">..</a>

Answer 2

只需在具有类＆＃34; fancybox＆＃34;

的锚标记的href中添加图像的路径

<a class="fancybox" href="<%=image_tag('s_1.jpg',:width=>100) %>" title=""><%= image_tag('s_2.jpg',:width=>100) %></a>

无法加载请求的内容。请稍后再试。 FancyBox错误

2 个答案:

编辑：