изображения товара в лайтбоксе (почему только первое) Есть решение

Здравствуйте!

уже видел где-то подобный вопрос, но решения там не было.

вывожу изображения товара в лайтбоксе и всё бы хорошо, но в лайтбоксе всегда только первое, при нажатии на стрелку, опять появляется оно же, хотя внизу миниатюры всех изображений, но даже при клике на них, вверху большое изображение всегда одно и то же.

у нас изображние товара в лайтбоксе задаётся следующим кодом:


{foreach $product.images as $image}

<a href="{$wa->shop->productImgUrl($product, 740x0)}" class="project-photo show-zoom" data-rel="fancybox[photos-{$image}]">
<div style="display:block;width:370px;height:370px;text-align:center">{$wa->shop->productImgHtml(['id'=> $product.id, 'image_id' => $image.id, 'ext' => $image.ext, 'class' => 'project-photo-image', 'image_desc' => $image.description], '0x370', ['alt' => $product.name|cat:' - ':$image.description|escape])}</div>

<span class="photo-overlay"></span>
<span class="photo-border"></span>
<span class="icon zoom-icon"></span>
</a>

{/foreach}

всё ок, кроме того, что в лайтбоксе всегда только первая картинка (хотя миниатюры внизу все), как сделать, чтобы все они там были?

6 ответов

  • 1

    Не там вопрос задаете. Вебасист с лайтбоксом никак не связан. Да и вопроса не уловил. Проблема в том, что нет пролистывания между всеми картинками? Укажите всем одинаковый атрибут rel. Например rel="blablabla". Тогда появятся стрелки влево/вправо. Если же проблема в том, что после смены главной картинки кликом на маленькую и попыткой открыть её в лайтбоксе, вы видите всегда ту картинку, что была там до смены, то тут нужно редактировать JS. Найти там ту часть, которая меняет основную картинку и после неё заново вызвать инициализацию лайтбокса. Но тогда столкнетесь с новой проблемой. У вас будет проскакивать дубль одной из картинок. Тут уже нужно будет играться с изменением атрибутов rel при клике на мелкую картинку.

    Если ничего не поняли из вышеописанного, то лучше обратитесь к профессионалам. Разумеется платно :)

    • +1
      Евгений Дубровин Евгений Дубровин 29 марта 2016 07:20 #

      Евгений, спасибо за ответ! я понимаю, что Вебасист с лайтбоксом (точнее фэнсибоксом наверно) не связан, просто наверняка кто-то уже имел с этим дело.

      дело в том, что картинки товара подгружаются в лайтбокс все (миниатюры. см. скрин), стрелки тоже на месте, а главная остаётся одной и той же, хоть на стрелки кликай, хоть на миниатюры.

      может дело в этой части: data-rel="fancybox[photos-{$image}]" ?

      что-то там вместо $image другое должно быть?

    • +1
      Евгений Дубровин Евгений Дубровин 29 марта 2016 14:44 #

      если решение действительно сложное, назовите, пожалуйста, цену.

  • 1
    Евгений Дубровин 29 марта 2016 14:04 #

    изменяю $image на $gallery - результат тот же. миниатюры есть, основное фото в лайтбоксе всегда одно и то же, что ни нажимай. а вот если другое что-то там вставить, то миниатюр нету, есть только одно фото в лайтбоксе. должно же быть решение.

  • 1
    Евгений Дубровин 30 марта 2016 07:11 # Решение

    докопался таки до решения. вот работающий код:

    {foreach $product.images as $image}

    <a href="{$wa->shop->productImgUrl(['id'=> $product.id, 'image_id' => $image.id, 'ext' => $image.ext, 'image_desc' => $image.description], 740x0)}" class="project-photo show-zoom" data-rel="fancybox[photos-{$image}]">
    <div style="display:block;width:370px;height:370px;text-align:center">{$wa->shop->productImgHtml(['id'=> $product.id, 'image_id' => $image.id, 'ext' => $image.ext, 'class' => 'project-photo-image', 'image_desc' => $image.description], '0x370', ['alt' => $product.name|cat:' - ':$image.description|escape])}</div>
    <span class="photo-overlay"></span>
    <span class="photo-border"></span>
    <span class="icon zoom-icon"></span>
    </a>

    {/foreach}

    всего лишь надо было заменить {$wa->shop->productImgUrl($product, 740x0)}

    на {$wa->shop->productImgUrl(['id'=> $product.id, 'image_id' => $image.id, 'ext' => $image.ext, 'image_desc' => $image.description], 740x0)}


  • 1

    поставьте

    rel="group"

    вместо

    data-rel="fancybox[photos-{$image}]"

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите