product image

[jontaan]

Hi, 

When my customers want to select their products to buy, I only want half of the model’s body to be visible in the products selection (as shown in the first image). 

But when they click on it, I want the full body to show, including the face (as shown as the second image.

How can I make this happen, is it possible?

 

[rocky]

Try changing lines 123-126 of themes/default-bootstrap/js/product.js from:

		if (typeof productHasAttributes !== 'undefined' && productHasAttributes)
			findCombination();
		else
			refreshProductImages(0);

to:

/*		if (typeof productHasAttributes !== 'undefined' && productHasAttributes)
			findCombination();
		else
*/			refreshProductImages(0);

This should select the first image instead of the default product image.

[OpenSource Expert]

Set half body image as cover form admin section to show cover image as in category and product detail page

full body as first image

 

replace this code in product.tpl

<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">

To 

<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, 1, 'thickbox_default')|escape:'html':'UTF-8'}"	name="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">

And also replace in js/product.js

var new_src = domAAroundImgThumb.attr('href').replace('thickbox', 'large');

To

var new_src = domAAroundImgThumb.attr('name').replace('thickbox', 'large');