[GUIDE] Rollover images on product lists

[Krystian Podemski]

Hello,

 

I just did make very simple solution for rollover images which you can use on every single product list in PrestaShop theme. Some people have said that it is time-consuming and difficult etc. Nonsense.

 

All files are here:

https://gist.github.com/kpodemski/6422098

 

1. Link.php to override/classes (remember to delete cache/class_index.php)

2. JS you can paste in footer.tpl or include wherever you want.

3. example.tpl contains sample <img src> tag.

 

Solution base on idea from http://www.prestashop.com/forums/user/3229[spam-filter]at2/

 

You can remove "fade effect" by deleting ".stop(true,true).hide().fadeIn('slow')" from .js

 

 

[PrestaShark]

Hi Krystian,

I have issue at 1.5.6.2.

When i want to apply Link.php override at 1.5.6.2 i have white page at FO. Clean install. Cleared class_index.php and nothing. Any solution for this?

Parse error: syntax error, unexpected $end, expecting T_FUNCTION in /home/zazl/domains/xxx/public_html/modaciazowa/override/classes/Link.php on line 54

Thanks in advance!

 

 

SOLVED!

Code lacks closing bracket } at the end!

 

 

ESSENTIAL tip

the Link.php file must be UTF-8 (no BOM) file format! otherwise we will experience "Cannot modify header information - headers already sent by" php issue

Edited March 5, 2014 by kisweb (see edit history)

[PrestaShark]

Hi. I found another issue. When we use blocklayerednavigation and we choose the first parameter the rollover effect is gone

Any suggestion?

[Krystian Podemski]

Hi,

 

Put javascript code into function like in gist:

https://gist.github.com/kpodemski/6422098

 

makeRolloverImages must be called when document is ready and right before closing bracket in reloadContent function in blocklayered.js

[PrestaShark]

Hi Krystian,

So i must integrate this .js code into blocklayered.js file? Sorry im not a good programmer. Thanks!

[kongsuse]

Hi,

 

Sorry im newb, but where do the different codes go?

 

Link.php goes where - >  Classes/link.php (the original link.php) replace it with your code - or do i make a new .php file with your code and put it in the override/classes folder?

 

Js. code goes -> anywhere ? So i can put it at the bottom of my homefeatured.tpl.

 

The exsample.tpl -> Is how i call for rolloverimage? So if i want my Homefeatured products to have rollover, ill put this code in homefeatured.tpl

 

Thanks for your guide - but i'll need a little help to understand.

[PrestaShark]

Hi!

1) Link.php goes to overrides/classes !

2) js code put to footer.tpl or header.tpl or just in homefeatured.tpl if You want to rollover images only for homefeatured module.

3) example is just for illustrate how to replace the img tags on homefeatured, product-list tpl files

[kongsuse]

Thanks a lot!

Great help..

Edited March 20, 2014 by kongsuse (see edit history)

[kongsuse]

Works perfectly !

[kongsuse]

Where do i put in my own img. in the exsample code?

[PrestaShark]

great
im glad to help.

own img? rollover image is taken from second product image

[kongsuse]

Yeah, i only added this "Rollover feature" to Homefeatured. So when i hover one of my img of product it just blink - like goes black and back to normal. where do i place the second img?

 

My idea was to have a rolloverimg that says "View this" when you hover over product. .

Edited March 20, 2014 by kongsuse (see edit history)

[Krystian Podemski]

Oh, the whole topic is not solution for your problem

[PrestaShark]

Ouch!
This can be done with css without this solution. It is wasting of this solution.

Search for Image Hover CSS Effects on google.

http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html

http://codecanyon.net/item/sinister-pure-css-image-hover-effects/full_screen_preview/6510972

Look also for Leo Shoe free prestashop theme too

Edited March 20, 2014 by kisweb (see edit history)

[PrestaShark]

Krystian,

Do You have an idea how to show bigger image on image hover ?

This will be quite similar to Your solution of rollover images.

[Krystian Podemski]

Kisweb,

 

This shouldn't be a big problem, try to add that line:

$type = 'thickbox_default';

after that: https://gist.github.com/kpodemski/6422098#file-link-php-L41 line

 

I have not tested this but it should work.

[PrestaShark]

Hi!
 

IT WORKS!

 

PS. Also from https://gist.github.com/kpodemski/6422098#file-link-php-L36

$hover_image = Db::getInstance()->getRow('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$rollover.' AND position = 2');

to

$hover_image = Db::getInstance()->getRow('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$rollover.' AND position = 1');

 

Thanks!

Edited March 28, 2014 by kisweb (see edit history)

[PrestaShark]

This GUIDE works with PS 1.6.0.5 too

 

everything is the same. paste .js code to footer.tpl, Link.php to override/classes

 

edit product-list.tpl from default PS1.6 template folder and change

<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" />

to

<img class="replace-2x img-responsive rollover-images" data-rollover="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}" src="{$link->getImageLink($product.link_rewrite, $product.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" />

And You will see magic
Thanks Krystian for this awesome contribution!

[generalexperts]

Krystian,

 

I'm looking for help on applying CCS effects from; http://tympanus.net/Tutorials/OriginalHoverEffects/index.html. (Demo 1).

 

I posted this in the PS forum a couple weeks ago... http://www.prestashop.com/forums/topic/315201-how-to-add-custom-css-hover-effects-to-homefeatured/

 

Let me know if you can help, I'd greatly appreciate it!!

 

Thanks!

[julesfromparis]

Hi Krystian, 

 

It doesn't work for me, I don't understand why ...

I see that in my page : 

a class="product_image" title="SAPIN ET POIVRE " href="http://localhost:8888/prestashop/fr/home/1-sapin-et-poivre-1312321321312.html">
<img class="rollover-images" alt="" src="http://localhost:8888/prestashop/-home_default/.jpg" data-rollover="http://localhost:8888/prestashop/-home_default/.jpg">
</a>

I've done :

> Remplace Link.php in override 

> Remplace <img> code 

 

For information, my products are directly on my homepage. But I do not see that it can change ...

 

Thank you for your help. 

 

Ju

[camereroloco]

Hello,

 

I am having a problem with this code with paginated lists. The rollover works for products in page 1, however for pages 2 and subsequent ones it does not work.

 

Can anyone please advise?

 

Thank you!

[123emman123]

Hi!

 

I applied all the codes that you've provided but it doesn't work for me. Whenever I hover the product in product-list.tpl it always get the first image. Here is the link of my test site. http://www.perfectrelay.net/sandugo/3-shop

 

Really appreciate your help.

 

Thanks!

[generalexperts]

On page 1 of this thread I posted a question to this main thread. Still looking for help, it's been a while with no help.

Thank you!!

[Krystian Podemski]

@generalexperts - sorry but your questions is totally not related to this topic

 

@all others - I am going to update this solution within few days

[Uvo]

Hello and thanks for this guide but i have an issue

 

I have create the Link.php in override/classes/

And add the js section in my footer tpl because i want it in all my page

But nothing happen when mouse over...

My prestashop is : 1.5.4.1

Here is my website : www.accessoire-telephones.fr

 

Thanks a lot for your help
Martin

Edited July 23, 2014 by Uvo (see edit history)

[sickshot]

Hi!

 

I applied all the codes that you've provided but it doesn't work for me. Whenever I hover the product in product-list.tpl it always get the first image. Here is the link of my test site. http://www.perfectrelay.net/sandugo/3-shop

 

Really appreciate your help.

 

Thanks!

 

I have same problem please help 

[kashifkhan112]

I have applied it in Prestashop 1.6 version, it works on default product list page when we click on next page(pagination) it does not work

 

The reason is because in Prestashop 1.6 when we click on next page so only product list updates, not all page refresh.

 

Any suggestion please

Edited May 14, 2015 by kashifkhan112 (see edit history)

[Galo]

Hello,
Working Version 1.6.0.14

Thank you!

[AdrianaM]

I have applied it in Prestashop 1.6 version, it works on default product list page when we click on next page(pagination) it does not work

 

The reason is because in Prestashop 1.6 when we click on next page so only product list updates, not all page refresh.

 

Any suggestion please

 

I removed rollover.js script from footer.tpl and paste it only to product-list.tpl and blocklayered.js (because I need it to work also with layered navigation). And my img class in product-list.tpl looks like this:

<img class="replace-2x img-responsive rollover-images" data-rollover="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}" src="{$link->getImageLink($product.link_rewrite, $product.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" />

So know it works on all pages.

If you want it work with layered navigation after paste this rollover.js script at the top of blocklayered.js (public_html/modules/blocklayered/blocklayered.js) you also need to add  makeRolloverImages(); in function reloadContent before last closing bracket ( in the same blocklayered.js).

 

For me it all works great.

My prestashop version: 1.6.0.14

[m3442a]

The Script working very good on my PS 1.6.0.14 - but how can i modify the script to get this effect? (Mouseover product)

 

http://www.bdsm-erotik-versandhandel.com/elektro-sex-elektrosex-reizstrom-stimulation-toys/sets/index.shtml

 

I think this ist a JS Modification. Or any other Ideas?

 

thanks

[hakeryk2]

Well I did everything and everything works ok except one thing - on main page in bestselller, new etc blocks image is rollovered but it is not coming back to original one when mouse leave. When I reload page I see first original image, when I hover I see second one, when mouseout it is still showing second image. I don't know why. Any help? 1.6.1.4

Edited April 22, 2016 by hakeryk2 (see edit history)

[patrmich]

Hello,

I know this topic is a bit old.

First of all, thank you for this very clear tutorial.

But let me ask a new question.
The tutorial shows how to display a second image when hovering over a product image on the product_list page.
How would it be possible to display a slider of the different product images (as I have up to ten images per product).

Thank you in advance for any response.