PS 1.7.6.x Слайд-шоу изображений товара при наведении мыши в каталоге товаров

Danunah

Danunah

Разрушитель (V)
Сообщения
64
Симпатии
36
Баллы
288
PS1.7.gif

Если у кого есть желание сделать подобное в своем магазине, ниже как это сделать.
Тема дефолтная

1. Добавить в /themes/ваша_тема/templates/catalog/_partials/miniatures/product.tpl
в блок изображения товара
строка 36, после закрывающего тега </a>
этот код
Код: 
          {if count($product.images) > 1}
          <div class="hover-thumb-list">
               {foreach from=$product.images item=image name=image}
                  {if $smarty.foreach.image.iteration < 5}
                        <div class="hover-image-thumb">
                        <span class="hr-thumb" data-src="{$image.bySize.home_default.url}"></span>
                        </div>
                  {/if}
               {/foreach}
          </div>
          {/if}

количества изображений в слайд-шоу, можно изменять
измененив цифры 5 (4 изображения) в
{if $smarty.foreach.image.iteration < 5}
т.е. желаемое количество + 1

2. Добавить в /themes/ваша_тема/assets/css/custom.js

Код: 
 //Product image Hover
$(document).ready(function() {
    $(document).on('mouseover', '.hover-thumb-list .hr-thumb', function(e)
    {
        var imgSRC = $(this).attr('data-src');
        var imgContainer = $(this).parents().prev('.product-thumbnail').find('img');
        $(imgContainer).attr('src',imgSRC);
    });
});

3. Добавить в /themes/ваша_тема/assets/css/custom.css

Код: 
/* style Product image Hover*/

.hover-thumb-list {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.thumbnail-container:hover .hover-thumb-list {
    display: flex;
}

.hover-thumb-list .hover-image-thumb {
    flex: 1;
}

.hr-thumb {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1;
    height: 100%;
    cursor: pointer;
}
.hr-thumb:after {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    right: 1px;
    height: 3px;
    opacity: .3;
    background: #888;
}
.hr-thumb:hover {
    height: 100%
}

.hr-thumb:hover:after {
    opacity: 1;
    background: #20c1d2;
}

Очистить кэш магазина и браузера(историю)

Нечто подобное сделал и на thirtybees 1.2.0
Но там код иной, надо обкатать, появятся желающие размещу
 
Сортировать по дате Сортировать по голосам
Решение для PS 1.6.1.24

Для дефолтного шаблона default-bootstrap

1. Добавить в /themes/default-bootstrap/product-list.tpl
в блок изображения товара
после закрывающего тега </a>
Код: 
{assign var='images' value=Image::getImages($cookie->id_lang,$product.id_product)}
{if count($images) > 1}
    <div class="hover-thumb-list">
        {foreach from=$images item=image name=image}
            {assign var=imageId value="`$product.id_product`-`$image.id_image`"}
            {if !empty($image.legend)}
                {assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
            {else}
                {assign var=imageTitle value=$product.name}
            {/if}
            {if $smarty.foreach.image.iteration < 5}
                <div class="hover-image-thumb">
                      <a href="{$product.link|escape:'html':'UTF-8'}" title="{$imageTitle}">
                    <span class="hr-thumb" data-src="{$link->getImageLink($product.link_rewrite, $imageId, 'home_default')|escape:'html':'UTF-8'}"></span>
                      </a>
                </div>
            {/if}
        {/foreach}
    </div>
{/if}

Примечание:
Настройка количества изображений в слайд-шоу
изменение цифры 5 (4 изображения) в
{if $smarty.foreach.image.iteration < 5}
т.е. желаемое количество + 1

2. Скрипт
в /themes/default-bootstrap/js/global.js
в функцию $(document).ready()

Код: 
 //Product image Hover
    $(document).on('mouseover', '.hover-thumb-list .hr-thumb', function(e)
    {
        var imgSRC = $(this).attr('data-src');
        var imgContainer = $(this).parents().prev('.product_img_link').find('img');
        $(imgContainer).attr('src',imgSRC);
    });

3. Стили
добавить в /themes/default-bootstrap/css/product_list.css

Код: 
/* style Product image Hover*/

.hover-thumb-list {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.product-image-container:hover .hover-thumb-list {
    display: flex;
}

.hover-thumb-list .hover-image-thumb {
    flex: 1;
}

.hr-thumb {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1;
    height: 100%;
    cursor: pointer;
}
.hr-thumb:after {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    right: 1px;
    height: 3px;
    opacity: .3;
    background: #888;
}
.hr-thumb:hover {
    height: 100%
}

.hr-thumb:hover::after {
    opacity: 1;
    background: #20c1d2;
}
 
За 0 Против
Danunah сказал(а):
Посмотреть вложение 2559

Если у кого есть желание сделать подобное в своем магазине, ниже как это сделать.
Тема дефолтная

1. Добавить в /themes/ваша_тема/templates/catalog/_partials/miniatures/product.tpl
в блок изображения товара
строка 36, после закрывающего тега </a>
этот код
Код: 
          {if count($product.images) > 1}
          <div class="hover-thumb-list">
               {foreach from=$product.images item=image name=image}
                  {if $smarty.foreach.image.iteration < 5}
                        <div class="hover-image-thumb">
                        <span class="hr-thumb" data-src="{$image.bySize.home_default.url}"></span>
                        </div>
                  {/if}
               {/foreach}
          </div>
          {/if}

количества изображений в слайд-шоу, можно изменять
измененив цифры 5 (4 изображения) в
{if $smarty.foreach.image.iteration < 5}
т.е. желаемое количество + 1

2. Добавить в /themes/ваша_тема/assets/css/custom.js

Код: 
 //Product image Hover
$(document).ready(function() {
    $(document).on('mouseover', '.hover-thumb-list .hr-thumb', function(e)
    {
        var imgSRC = $(this).attr('data-src');
        var imgContainer = $(this).parents().prev('.product-thumbnail').find('img');
        $(imgContainer).attr('src',imgSRC);
    });
});

3. Добавить в /themes/ваша_тема/assets/css/custom.css

Код: 
/* style Product image Hover*/

.hover-thumb-list {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.thumbnail-container:hover .hover-thumb-list {
    display: flex;
}

.hover-thumb-list .hover-image-thumb {
    flex: 1;
}

.hr-thumb {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1;
    height: 100%;
    cursor: pointer;
}
.hr-thumb:after {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    right: 1px;
    height: 3px;
    opacity: .3;
    background: #888;
}
.hr-thumb:hover {
    height: 100%
}

.hr-thumb:hover:after {
    opacity: 1;
    background: #20c1d2;
}

Очистить кэш магазина и браузера(историю)

Нечто подобное сделал и на thirtybees 1.2.0
Но там код иной, надо обкатать, появятся желающие размещу
Нажмите, чтобы раскрыть...
А есть решение чтобы работало на мобильнике при проведении пальцем, а то приходится на мобильном скрывать? Буду очень благодарен.
 
За 0 Против
Для ответа нужно войти/зарегистрироваться
Назад
Верх