Jump to content

Module for showing the back of a product on hover

Fronteer bvba
 Share

Recommended Posts

hideaki Newbie

hideaki

Posted
Posted (edited)

Hello Guys,

 

Is there a module to show the back or a second image on hover of a product in list view?

 

We have products with a front end back so it would be nice if the user has more interaction.

 

Thanks!

 

Not sure if this is what you are looking for but here's what you can do to get the second image to show on hover in the Products Listing:

 

In product-list.tpl:

 

On Line 25 add the following:

<script type="text/javascript">
	// create our transition as a plugin
	$.fn.crossfade = function () {
	  return this.each(function () { 
		// cache the copy of jQuery(this) - the start image
		var $$ = $(this);
	
		// get the target from the backgroundImage + regexp
		var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
		var target = target.replace(/"/g, '');
	
		// nice long chain: wrap img element in span
		$$.wrap('<span></span>')
		  // change selector to parent - i.e. newly created span
		  .parent()
		  // prepend a new image inside the span
		  .prepend('<img>')
		  // change the selector to the newly created image
		  .find(':first-child')
		  // set the image to the target
		  .attr('src', target);
	
		// position the original image
		$$.css({
		  'position' : 'absolute', 
		  'left' : 0, 
		  // this.offsetTop aligns the image correctly inside the span
		  'top' : 0
		});
	
		// note: the above CSS change requires different handling for Opera and Safari,
		// <a href="http://jqueryfordesigners.com/downloads/jquery.crossfade.js">see the full plugin for this</a>.
	
		// similar effect as single image technique, except using .animate 
		// which will handle the fading up from the right opacity for us
		$$.hover(function () {
		  $$.stop().animate({
			  opacity: 0
		  }, 0);
		}, function () {
		  $$.stop().animate({
			  opacity: 1
		  }, 0);
		});
	  });
	};
	
	// Not only when the DOM is ready, but when the images have finished loading,
	// important, but subtle difference to $(document).ready();
	$(window).bind('load', function () {
	  // run the cross fade plugin against selector
	  $('img.fade').crossfade();
	});
</script>

Then look for:

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

and replace with:

<img class="replace-2x img-responsive fade" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}"style="opacity: 1; background: url({$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)});" 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" />

Override getImageLink in Link class (Link.php) with:

	/**
	 * 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
	 */
	public function getImageLink($name, $ids, $type = NULL, $idOver= NULL)
	{
		global $protocol_content;
		
		/* CUSTOM */
		if(isset($idOver))
		{
			$result = Db::getInstance()->ExecuteS('SELECT id_image FROM ps_image WHERE id_product = '.$idOver.' AND position = 2');
			foreach ($result as $row)
			$id_image_over = $row['id_image'];
		}
		else
		{
			$id_image_over = 0;
		}

		// legacy mode or default image
		if ((Configuration::get('PS_LEGACY_IMAGES') 
			&& (file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').'.jpg')))
			|| strpos($ids, 'default') !== false)
		{
			$split_ids = explode('-', $ids);
			$newIds1 = $split_ids[1] + 1;
			$idsArray = array($split_ids[0], $newIds1);
			$newIds = implode('-', $idsArray);
			
			if($id_image_over != 0)
			{
				$id_image = $id_image_over;
				if ($this->allow == 1)
					$uri_path = __PS_BASE_URI__.$newIds.($type ? '-'.$type : '').'/'.$name.'.jpg';
				else
					$uri_path = _THEME_PROD_DIR_.$newIds.($type ? '-'.$type : '').'.jpg';
			}
			else
			{
				if ($this->allow == 1)
					$uri_path = __PS_BASE_URI__.$ids.($type ? '-'.$type : '').'/'.$name.'.jpg';
				else
					$uri_path = _THEME_PROD_DIR_.$ids.($type ? '-'.$type : '').'.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]);
			if($id_image_over != 0)
			{
				$id_image = $id_image_over;
			}
			else
			{	
				$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]);
			}
			
			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;
	}

The end result should be something like:

http://weekend-edition.com/en/9-casual-dresses

 

Hope this helps!

Edited by hideaki (see edit history)
  • Like 2
Link to comment
Share on other sites
  • 2 weeks later...
iAreku Newbie

iAreku

Posted
Posted (edited)

Hi!
 

im trying to use the code above.

 

2 questions:

 

1) when you say "Override getImageLink in Link class (Link.php) with:" you mean editing stock Link.php and replace the function or create Link.php, paste those contents and upload to /overrides/classes ?

 

2) my theme image call is this one:

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

which does not look like the one your mod is requesting to 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" />

and even if i pasted your suggestion and removed _default from the code, im obviously not getting the replacement desired effect.

 

 

Any clues what could be failing?

 

 

Thanks!!

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

123emman123

Posted
Posted

Hi Hideaki!

 

I was able to apply the code that you've provided. But there is a problem, when i hover the product, it always get the same image.

Is there any way that it will get the second image just like on the demo site that you've provided?

 

Thanks

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

Egocefalo

Posted
Posted (edited)

Hi Hideaki, thanks for the mod!

 

It worked but the class="replace-2x img-responsive" is not passing to the second image, so the background image (second) it's not responsive and when the page is resized the first image gets smaller but the second one no.

 

I've been trying to make it work but with no success until now. Can you please provide me with a fix for that?

 

I'm using prestashop 1.6.0.9 with default theme.

 

Thank you!

 

Hi! Finaly I fix the second image resize problem by aplying the class to all images inside the container.

 

.product-image-container span img {
 display: block;
 height: auto;
 max-width: 100%;
}

 

 

Now I found that homefeatured products home tabs (new arrivals, best sellers, popular) are showing the second image two more times under the original. The module creates three spans  containing the background (second) image.

 

<span>second image<span>second image<span>original image with hover effect</span></span></span>

 

 

Any fix for this problem?

 

Thanks again!

 

Hi again!

 

I found that the script added to product-list.tpl was loading with every home tab, since there are three (new arrivals, best sellers, popular) that was why the image was being repeated three times.

 

I fixed the problem by making a separate .js file with the script and erasing it from the product-list.tpl.

 

Thanks again!

Edited by Egocefalo (see edit history)
Link to comment
Share on other sites
nimish.shrvstv Newbie

nimish.shrvstv

Posted
Posted

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?

 

 

Hi Hideaki!

 

I was able to apply the code that you've provided. But there is a problem, when i hover the product, it always get the same image.

Is there any way that it will get the second image just like on the demo site that you've provided?

 

Thanks

Link to comment
Share on other sites
nimish.shrvstv Newbie

nimish.shrvstv

Posted
Posted

Hi Hideaki, thanks for the mod!

 

It worked but the class="replace-2x img-responsive" is not passing to the second image, so the background image (second) it's not responsive and when the page is resized the first image gets smaller but the second one no.

 

I've been trying to make it work but with no success until now. Can you please provide me with a fix for that?

 

I'm using prestashop 1.6.0.9 with default theme.

 

Thank you!

 

Hi! Finaly I fix the second image resize problem by aplying the class to all images inside the container.

 

.product-image-container span img {

 display: block;

 height: auto;

 max-width: 100%;

}

 

 

Now I found that homefeatured products home tabs (new arrivals, best sellers, popular) are showing the second image two more times under the original. The module creates three spans  containing the background (second) image.

 

<span>second image<span>second image<span>original image with hover effect</span></span></span>

 

 

Any fix for this problem?

 

Thanks again!

 

Hi again!

 

I found that the script added to product-list.tpl was loading with every home tab, since there are three (new arrivals, best sellers, popular) that was why the image was being repeated three times.

 

I fixed the problem by making a separate .js file with the script and erasing it from the product-list.tpl.

 

Thanks again!

 

Can you please give a more lucid explanation of your solution? I am new to prestashop and it would be great if you could explain the steps a bit more. Thanks in advance.

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

njai

Posted
Posted

Hi Everyone,
 
I little change to the code and am able to get this to work...
 
For those who gets only a shifting same photo, it could be the Link.php override is not setup correctly.
 
In Hideaki's code you see -
 

/* CUSTOM */

  if(isset($idOver))

  {

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

   foreach ($result as $row)

   $id_image_over = $row['id_image'];

  }

 

Check your prestashop installation. If you are not using the default prefix when installing PS, the table name would be different. For example if the prefix you choose is ps16_, change the line to -

 

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

 

That would do the trick.

 

Thanks Hideaki for the mod!!

 

 

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...