Jump to content

Change Image on Hover


kdmonk1
 Share

Recommended Posts

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)

Share this post


Link to post
Share on other sites

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 by kdmonk1 (see edit history)
  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

  • 2 months later...
  • 7 months later...

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;
    }
}
  • Like 1

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

 

 

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

post-809653-0-01435900-1441467695_thumb.jpg

Edited by John Yossarian (see edit history)

Share this post


Link to post
Share on other sites

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 by JackusD (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...

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

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 4 weeks later...
  • 2 months later...

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).

Share this post


Link to post
Share on other sites

  • 3 years later...
  • 2 months later...
  • 7 months later...
  • 3 months later...
  • 2 months later...
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}

 

  • Like 2

Share this post


Link to post
Share on other sites

  • 5 months later...
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...

Share this post


Link to post
Share on other sites

  • 1 month later...
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 by HackID1 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 10 months later...
Posted (edited)
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 😉

<style>
img.dw-img-hover {  position: absolute;  left: 0; top: 0;  opacity: 0;  transition: all .5s cubic-bezier(.07,.74,.56,.89); }
img.dw-img-hover:hover {    opacity: 1;}
</style>

 

		{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 by Gian Luca (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More