Rollover Images homefeatured (Prestashop 1.6)

[dejin]

Hello PrestaShop World,

i'm searching for a code snippet that makes rollover-images possible in the module homefeatured in 1.6 like in this exaple here: http://zensation.polcoder.com/de/

Vivek Tripathi had a pretty good solution for 1.4+. That even worked in 1.5+.
http://www.prestashop.com/forums/topic/150483-home-featured-product-rollover-images/

 

Hi
Here is Home featured rollover image code and file tested on version 1.4+
This contain small modification in original prestashop homefeatured module. you can achieve roll over image functionality by following these simple steps or replace homefeatured.php and homefeatured.tpl with attached files this is not complete module it contains only two file homefeatured.php and homefeatured.tpl

STEP 1

Replace following line in homefeatured.tpl

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" class="vky"/>

Replace with ---

{* ---- modified portion to show rollover image on home featured product start here *}
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" class="vky"/>
{foreach from=$addimages key=k item=v}
{if $k==$product.id_product}
<img src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$v, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.legend|escape:htmlall:'UTF-8'}" style="display:none" class="v" />
{/if}
{/foreach}
{* ---- modified portion to show rollover image on home featured product End here *}


STEP2

add following js at the end of page

{* additional jquery code to rollover image on home featured product *}
{literal}
<script type="text/javascript">
$(document).ready(function(){
$("img.vky").mouseover(function(){
if ( $(this).next("img").length > 0 ) {
$(this).next("img").show();
$(this).hide();
}
});
$(".v").mouseout(function(){
$(this).hide();
$(this).prev("img").show();
});
});
</script>
{/literal}

STEP3

homefeatured.php

< Replace following code in function hookHome($params) near line no 99 >

$products = $category->getProducts((int)($params['cookie']->id_lang), 1, ($nb ? $nb : 10));


Replace with the code
$products = $category->getProducts((int)($params['cookie']->id_lang), 1, ($nb ? $nb : 10));
$p=array();
for($i=0;$i<count($products);$i++){
$product=$products[$i];
unset ($pid);
$pid=$product['id_product'];
$sql= "SELECT * FROM `"._DB_PREFIX_."image` WHERE `id_product` = '{$pid}' AND cover = '0' ORDER BY `id_image` ";
$results = Db::getInstance()->ExecuteS($sql);
$result=$results[0];
$p[$pid]=$result['id_image'];
}
$smarty->assign('addimages',$p);

 

Now in 1.6 it doesn't work anymore... I think the modifications in homefeatured.tpl has to be done now in product-list.tpl.
But when i put in the code into homefeatured.php, it doesnt work at all. The file now differs a lot from the old one...I'm not a specialist in PHP..
Anyone has an idea?

Thanks

 

[martinmartinuser]

Hi Dejin

 

I have the same question. I am using Prestashop 1.6 and I would like to make rollover-images possible for:

- homepage

- product list

 

I know it used to work properly on 1.5 (by modifying categorycontroller.php and product-list.tpl)

 

Does anyone can help? Is it even possible with 1.6?

Many thanks for your help.

 

Best,

 

 

-Martin.

[hideaki]

Not sure if my answer at this other thread is what you are looking for:

 

http://www.prestashop.com/forums/topic/332566-module-for-showing-the-back-of-a-product-on-hover/

[javamobiletech]

Just a comment for others struggling, hideaki´s solution works perfekt and easy to use - thanks  

[nimish.shrvstv]

Just a comment for others struggling, hideaki´s solution works perfekt and easy to use - thanks  

 

I've applied the code suggested by hideaki and am getting the same image shifting a bit and transiting on hovering. Can anyone suggest how to get the second image on hovering?

[SB Lite]

Im also getting the same problem. Did you manage to resolve it?

[ktziavos]

The same problem here! Anyone some help?

[svensson_david]

The cleanest solution I've found so far is to override the getProductProperties function in the Product class and add a reference to the additional image before returning the product properties.

When this has been done you update the product-list.tpl to echo the second image you want and lastly add some css to display:block or display:none on the hover of the container. If you want a transition you can use opacity on the images.