Jump to content

rollover image in product list

persephonevintage
 Share

Recommended Posts

  • 2 weeks later...
thebaud Newbie

thebaud

Posted
Posted

Hi All

I have made change in core file

to acheive functionality of rollover image on hover You have two option

either

copy paste following codes in their pages marked bellow or

copy paste file i have attached with this post.

This is also applicable on prestashop version 1.3.1+ if you want to change below 1.4version it is advised to

open each file and copy paste code in respective file marked below

 

I found that some of code parsed by editor so I have written all Necessary code in attached files

 

Note1- you have to add at least two image of each product

 

Note2- Please go through the readme-imp.txt in attached zip file for clear instruction

for you reffrence goto www.miquella.com->shop

Thanks so much !!

It works perfectly.

you can see it in action here

  • Like 1
Link to comment
Share on other sites
AT2 Newbie

AT2

Posted
Posted

Hi AT2

 

The link you posted to suggests uploading images for products. Am I not understanding correctly? I have over 4000 products so not an option for me...

 

Thanks

 

 

Look at post #15 of that link.

 

In any case, if you follow my instructions you don't need to read that thread.

 

If you use this solution, you don't have to regenerate any image, so it fits your needs.

 

bye :)

Link to comment
Share on other sites
  • 3 weeks later...
mproject3000 Newbie

mproject3000

Posted
Posted

Hi guys,

 

I have tested yesterday the solution i found here, then i saw the problems with layered navigation, filter etc... and i thought that the solution must be different, the solution must be something above the singolar category class or similar.

so i think you are on the wrong road and i searched for another solution. the solution i found is write in french language, i watched the code and i've get it work.

 

my version of prestashop is the last one: 1.5.3.1 but this solution should work (or adapted) for any version.

 

the link for the solution is http://www.prestasho...g-des-produits/

 

i explain for the non-french reader (like me, i'm italian)

 

you have to edit

 

class/Link.php

 

find :

 

public function getImageLink($name, $ids, $type = NULL)

 

and edit to :

 

public function getImageLink($name, $ids, $type = NULL, $idOver= NULL)

 

(id over is the id of the product)

 

 

then find :

 

 

$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 : '');

 

 

 

and edit to:

 

$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($idOver)){
$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
foreach ($result as $row)
$id_image_over = $row['id_image'];
}else{
$id_image_over = 0;
}

if($id_image_over != 0){
$id_image = $id_image_over;
}

 

 

 

so the finally function getImageLink should look like this:

 

 

public function getImageLink($name, $ids, $type = null, $idOver= 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($idOver)){
$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
foreach ($result as $row)
$id_image_over = $row['id_image'];
}else{
$id_image_over = 0;
}

if($id_image_over != 0){
$id_image = $id_image_over;
}

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;
}

 

 

then edit your_theme/product-list.tpl,

 

find:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

and edit to:

 

<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

 

pay attention to 'home_default', in my case it works, for some other it could be 'home' or different.

 

 

I think that this solution can be use everywhere you want, without touching other classes or controllers (like it should be i think), just change the img part where you want (featured product and so)

 

i hope everyone can understand my bad english.

 

hope it helps.

 

bye :)

 

Thanks a lot!

  • Like 4
Link to comment
Share on other sites
  • 2 months later...
  • 2 weeks later...
  • 2 weeks later...
srm200 Newbie

srm200

Posted
Posted

Hello AT2 and thank you for this great solution.

 

I have vs 1.5.4 and the mouse over works great but unfortunately only on products categories.

 

In Home, where the home featured products the mouse over is not working.

 

Any idea how I can fix this ?

 

Thank you very much again.

Link to comment
Share on other sites
  • 4 weeks later...
Bluepark Newbie

Bluepark

Posted
Posted

Hello AT2 and thank you for this great solution.

 

I have vs 1.5.4 and the mouse over works great but unfortunately only on products categories.

 

In Home, where the home featured products the mouse over is not working.

 

Any idea how I can fix this ?

 

Thank you very much again.

 

Yes man,

 

find the line in homefeatured.tpl:

<img something>

 

and change to:

 

<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

Link to comment
Share on other sites
x13_pl Newbie

x13_pl

Posted
Posted

http://pewnesamochody.pl/4-samochody-dostepne-w-niemczech

 

'Vekla' zależy mi na tym aby uzuskać efekt podobny jak w otomoto.pl , czyli najeżdzasz na zdjęcie pojawia się tooltip i w nim możesz przełączać zdjęcia.

 

('Vekla' important to me in order to receive a similar effect as in otomoto.pl, which invades the image appears in the tooltip, and you can switch between images.)

Link to comment
Share on other sites
michael_villeneuve Newbie

michael_villeneuve

Posted
Posted (edited)

Hi, I've tried many of these solutions, but none of these are working for me. The onmouseover of the AT2's solution is just creating the same link as the initial src. In fact it has not changed anything... Any idea ? :( Here is the link to the page http://popelin.es/tienda/index.php?id_category=9&controller=category&id_lang=3. My prestashop version is 1.5.4.1 . Thank you in advance...

Edited by michael_villeneuve (see edit history)
Link to comment
Share on other sites
michael_villeneuve Newbie

michael_villeneuve

Posted
Posted

Well it doesn't change anything, when I inspect each image I can see the "onmouseover" but its link is the same as the normal image. Here is my link.php :

 

 

public function getImageLink($name, $ids, $type = null, $idOver= 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($idOver)){

$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');

foreach ($result as $row)

$id_image_over = $row['id_image'];

}else{

$id_image_over = 0;

}

 

if($id_image_over != 0){

$id_image = $id_image_over;

}

 

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;

 

}

 

public function getMediaLink($filepath)

{

return Tools::getProtocol().Tools::getMediaServer($filepath).$filepath;

}

 

 

and here is the code of the image in product-list.tpl :

 

<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'large', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$largeSize.width}" height="{$largeSize.height}"{/if} />

 

thank you :-)

Link to comment
Share on other sites
michael_villeneuve Newbie

michael_villeneuve

Posted
Posted

Bon après de longues heures de recherche j'ai finalement trouvé solution ici : http://www.prestashop.com/forums/topic/216150-aporte-rollover-de-imagenes-en-la-product-list/, en éspérant que cela serve à quelqu'un ! Cela fonctionne parfaitement pour moi sur la version 1.5.4 ! À voir ici : http://popelin.es/tienda/es/9-bisuteria-mujeres-popelin-texturas-colores

Link to comment
Share on other sites
Fistou69 Newbie

Fistou69

Posted
Posted
Bon après de longues heures de recherche j'ai finalement trouvé solution ici : http://www.prestashop.com/forums/topic/216150-aporte-rollover-de-imagenes-en-la-product-list/, en éspérant que cela serve à quelqu'un ! Cela fonctionne parfaitement pour moi sur la version 1.5.4 ! À voir ici : http://popelin.es/tienda/es/9-bisuteria-mujeres-popelin-texturas-colores

 

Bonjour michael_villeneuve

 

Tu es arrivé a inclure le rolover sur image.

j'ai essayer de suivre le tuto que tu indiques.

Mais malheureusement je n'arrive pas à reproduire le tuto, en effet il n'indique pas pour chaque modif le numéro de la ligne ou inclure la modif.

 

Peux tu nous compléter le tuto ou peut être nous poster les fichiers modifier :) .

J'utilise la v1.5.4.1

 

Merci par avance.

Cordialement.

Link to comment
Share on other sites
michael_villeneuve Newbie

michael_villeneuve

Posted
Posted
Bonjour michael_villeneuve Tu es arrivé a inclure le rolover sur image. j'ai essayer de suivre le tuto que tu indiques. Mais malheureusement je n'arrive pas à reproduire le tuto, en effet il n'indique pas pour chaque modif le numéro de la ligne ou inclure la modif. Peux tu nous compléter le tuto ou peut être nous poster les fichiers modifier :) . J'utilise la v1.5.4.1 Merci par avance. Cordialement.

 

Salut Fistou 69 voici le code des fichiers modifiés :

 

categorycontroller.php :

 

 

class CategoryControllerCore extends FrontController

{

public $php_self = 'category';

protected $category;

public $customer_access = true;

 

/**

* Set default medias for this controller

*/

public function setMedia()

{

parent::setMedia();

 

if ($this->context->getMobileDevice() == false)

{

//TODO : check why cluetip css is include without js file

$this->addCSS(array(

_THEME_CSS_DIR_.'scenes.css' => 'all',

_THEME_CSS_DIR_.'category.css' => 'all',

_THEME_CSS_DIR_.'product_list.css' => 'all',

));

 

if (Configuration::get('PS_COMPARATOR_MAX_ITEM') > 0)

$this->addJS(_THEME_JS_DIR_.'products-comparison.js');

}

}

 

public function canonicalRedirection($canonicalURL = '')

{

if (!Validate::isLoadedObject($this->category) || !$this->category->inShop() || !$this->category->isAssociatedToShop())

{

$this->redirect_after = '404';

$this->redirect();

}

if (!Tools::getValue('noredirect') && Validate::isLoadedObject($this->category))

parent::canonicalRedirection($this->context->link->getCategoryLink($this->category));

}

 

/**

* Initialize category controller

* @see FrontController::init()

*/

public function init()

{

// Get category ID

$id_category = (int)Tools::getValue('id_category');

if (!$id_category || !Validate::isUnsignedId($id_category))

$this->errors[] = Tools::displayError('Missing category ID');

 

// Instantiate category

$this->category = new Category($id_category, $this->context->language->id);

 

parent::init();

//check if the category is active and return 404 error if is disable.

if (!$this->category->active)

{

header('HTTP/1.1 404 Not Found');

header('Status: 404 Not Found');

}

//check if category can be accessible by current customer and return 403 if not

if (!$this->category->checkAccess($this->context->customer->id))

{

header('HTTP/1.1 403 Forbidden');

header('Status: 403 Forbidden');

$this->errors[] = Tools::displayError('You do not have access to this category.');

$this->customer_access = false;

}

}

 

public function initContent()

{

parent::initContent();

 

$this->setTemplate(_PS_THEME_DIR_.'category.tpl');

 

if (!$this->customer_access)

return;

 

if (isset($this->context->cookie->id_compare))

$this->context->smarty->assign('compareProducts', CompareProduct::getCompareProducts((int)$this->context->cookie->id_compare));

 

$this->productSort(); // Product sort must be called before assignProductList()

 

$this->assignScenes();

$this->assignSubcategories();

if ($this->category->id != 1)

$this->assignProductList();

 

$this->context->smarty->assign(array(

'category' => $this->category,

'products' => (isset($this->cat_products) && $this->cat_products) ? $this->cat_products : null,

'id_category' => (int)$this->category->id,

'id_category_parent' => (int)$this->category->id_parent,

'return_category_name' => Tools::safeOutput($this->category->name),

'path' => Tools::getPath($this->category->id),

'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),

'categorySize' => Image::getSize(ImageType::getFormatedName('category')),

'mediumSize' => Image::getSize(ImageType::getFormatedName('medium')),

'thumbSceneSize' => Image::getSize(ImageType::getFormatedName('m_scene')),

'homeSize' => Image::getSize(ImageType::getFormatedName('home')),

'allow_oosp' => (int)Configuration::get('PS_ORDER_OUT_OF_STOCK'),

'comparator_max_item' => (int)Configuration::get('PS_COMPARATOR_MAX_ITEM'),

'suppliers' => Supplier::getSuppliers()

));

}

 

/**

* Assign scenes template vars

*/

protected function assignScenes()

{

// Scenes (could be externalised to another controler if you need them)

$scenes = Scene::getScenes($this->category->id, $this->context->language->id, true, false);

$this->context->smarty->assign('scenes', $scenes);

 

// Scenes images formats

if ($scenes && ($sceneImageTypes = ImageType::getImagesTypes('scenes')))

{

foreach ($sceneImageTypes as $sceneImageType)

{

if ($sceneImageType['name'] == ImageType::getFormatedName('m_scene'))

$thumbSceneImageType = $sceneImageType;

elseif ($sceneImageType['name'] == ImageType::getFormatedName('scene'))

$largeSceneImageType = $sceneImageType;

}

 

$this->context->smarty->assign(array(

'thumbSceneImageType' => isset($thumbSceneImageType) ? $thumbSceneImageType : null,

'largeSceneImageType' => isset($largeSceneImageType) ? $largeSceneImageType : null,

));

}

}

 

/**

* Assign sub categories templates vars

*/

protected function assignSubcategories()

{

if ($subCategories = $this->category->getSubCategories($this->context->language->id))

{

$this->context->smarty->assign(array(

'subcategories' => $subCategories,

'subcategories_nb_total' => count($subCategories),

'subcategories_nb_half' => ceil(count($subCategories) / 2)

));

}

}

 

/**

* Assign list of products template vars

*/

public function assignProductList()

{

$hookExecuted = false;

Hook::exec('actionProductListOverride', array(

'nbProducts' => &$this->nbProducts,

'catProducts' => &$this->cat_products,

'hookExecuted' => &$hookExecuted,

));

 

// The hook was not executed, standard working

if (!$hookExecuted)

{

$this->context->smarty->assign('categoryNameComplement', '');

$this->nbProducts = $this->category->getProducts(null, null, null, $this->orderBy, $this->orderWay, true);

$this->pagination((int)$this->nbProducts); // Pagination must be call after "getProducts"

$this->cat_products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);

 

$image_array=array();

for($i=0;$i<count($this->cat_products);$i++)

{

//Change 3 with the number of images you want to display

$image_array[$i]= $this->category->getProductsimg($this->cat_products[$i]['id_product'],3);

}

self::$smarty->assign('productimg',(isset($image_array) AND $image_array) ? $image_array : NULL);

}

// Hook executed, use the override

else

// Pagination must be call after "getProducts"

$this->pagination($this->nbProducts);

 

foreach ($this->cat_products as &$product)

{

if ($product['id_product_attribute'] && isset($product['product_attribute_minimal_quantity']))

$product['minimal_quantity'] = $product['product_attribute_minimal_quantity'];

}

 

$this->context->smarty->assign('nb_products', $this->nbProducts);

}

}

 

Colle le code ci-dessus à la place de ce qu'il y dans categorycontroller, à partir du haut, après les commentaires.

 

Et le code ci-dessus c'est product-lit.tpl en entier :

 

 

{*

* 2007-2012 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2012 PrestaShop SA

* @version Release: $Revision: 7457 $

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

 

{if isset($products)}

<!-- Products list -->

<ul id="product_list" class="clear">

{foreach from=$products item=product name=products}

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

<div class="left_block">

{if isset($comparator_max_item) && $comparator_max_item}

<p class="compare">

<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} />

<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>

</p>

{/if}

</div>

<div class="center_block">

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">

{foreach from=$productimg key=key1 item=pimage}

{foreach from=$pimage key=key2 item=pimage2}

{if $product.id_product==$pimage2.id_product}

<img src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$pimage2.id_image, '')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} style="width:300px;height:300px"{/if} class="{$key2}" />

{/if}

{/foreach}

{/foreach}

</a>

<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h3>

<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>

</div>

<div class="right_block">

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

<div class="content_price">

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

</div>

{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}

{/if}

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}" style=" padding-left: 15px;"><span></span>{l s='Add to cart'}</a>

{else}

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", false)} title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{/if}

{else}

<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />

{/if}

{/if}

<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>

</div>

</li>

{/foreach}

</ul>

<!-- /Products list -->

{/if}

{literal}

<script type="text/javascript">

$(document).ready(function(){

$(".1").hide();

$("img.0").mouseover(function(){

if ( $(this).next("img").length > 0 ) {

$(this).next("img").show();

$(this).hide();

}

});

$(".1").mouseout(function(){

$(this).hide();

$(this).prev("img").show();

});

});

</script>

{/literal}

 

 

Il se peut que tu aies quelques bugs avec les tailles d'images. Je te laisse modifier "widht" et "height" à ta guise.

Personnellement ça a marché pour moi. Remplace chaque fichiers : categorycontroller est dans controller/front/ et product list est dans les fichiers de ton thème. Oublie pas de remplacer "homesize" et large_default par la taille d'image que tu souhaites !

Link to comment
Share on other sites
  • 3 weeks later...
sebastians Newbie

sebastians

Posted
Posted

I followed the instructions from post #100 and it worked in 1.5.4.

 

One thing I noticed are that the second images are not pre-loaded - as a result there is a slight time lag between when you hover over an image and when the 2nd image shows.

 

Any of you figured out how to adjust the code to load the 2nd images already on page load and not only on hover?

Link to comment
Share on other sites
  • 2 months later...
  • 2 months later...
fabioemerson Newbie

fabioemerson

Posted
Posted

Hi guys,

 

I have tested yesterday the solution i found here, then i saw the problems with layered navigation, filter etc... and i thought that the solution must be different, the solution must be something above the singolar category class or similar.

so i think you are on the wrong road and i searched for another solution. the solution i found is write in french language, i watched the code and i've get it work.

 

my version of prestashop is the last one: 1.5.3.1 but this solution should work (or adapted) for any version.

 

the link for the solution is http://www.prestasho...g-des-produits/

 

i explain for the non-french reader (like me, i'm italian)

 

you have to edit

 

class/Link.php

 

find :

 

public function getImageLink($name, $ids, $type = NULL)

and edit to :

 

public function getImageLink($name, $ids, $type = NULL, $idOver= NULL)
(id over is the id of the product)

 

 

then find :

 

 

$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 : '');

 

and edit to:

 

$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($idOver)){
$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
foreach ($result as $row)
$id_image_over = $row['id_image'];
}else{
$id_image_over = 0;
}

if($id_image_over != 0){
$id_image = $id_image_over;
}

 

so the finally function getImageLink should look like this:

 

 

public function getImageLink($name, $ids, $type = null, $idOver= 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($idOver)){
$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
foreach ($result as $row)
$id_image_over = $row['id_image'];
}else{
$id_image_over = 0;
}

if($id_image_over != 0){
$id_image = $id_image_over;
}

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;
}

then edit your_theme/product-list.tpl,

 

find:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
and edit to:

 

<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

pay attention to 'home_default', in my case it works, for some other it could be 'home' or different.

 

 

I think that this solution can be use everywhere you want, without touching other classes or controllers (like it should be i think), just change the img part where you want (featured product and so)

 

i hope everyone can understand my bad english.

 

hope it helps.

 

bye :)

 

 

Works 100% in my version 1.5.6.1 !!! 

 

Thanks thanks thanks AT2, is perfect!!!   :lol:

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
matt37137 Newbie

matt37137

Posted
Posted (edited)

AT2 your solution is superb, but i have one problem that i cannot solve. I try with this guide http://www.prestashop.com/forums/topic/272119-guide-rollover-images-on-product-lists/ but its not what i want.

 

I would like to give fade effect between images without passing through background. But on solution from link that i gave above its not as i want. Basicly it fade out first image, then fade through background, and then to the second image. I would like to get effect like first image changes slowly opacity to 0% on hover, to see second image. Then the same after relase the hover to the first picture. I dont want to see the background between images.

 

Can anyone help? :)

Edited by matt37137 (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
Ixtein Newbie

Ixtein

Posted
Posted

Hello,

we have got Presta 1.4. We successfully installed the module and it works great, but we have got problem with this module:

http://www.prestashop.com/forums/topic/232911-module-infinite-ajax-scroll-d%C3%A9filement-infini-en-ajax/

 

When we click on button to load other products, it shows the first image and the second image under it. You can see it here: http://www.svetnaramku.cz/27-shamballa-naramky-style - the red button "Dalsi produkty"

 

Please, could somebody help us with that problem?

Thank you so much

Link to comment
Share on other sites
Uncanny Newbie

Uncanny

Posted
Posted (edited)

Hello,

we have got Presta 1.4. We successfully installed the module and it works great, but we have got problem with this module:

http://www.prestashop.com/forums/topic/232911-module-infinite-ajax-scroll-d%C3%A9filement-infini-en-ajax/

 

When we click on button to load other products, it shows the first image and the second image under it. You can see it here: http://www.svetnaramku.cz/27-shamballa-naramky-style - the red button "Dalsi produkty"

 

Please, could somebody help us with that problem?

Thank you so much

 

Ok, we solved it!

 

We solved that different way. Thanks to AT2. We had to change the code for Presta 1.4.9.

 

We changed link.php:

			// 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]);

                        if(isset($idOver)){
                        $result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
                        foreach ($result as $row)
                        $id_image_over = $row['id_image'];
                        }else{
                        $id_image_over = 0;
                        }

			if($id_image_over != 0){
			$id_image = $id_image_over;
			}

			if ($this->allow == 1)
				$uri_path = __PS_BASE_URI__.$id_image.($type ? '-'.$type : '').'/'.$name.'.jpg';
			else
				$uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'.jpg';
		}

		return $protocol_content.Tools::getMediaServer($uri_path).$uri_path;
	}

and product-list.tpl in theme:

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>

For homefeatured.tpl:

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">
<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" /></a>

Thank you all.

Edited by sirtoby (see edit history)
Link to comment
Share on other sites
  • 3 months later...
  • 2 weeks later...
julesfromparis Newbie

julesfromparis

Posted
Posted (edited)

Hi, 

 

This code does't work with me... 

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

No name of image... 

 

1 - I remplace 2 codes in link.php (class) > ok 

2 - I remplace 1 code in product-list.tpl or other > ok 

 

We remplace in override folder too ? 

Can we work with png ? 

 

I dont't undersand why it's doesn't work !! :(

 

Thank you

Edited by julesfromparis (see edit history)
Link to comment
Share on other sites
  • 3 months later...
  • 1 year later...
CS Appsaradev Newbie

CS Appsaradev

Posted
Posted

Hello,

Somebody can tell me, where we can find this file, or what to do, for version : 1.6.1.1 ?

Thanks

 

BRice

-> in your root directory->classes->Link.php and then find function getImageLink, and then just add all of these below code:

public function getImageLink($name, $ids, $type = null, $idOver = 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 ( $idOver )) {
$result = Db::getInstance ()->ExecuteS ( 'SELECT id_image FROM ' . _DB_PREFIX_ . 'image WHERE id_product = ' . $idOver . ' AND position = 2' );
foreach ( $result as $row )
$id_image_over = $row ['id_image'];
} else {
$id_image_over = 0;
}
 
if ($id_image_over != 0) {
$id_image = $id_image_over;
}
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;
}
 
 
->navigate to your theme name ->find->product-list.tpl and add code below:
 
<img class="replace-2x img-responsive rollover-img-old" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'tm_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}" itemprop="image" />
 
 

See image below:

 

post-1118208-0-62262400-1446552663_thumb.png

 

 

Thank You !!

Link to comment
Share on other sites
  • 2 weeks later...
CS Appsaradev Newbie

CS Appsaradev

Posted
Posted

Thanks, but nothing work for me..! I try to put this code where you tell me.! but not working.. Blank Page. !!

 

No prob, i will try to found a module for this.!

 

Thanks

 

Brice

 

You can use my attachment file below , it will guide you all what you need now.

 

Image on rollover change.zip

 

My prestashop (PS Version is 1.6.0.8)

 

Thank.

 

Chantouch Sek

 

Appsaradev Team

Link to comment
Share on other sites
CS Appsaradev Newbie

CS Appsaradev

Posted
Posted

Hi, i try to use your tutorial but it doesn't work, i'm using prestashop 1.6.0.9 and kronan theme, i don't know if can be a problem with the theme .

I think , you should check your image's name, coz my PS image's name is home-default in your code.

 

check it out in debug in firebug in firefox below.

 

post-1118208-0-86755500-1447744302_thumb.png

post-1118208-0-61674500-1447744304_thumb.png

 

Thanks.

 

Chantouch

 

AppsaraDev.com Team

Link to comment
Share on other sites
pedluis Newbie

pedluis

Posted
Posted

I think , you should check your image's name, coz my PS image's name is home-default in your code.

 

check it out in debug in firebug in firefox below.

 

Yes, sorry i resolved yesterday. It was a problem with order image, all were setting to 0, now are ordering it works perfectly, thank you!

Link to comment
Share on other sites
  • 2 months later...
  • 1 month later...
mantas779 Newbie

mantas779

Posted
Posted

i tried in 1.6.1.4, couldn't get it to work .

 

tried this link http://www.majory-cubizolles.fr/blog/rollover-deuxieme-image-prestashop/

 

it doesn't  use the link.php , but uses new files in override/classes

 

but got question marks with the second picture.  looks like it couldn't find the second image , path went to -home_default and not to a number like the first image to the p folder in img.

Link to comment
Share on other sites
mantas779 Newbie

mantas779

Posted
Posted (edited)

somehow it start to work? i have to check wich files , i left  and wich ones i put back.

 

http://giezen-linen.nl/en/

 

better back up first the whole website again.

 

Recap:  put in the new link.php and the product-list.tpl and got a blank screen in my back office admin 

so i changed the files back to the originals, admin was visible again. After that the images hover over started to work on the website.

But expected after clearing Cache , the old situation was restored.

Edited by mantas779 (see edit history)
Link to comment
Share on other sites
Vali Iacobescu Newbie

Vali Iacobescu

Posted
Posted (edited)

Hi,

I have a problem with fresh installation of prestashop 1.6.1.0 on live server.

 

After installation directly through ftp, in Firefox 44.0.2, all product in grid list view, "add to cart" button and "more" button appear by default. Instead, when I hover mouse over the products, "quick view" label does not appears at all, neither the shadow around products.

 

After I cleared out the cache and cookies, it works, but when I refresh the page, problem reappear again.

 

I have to mention that I run a test on localhost with the same version of prestashop and I have no problem at all.

It could be a hosting server config problem or jquery library conflict?

 

This is the link:

http://scufita-rosie.ro/magazin-scufita/

 

Please help me!

Edited by Vali Iacobescu (see edit history)
Link to comment
Share on other sites
  • 3 months later...
prestashopaddon Newbie

prestashopaddon

Posted
Posted

i'm interested in creating rollover images in my product list. so in essence, i want my product image to change when my mouse moves over the image.

 

and example of this http://www.lafraise.com/Index/index/style/41

 

does anyone know how to do this? i've found a tutorial on how to do this (http://www.tutorials007.com/css-rollover-effect/) but i'm not sure how to integrate it into prestashop. i appreciate your input!

 

I made a complete module to do that, you can also choose the transition effect you like at backend. check my topic: https://www.prestashop.com/forums/topic/96085-rollover-image-in-product-list/

 

Best

 

Trong

Link to comment
Share on other sites
  • 4 months later...
Attrexx Newbie

Attrexx

Posted
Posted

You can use my attachment file below , it will guide you all what you need now.

 

attachicon.gifImage on rollover change.zip

 

My prestashop (PS Version is 1.6.0.8)

 

Thank.

 

Chantouch Sek

 

Appsaradev Team

 

I am sorry but it's not working on my 1.6.1.9 PS

It thrown an error on the tpl file. It says there's no such function called getImageLink. Which is strange because it's defined in Link.php (I did all the mods there too).

Link to comment
Share on other sites
  • 10 months later...
dirtrider118 Newbie

dirtrider118

Posted
Posted (edited)

This is how I got it to work in 1.6.1.17. This may not work as there may be more files or changes I made that I can't recall, but I can 100% confirm this is working in my shop.

 

In classes file Link.php override or change function "getImageLink" to:

public function getImageLink($name, $ids, $type = null, $idOver = NULL)
    {
        $not_default = false;

        // Check if module is installed, enabled, customer is logged in and watermark logged option is on
        if (($type != '') && Configuration::get('WATERMARK_LOGGED') && (Module::isInstalled('watermark') && Module::isEnabled('watermark')) && isset(Context::getContext()->customer->id)) {
            $type .= '-'.Configuration::get('WATERMARK_HASH');
        }

        // 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($idOver)){
				$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
				foreach ($result as $row)
					$id_image_over = $row['id_image'];
			}else{
				$id_image_over = 0;
			}

			if($id_image_over != 0){
				$id_image = $id_image_over;
			}

            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;
    }

1. We added "$idOver = NULL" to the function

2. We also added below between "$theme...." and "if ($this->allow == 1)....." :

if(isset($idOver)){
				$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
				foreach ($result as $row)
					$id_image_over = $row['id_image'];
			}else{
				$id_image_over = 0;
			}

			if($id_image_over != 0){
				$id_image = $id_image_over;
			}

In product-list.tpl find:

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

Replace this whole image tag with:

<img class="replace-2x img-responsive" data-on="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}" data-off="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
                            
<script>

$(function() {

$('.ajax_block_product img').mouseenter(function(){
 // $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('on'));
    //$(this).fadeIn();
 // });
});


$('.ajax_block_product img').mouseleave(function(){
  //$(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('off'));
   // $(this).fadeIn();
 // });
});


});

</script>
Edited by dirtrider118 (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
dirtrider118 Newbie

dirtrider118

Posted
Posted (edited)

Hi onkelbillig,

 

Please replace this script: 

<SCRIPT>

$(function() {

$('.ajax_block_product img').mouseenter(function(){
 // $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('on'));
    //$(this).fadeIn();
 // });
});


$('.ajax_block_product img').mouseleave(function(){
  //$(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('off'));
   // $(this).fadeIn();
 // });
});


});

</SCRIPT>

with this: 

<script>
$(document).ready(function(){
    $(".ajax_block_product").hover(function(){
        var onHover =  $(this).find( "img" ).data("on");
        $('img', this).attr('src', onHover);
    },function(){
     var offHover =  $(this).find( "img" ).data("off");
      $('img', this).attr('src', offHover);
    });  
});   

</script>

 

Edited by dirtrider118 (see edit history)
Link to comment
Share on other sites
  • 6 years later...
patrmich Newbie

patrmich

Posted
Posted

Hello,

The rollover method given by AT2 is very nice.

It allows the display of a second product image, when mouse is over a product, on a product_list page.

Would anyone know how to amend the method in order to display all the product images when mouse is over a product, on a product_list page ?

Thank you in advance for any reply.

 

 

 

 

Link to comment
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
Go to topic listing
×
×
  • Create New...