Помощь Как сделать чтоб при наведении на картинку товара, поменялось на второе

[yuazakharov]

Добрый день!

Как на сайте ламода

На главной странице. Наводишь мышкой, и картинка товара меняется на другое. Отлично сделано.

С jQuery hover как-то там сделать )

Кто-то уже должно быть реализовал

 

[artful knave]

Добрый день!

Как на сайте ламода

На главной странице. Наводишь мышкой, и картинка товара меняется на другое. Отлично сделано.

С jQuery hover как-то там сделать )

Кто-то уже должно быть реализовал

у некоторых шаблонов есть такой функционал изначально (у warehouse встроенный, только надо в настройках врубить, вроде. у panda - модуль Hover image). Достаточно в товар залить несколько картинок и поставить галочку "использовать в качестве обложки" любую картинку, кроме первой. возможно, и в вашем шаблоне уже эта функция есть.

 

[yuazakharov]

у некоторых шаблонов есть такой функционал изначально (у warehouse встроенный, только надо в настройках врубить, вроде. у panda - модуль Hover image). Достаточно в товар залить несколько картинок и поставить галочку "использовать в качестве обложки" любую картинку, кроме первой. возможно, и в вашем шаблоне уже эта функция есть.

Действительно, есть оказ-ся

 

[duke1999]

Навскидку можно так:

<script type="text/javascript">
    $(".product_img_link").hover(
    function () {
        $(this).find('.img_second').toggle();
        $(this).find('.img_first').toggle();
    },
   
    );
</script>
<a class="product_img_link" href="http://..."> 
<img class="img_first" src="http://..." />
<img class="img_second" src="http://..." />
</a>

в css класс img_first должен быть изначально show, а img_second hide

кусок javascript из темы, где это реализовано заменой src:

        <script type="text/javascript">
var els = $("img.replace-2x").get();
        for(var i = 0; i < els.length; i++)
        {
            src = els[i].src;
            extension = src.substr( (src.lastIndexOf('.') +1) );
            src = src.replace("." + extension, "2x." + extension);
           
            var img = new Image();
            img.src = src;
            img.height != 0 ? els[i].src = src : els[i].src = els[i].src;
        }
</script>
<img class="replace-2x img-responsive" src="http://..." />

 

[alexeyud]

Подскажите, а в дефолтной теме 1,6,1 где надо это дело вставлять чтобы заработало в списке товаров?

 

[zabolots]

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

<img class="img_first" src="http://..." />
<img class="img_second" src="http://..." />

подставлялось первое и второе изображение в src (его url).

 

[alexeyud]

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

 

[zabolots]

"смогу подправить в коде" как-то не согласуется с "не понимаю в каких файлах"
в файлах вашего шаблона, отвечающих за вывод товарной позиции