двигатель выражения: Fancybox + EE? - PullRequest
Новая
       51

двигатель выражения: Fancybox + EE?

1 голос
/ 10 мая 2011

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

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

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

1 Ответ

2 голосов
/ 26 мая 2011

Не видя вывода ваших тегов ExpressionEngine, трудно понять, в чем проблема. Однако ваша проблема может заключаться в том, чтобы убедиться, что все изображения в галерее имеют один и тот же атрибут HTML-отношения .

Fancybox Galleries создаются из элементов, которые имеют одинаковый атрибут 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-safe , используя дефисы или подчеркивания в качестве разделителей символов (используя Разделитель слов для заголовков URL в параметре Глобальные настройки канала ).

Ваш обновленный код миниатюры будет: 

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

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

...