Jump to content

[GUIDE] Rollover images on product lists


Recommended Posts

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:


 

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.

 


 

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

 

 

  • Like 4

Share this post


Link to post
Share on other sites

  • 6 months later...

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

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

  • 2 months later...

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

Share this post


Link to post
Share on other sites

  • 3 weeks later...

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

Share this post


Link to post
Share on other sites

  • 5 months later...
  • 3 months later...

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

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 2 months later...

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

Share this post


Link to post
Share on other sites

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

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 by hakeryk2 (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