1.6 Change Image on Hover

kdmonk1 · November 5, 2014

This question may have already been asked, but I would like to show the second image on the category page when a user hovers over the image. Any thoughts on how to make this work?

EX: I have a shirt that I have photographed, front and back. So front would be my first image and the back would be my second image. When a user see the category page, the first image is shown. When a customer hovers over the image, I would like the image to change to the second image only on hover.

I am using the default Prestashop 1.6.0.9 template (Demo version)

MahmutGulerce · November 5, 2014

I have seen this feature at some paid themes. Its also possible with modifications but you should edit many of modules for example products on homepage are in a module.

vekia · November 5, 2014

you're looking for something like:

?

kdmonk1 · November 5, 2014

Yes! this is what I am looking for. Any thoughts on how to implement?

kdmonk1 · November 5, 2014

you're looking for something like:

?

Yes! this is what I am looking for. Any thoughts on how to implement?

Cristrinity · November 13, 2014

Iba a preguntar lo mismo, que de dónde lo sacaba, y acabo de encontrar esto. No lo he probado todavía, pero... promete!

http://pelechano.es/efecto-rollover-listados-prestashop-1-5-y-1-6/

kdmonk1 · November 18, 2014

Iba a preguntar lo mismo, que de dónde lo sacaba, y acabo de encontrar esto. No lo he probado todavía, pero... promete!

http://pelechano.es/efecto-rollover-listados-prestashop-1-5-y-1-6/

Hi Cristrinity, your instructions worked perfectly!

Since the instructions were in spanish, I had to translate to English using Google Translate.

First, create an override Tools.php file in this location: override -> classes -> Tools.php

Here is the code that is used for this Tools file:

<?php

class Tools extends ToolsCore
{
    public static function getProductsImgs($product_id)
    {
        $sql = '
        (SELECT * from `'._DB_PREFIX_.'image`
        WHERE id_product="'.$product_id.'" and cover=1)

         union
                 (SELECT * from `'._DB_PREFIX_.'image`
        WHERE id_product="'.$product_id.'" and cover=0     ORDER BY `position` LIMIT 0,1 )

        LIMIT 0,2
        ';
        $result = Db::getInstance()->ExecuteS($sql);
        return $result;
    }
}

Don't forget to delete, the class_index.php file from the cache folder

Inside the product-list.tpl, around line 52, add the following code:

BEFORE:

<div class="product-image-container">
                        <a class="product_img_link"    href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
                            <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
                        </a>

AFTER:

<div class="product-image-container">
                            <a class="product_img_link"    href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">                            
          {assign var='productimg' value=Tools::getProductsImgs($product.id_product)}                            
          {if isset($productimg[0]) && isset($productimg[1])}
            <img  class="replace-2x img-responsive img_0"  src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[0].id_image, 'home_default')}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />                                                              
            <img class="replace-2x img-responsive img_1" src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[1].id_image, 'home_default')}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}  />                                 
          {else}
            <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
          {/if}
    </a>

Now lets add css to make the second image show, inside the product_list.css, add the following at the bottom of the file:

ul.product_list .product-image-container a:hover img.img_0{
    display: none;
}
ul.product_list .product-image-container a img.img_1{    
    display:none;
}
ul.product_list .product-image-container a:hover img.img_1{    
    display: block;    
}

I really appreciate your help on this. I have tested and the code works well. It would be great if we could get a Moderator to sign off on this as well!

Edited November 18, 2014 by kdmonk1 (see edit history)

Cristrinity · November 18, 2014

Sorry, I thought I was in the Spanish forum! Great job and the thanks goes to the owner of pelechano.es

sickshot · January 20, 2015

any chance to apply this to 1.5 version???

JackusD · August 20, 2015

In case anybody needs this for 1.6 you can use this in the Tools.php override:

<?php

class Tools extends ToolsCore
{
    public static function getProductsImgs($product_id)
    {
        $sql = '
        (SELECT * from `'._DB_PREFIX_.'image` WHERE id_product="'.$product_id.'" and cover=1)
        union
        (SELECT * from `'._DB_PREFIX_.'image` WHERE id_product="'.$product_id.'" and cover IS NULL ORDER BY `position` LIMIT 0,1 )
        LIMIT 0,2
        ';
        $result = Db::getInstance()->ExecuteS($sql);
        return $result;
    }
}

vadimda · August 25, 2015

In case anybody needs this for 1.6 you can use this in the Tools.php override:

<?php

class Tools extends ToolsCore
{
    public static function getProductsImgs($product_id)
    {
        $sql = '
        (SELECT * from `'._DB_PREFIX_.'image` WHERE id_product="'.$product_id.'" and cover=1)
        union
        (SELECT * from `'._DB_PREFIX_.'image` WHERE id_product="'.$product_id.'" and cover IS NULL ORDER BY `position` LIMIT 0,1 )
        LIMIT 0,2
        ';
        $result = Db::getInstance()->ExecuteS($sql);
        return $result;
    }
}

You should say 1.6.1

Working fine, TY!

vekia · August 25, 2015

is this affecting some other parts of the shop?

JackusD · August 26, 2015

is this affecting some other parts of the shop?

It shouldn't. We aren't overriding any existing functions, just creating a new one.

vekia · August 30, 2015

now i see, i thought that it is default prestashop function, lol

thank you for explanations

John Yossarian · September 4, 2015

Is there a way to make this show every image?

Not only first and second image?

For example:

On hover it goes through image 1, 2, 3, 4, 5, etc.

Edited September 4, 2015 by John Yossarian (see edit history)

JackusD · September 5, 2015

Is there a way to make this show every image?

Not only first and second image?

For example:

On hover it goes through image 1, 2, 3, 4, 5, etc.

Sure, if you remove the LIMIT from the Tools.php override:

<?php

class Tools extends ToolsCore
{
    public static function getProductsImgs($product_id)
    {
        $sql = '
        (SELECT * from `'._DB_PREFIX_.'image` WHERE id_product="'.$product_id.'" and cover=1)
        union
        (SELECT * from `'._DB_PREFIX_.'image` WHERE id_product="'.$product_id.'" and cover IS NULL ORDER BY `position` )
        ';
        $result = Db::getInstance()->ExecuteS($sql);
        return $result;
    }
}

Then you could loop through the images in product-list.tpl with something like this:

{assign var='productimg' value=Tools::getProductsImgs($product.id_product)}  
{foreach from=$productimg item=img name=productimg}
	<img class="static-img" src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$img.id_image, 'home_default')}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" itemprop="image" />
{/foreach}

John Yossarian · September 5, 2015

Then you could loop through the images in product-list.tpl with something like this:

{assign var='productimg' value=Tools::getProductsImgs($product.id_product)}  
{foreach from=$productimg item=img name=productimg}
	<img class="static-img" src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$img.id_image, 'home_default')}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" itemprop="image" />
{/foreach}

Thank you for the reply.

I removed the LIMIT from Tools.php override.

When I put the above code snippet into product-list.tpl it does not loop through all images. Instead it displays all images (associated with the product) stacked on top of each other. See screenshot.

Screenshot explanation:

image displayed at top is image #1
then it displays image #1 again
displays image #2
displays image #3

Edited September 5, 2015 by John Yossarian (see edit history)

JackusD · September 5, 2015

Are you sure you aren't pulling in that image again in product-list.tpl? I'm sure what I posted should only show that image once!

You could wrap those images in a relatively positioned container, position all but the first image absolute with opacity: 0 so they're stacked and hidden and then use javascript to loop through and show and hide the images.

Edited September 5, 2015 by JackusD (see edit history)

myselfidem · September 5, 2015

Thank you kdmonk1 !

Works very fine on PS 1.6.0.6.

Friendly

Dany developer · October 10, 2015

Great!!! I did a little test in a new proyect and works fine.

I'm trying to implement it in a module that is in the forum, but I think the class tools does not run because it does not display both images.

This module does not depend on the product- list.tpl file so that implements the view of the module that is very similar composition to product- list.tpl.

Could you help me with this ?

regards

myselfidem · October 11, 2015

Hello,

Which module are you asking about ?

I made the same changes inside themeszonecarousel and works fine, for example !

Edited October 11, 2015 by myselfidem (see edit history)

CS Appsaradev · November 19, 2015

Thanks ,

it works fine for me,

PS Version: 1.6.0.8

Thanks,

Chantouch.

Kaper · December 17, 2015

Please, can anybody post how to do following thing?

If i hover on color in product list, it shows me the image assigned to this color?

Really thanks!

CS Appsaradev · December 18, 2015

Please, can anybody post how to do following thing?

If i hover on color in product list, it shows me the image assigned to this color?

Really thanks!

yes, i need that too.

Thanks.

Sam Minerve · February 21, 2016

yes, i need that too.

Thanks.

Please, can anybody post how to do following thing?

If i hover on color in product list, it shows me the image assigned to this color?

Really thanks!

Hello,

I would also like to know how to achieve this functionality. I found this post : https://www.prestashop.com/forums/topic/383336-how-to-change-image-when-mouseover-on-color-attribut-in-product-list/

Unfortunately, I didn't manage to make it work. I'm using PS 1.6.1.1 with multistore option activated (don't know if this has any incidence).

giulym · June 13, 2019

HI! Something for the 1.7.5.1?

myselfidem · June 14, 2019

Works also fine with PrestaShop 1.6.1.24 !

Using link given by Cristinity :

https://pelechano.es/efecto-rollover-listados-prestashop-1-5-y-1-6/

Than you

ender666 · August 26, 2019

perfect, thank you :)

Wstdhz · April 8, 2020

Hello,

Any way to make this on PS 1.7.6.4 please? 😥

DamianS20171 · July 10, 2020

@Jesse Try to use this: https://github.com/ArnaudFavier/PrestaShop-Module-Image-Rollover

compatible with 1.7.6.5 and really easy to install

TomSoiree · September 23, 2020

On 7/10/2020 at 4:05 PM, DamianS20171 said:

@Jesse Try to use this: https://github.com/ArnaudFavier/PrestaShop-Module-Image-Rollover

compatible with 1.7.6.5 and really easy to install

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS:

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

wodzienka · March 3, 2021

On 9/23/2020 at 11:23 AM, TomSoiree said:

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl


{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS:


#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

You're a total life saver! Yes, it works just perfectly in PS 1.7...

HackID1 · April 13, 2021

En 23/9/2020 a las 11:23 AM, TomSoiree dijo:

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl



{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS:



#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

Hola! cómo podría usar este código en Prestashop 1.7.7.3, para que el HOVER se realice encima de la misma imagen,

He intentado muchas formas y el código funciona, pero no logro que el cambio css se realice dentro del contenedor de la imagen principal (para simular el efecto completo).

Actualmente tengo el código puesto en 2 IMG,, pero quiero que se vea sólo en 1 (para hacer el hover)

{block name='product_thumbnail'}
				<a href="{$product.url}" class="thumbnail product-thumbnail">
				{* AngarTheme *}
				{* {if !empty($product.cover.bySize.home_default.url)} *}
				
				
				{if isset($product.images[0])}
				  <img
					src="{$product.images[0].bySize.home_default.url}"
					alt="{if !empty($product.images[0].legend)}{$product.images[0].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[0].large.url}"
					class="image1"
				   />
				   <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					class="image2"
				   />
				   
				   
				   {* {/if} 
				  <img
					src = "{$product.cover.bySize.home_default.url}"
					alt = "{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url = "{$product.cover.large.url}" {if isset($product.cover.bySize.home_default)} width="{$product.cover.bySize.home_default.width}" height="{$product.cover.bySize.home_default.height}" {/if}
				  > *}
				  
				  
				  
				{else}
				  <img src = "{$urls.img_url}en-default-home_default.jpg" alt = "{$product.name|truncate:30:'...'}" >
				{/if}
				</a>
				{/block}

El CSS que añadi es similar pero probe con dos clases:


/* product*/
#products .products .thumbnail-container .product-thumbnail .image1{opacity:1;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image1{opacity:0}
  
#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}
  /* END product*/

Uso Angar Theme (se ve en el código la linea)

Alguna forma de lograr el efecto justo en la imagen?

Gracias! estoy a un paso con tu código de lograrlo, sigo intentando...

Edited April 13, 2021 by HackID1 (see edit history)

HackID1 · April 13, 2021

En 10/7/2020 a las 4:05 PM, DamianS20171 dijo:

@Jesse Try to use this: https://github.com/ArnaudFavier/PrestaShop-Module-Image-Rollover

compatible with 1.7.6.5 and really easy to install

He probado este módulo subiendo la carpeta a la carpeta /httpdocs/Modules pero no me carga, y también dentro de /httpdocs/themes/temaXX/modules

Alguna forma de activarlo para Prestashop 1.7.7.3

Gracias

Gian Luca · March 4, 2022

On 9/23/2020 at 11:23 AM, TomSoiree said:

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS:

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

Very helpful your suggestion, this is my code... if some need it 😉

		{if $product.cover}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$product.cover.bySize.home_default.url}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}" data-full-size-image-url="{$product.cover.large.url}" />
				{if  count($product.images) > 1 && isset($product.images[1])}
				  <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					 class="dw-img-hover"
				   />		
				{/if}
			</a>		
		{else}
			<a class="thumbnail product-thumbnail" href="{$product.canonical_url}">
				<img src="{$urls.no_picture_image.bySize.home_default.url}" />
			</a>
		{/if}

Edited March 4, 2022 by Gian Luca (see edit history)

nedudgi · May 17

On 9/23/2020 at 11:23 AM, TomSoiree said:

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl

I have implemented this, and it works in 2024, with version 1.7.8.11, even with a third party template. The CSS needed to be augmented a bit, so that the second image is positioned correctly. Also, don't forget to put the second image inside an <a> tag, so it's clickable. Or put the second image into the already existing <a> tag of the cover image.

I have introduced a variable ($hoverImageID) so that if I need a different image, not the first, I can just change the value of this variable. $hoverImageID is the index of the array of images uploaded for the product, starting with 0. So 0 is the first image, 1 is the second, etc.

It would be nice to be able to set this variable from the shop admin, then you could choose which image to hover, for each product separately. That however is beyond my skills

Still, this gives me more control over the hovering, than most of the modules out there. Thanks guys.

My code:

{$hoverImageID = 0}
{if isset($product.images[$hoverImageID])}
   	<img
	   	src="{$product.images[$hoverImageID].bySize.home_default.url}"
		alt="{if !empty($product.images[$hoverImageID].legend)}{$product.images[$hoverImageID].legend}{else}{$product.name|truncate:30:'...'}{/if}"
		data-full-size-image-url="{$product.images[$hoverImageID].large.url}"
		class="image-thumbnail-rollover"
	/>
{/if}

.thumbnail-container .image-thumbnail-rollover{
	position: absolute;
	top: 0;
	left:0;
	opacity:0;
	transition:all .2s cubic-bezier(.07,.74,.56,.89);
	width: 100%;
}

.thumbnail-container:hover .image-thumbnail-rollover{
	opacity:1;
}

1.6 Change Image on Hover

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in