1

我在使用带有表达式引擎的 fancybox 时遇到问题。

基本上我使用矩阵插件设置了不同的画廊。每个画廊都有大约 10 张图片。基本上我希望缩略图打开fancybox和fancybox，以便能够滚动浏览该矩阵条目/画廊中的图像。

听起来很简单，但我似乎无法让 fancybox 滚动图像，它只是停留在第一张图像上。

这是我的缩略图代码：

<ul id="image_gallery">
              {exp:channel:entries channel="gallery_images"}
               <li>
                    <a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
                    {gallery_image limit="1"}
                        {exp:imgsizer:size src="{image}" width="200px" height="180px"}
                            <img src="{sized}" width="{width}" height="{height}" alt="" />
                    {/exp:imgsizer:size}
                    {/gallery_image}
                    </a>
                    <h1>{title}</h1>
                </li>
                {/exp:channel:entries}
        </ul>

这是我的 fancybox 模板代码：

{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
    {exp:imgsizer:size src="{image}" width="650px" height="500px"}
    <img src="{sized}" width="{width}" height="{height}" alt=""/>
    {/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}

除了图像滚动外，一切正常。

我会很感激任何帮助！

4

1 回答 1

2

如果没有看到 ExpressionEngine 标记的输出，就很难理解问题出在哪里。但是，您的问题可能很简单，只要确保图库中的所有图像共享相同的HTML 关系属性即可。

Fancybox 画廊是由具有相同rel=""属性的元素创建的：

<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>

<script>
    $('a.gallery').fancybox();
</script>

在查看您的代码时，您使用的是 ExpressionEngine{title}标记作为rel=""属性。

由于您的频道条目的标题可能包含空格和其他特殊字符，因此更好的选择是使用URL 标题字段{title_permalink}。

该标签使用连字符或下划线作为字符分隔符（使用Global Channel Preferences中的URL Titles 的 Word Separator设置）{title_permalink}将频道条目标题转换为URL 安全的。

您更新的缩略图代码将是：

<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
    <img src="{sized}" width="{width}" height="{height}" alt="" />
</a>

如果这不起作用，也许您可​​以提供更完整的代码示例，例如jsFiddle或Pastie，以帮助我们了解问题可能出在哪里。

于 2011-05-26T15:46:07.000 回答