кнопка следующее фото

[Advokat]

Приветствую всех! Помогите разобраться с проблемой.

Когда нажимаешь на фото товара, оно увеличивается, но кнопок что бы листать следующее или предыдущее фото нет. Есть только кнопка закрыть фото. 

Что нужно добавить в код, что бы все заработало:

 

{* Увеличитель картинок *}

{literal}

<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>

<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

 

<script>

$(function() {

    // Раскраска строк характеристик

    $(".features li:even").addClass('even');

 

    // Зум картинок

    $("a.zoom").fancybox({

        prevEffect    : 'fade',

        nextEffect    : 'fade'});

    });

</script>

{/literal}

[ps-simpla]

у ссылок изображений должен быть общий параметр rel, т.е. для всех ссылок которые должны быть включены в галерею где стоит class="zoom" рядом пропишите rel="group"
 

Пример, default шаблона, отрывки из файла product.tpl 

<!-- Большое фото -->
{if $product->image}
<div class="image">
<a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>
</div>
{/if}
<!-- Большое фото (The End)-->
 

и

<!-- Дополнительные фото продукта -->
{if $product->images|count>1}
<div class="images">
{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
{foreach $product->images|cut as $i=>$image}
<a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
{/foreach}
</div>
{/if}
<!-- Дополнительные фото продукта (The End)-->
 

[Advokat]

Спасибо за ответ. Посмотрев на ваш пример понял в чем причина.

У меня было прописано data-rel="group" 

Убрал data-  и все заработало.

Большое спасибо!