Rollover image on product list page

[itshubinak]

hi guys i am stuck in onething i want to have rollover effect on product list page mean when i place mouse on product image it change the change to the next image of the same product & when i place out he mouse from the image it gets back to the original image. for this i have used the following code which is working like when i place the mouse image change but the problem is when i plce out the mouse from the image its not getting back to the original image please check it out & give me the solution because it is very important & urgent for  thanks in advance

 

 

Link.php added this code in class folder then link.php file

 

<?php

class Link extends LinkCore

{

  /**

* Returns a link to a product image for display

* Note: the new image filesystem stores product images in subdirectories of img/p/

*

* @param string $name rewrite link of the image

* @param string $ids id part of the image filename - can be "id_product-id_image" (legacy support, recommended) or "id_image" (new)

* @param string $type

* @param integer $rollover id of current product

*/

public function getImageLink($name, $ids, $type = null, $rollover = null)

{

$not_default = false;

// legacy mode or default image

$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');

if ((Configuration::get('PS_LEGACY_IMAGES')

&& (file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg')))

|| ($not_default = strpos($ids, 'default') !== false))

{

if ($this->allow == 1 && !$not_default)

$uri_path = __PS_BASE_URI__.$ids.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';

else

$uri_path = _THEME_PROD_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg';

}

else

{

// if ids if of the form id_product-id_image, we want to extract the id_image part

$split_ids = explode('-', $ids);

$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]);

$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');

 

if(isset($rollover))

{

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

 

if($hover_image)

$id_image = array_shift($hover_image);

else

return '0';

}

elseif(!isset($rollover))

{

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

 

if($hover_image)

$id_image = array_shift($hover_image);

else

return '0';

}

 

 

if ($this->allow == 1)

$uri_path = __PS_BASE_URI__.$id_image.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';

else

$uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').$theme.'.jpg';

}

 

return $this->protocol_content.Tools::getMediaServer($uri_path).$uri_path;

}

}

 

rollover javascript which placed in product list.tpl file

 

<script>

function makeRolloverImages()

{

$(function() {

$('.rollover-images').each(function()

{

var newSrc = $(this).data('rollover');

if(newSrc == 0) return;

 

var oldSrc;

$(this).hover(function()

{

oldSrc = $(this).attr('src');

$(this).attr('src', newSrc).stop(true,true).hide().fadeIn('slow');

}, function()

{

$(this).attr('src', oldSrc).stop(true,true).hide().fadeIn('slow');

});

});

});

}

makeRolloverImages();

</script>

 

image displaying cod ein product list.tpl file

 

<img class="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="{$product.name|escape:html:'UTF-8'}" />

 

 

Please look into the code & resolve this issue.  what is missing to get the iorginal image back after plceing out the mouse hover

[fred-vinapresta]

Hi, I think you shoud override CategoryController and add a parameter in assignProductList function:

foreach ($this->cat_products as &$product)
{
$product['imagesList'] = Image::getImages($this->context->language->id, $product['id_product']);
}

Then in you template you can use $product.imageslist to take image 0  and image 1 of this array and make your rollover by putting the second image as un absolute layer on the first image

[itshubinak]

hi thanx for the reply but can you please elaborate in detail you overrife the categorycontroller should i cahnge in cntollor folder or in override folder & further please tell me in which file should i add this $product.imageslist to take image 0  and image 1 because i m exost with this code if you can write the code because i m not that my expert in prestashop development

[itshubinak]

still i am stuck in this issue PrestaShop Apprentice can you please explain me stey by stey what should i do to fix this issue Thanks in advance

[PascalVG]

Hi Shubinak,

Do I see correctly on your site that this problem has been fixed?

 

If so, can you give an indication what went wrong/what you did to fix it, just for completeness' sake? Maybe others can use this info.

 

If not, can you give a link to where it (still) goes wrong?

 

Thanks,

pascal.

[itshubinak]

issue Hase been resolved i have used the different logic to achieve my required functionality.Thanks

[Rizzzle]

Hi,

 

Please could someone provide instructions how to implement this in 1.6. Ideally so I can copy and past the relevant code.

 

Thanks