механизм выражения: Fancybox + EE?

У меня проблема с использованием 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}  

Все работает нормально, кроме прокрутки изображения.

Буду признателен за любую помощь!


person Simon112    schedule 10.05.2011    source источник
comment
Это не проблема EE, и вы должны опубликовать свой скрипт Fancybox.   -  person Ross    schedule 11.05.2011


Ответы (1)


Не видя вывод ваших тегов 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}.

Тег {title_permalink} преобразует заголовок записи канала в безопасный для URL, используя дефисы или символы подчеркивания в качестве разделителей символов (используя параметр Разделитель слов для заголовков URL в Глобальные настройки канала).

Тогда ваш обновленный код эскиза будет таким:

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

Если это не сработает, возможно, вы можете предоставить более полный пример кода, например jsFiddle или Pastie, чтобы помочь нам понять, где может быть проблема.

person rjb    schedule 26.05.2011