Zooming original picture when pic change after click on atribute

[zucha.imz]

Hi,

I have a specific problem. I use atribute (picture select) and plugin zoom.
When I open a product, zoom picture showing a zoom from original image ( fullres ). But when I clik on atribute (change a color of product), picture on page change and show new color of product, but zoom use only large thumbnail no original image anymore.

Simple solution is set large image size to 2500x2500px (as original), but I have about 2500 products and their colors variations and one image has about 2-3 MB. After that solutions will by double ...

Is for that some simple solutions? (original image size url is set in Attribute paramater "Image", but phocacart create thumbnail and uses only that)?

Thx.

[zucha.imz]

OK,
I change src to original file, if exist parameter data-image-original in attribute images in file

\media\com_phocacart\js\phoca\jquery.phocaswapimage.js from line 35 -

Code: Select all

		var phNewSrcOrig		= jQuery(this).find(':selected,:checked').data('image-original');// Set image from current selectbox (selectbox which was changed)

		jQuery(this).closest("form").find('.phjProductAttribute').each(function() {
			var phFoundSrc	= jQuery(this).find(':selected,:checked').data('image-option');
			var phFoundSrcOrig	= jQuery(this).find(':selected,:checked').data('image-original');
			if(phFoundSrc) {
				phSelectedSrc = phFoundSrc;
			}	
			if(phFoundSrcOrig) {
				phSelectedSrcOrig = phFoundSrcOrig;
			}
		})

		var phNewHref		= phNewSrc;
		var phSelectedHref	= phSelectedSrc;


		if (phNewSrc) {
			// New image found - change to new image
			if(phNewSrcOrig) {
				jQuery(phProductHref).attr('href', phNewSrcOrig);
				jQuery(phProductHref).attr('href-data', phNewHref);
			}
			else {
				jQuery(phProductHref).attr('href', phNewHref); 
				}

			jQuery(phProductImg).attr('src', phNewSrc);
			jQuery(phProductSource).attr('srcset', phNewSrc);//webp
		} else if (!phNewSrc && phSelectedSrc) {
			// New image not found but there is some selected image yet (e.g. selected previously in other select box)
			if(phSelectedSrcOrig) {
				jQuery(phProductHref).attr('href', phSelectedSrcOrig);
				jQuery(phProductHref).attr('href-data', phSelectedHref);
			}
			else {
				jQuery(phProductHref).attr('href', phSelectedHref);
				}
			jQuery(phProductImg).attr('src', phSelectedSrc);
			jQuery(phProductSource).attr('srcset', phSelectedSrc);//webp
		} else {
			// Return back to default image (no new image, no selected image by other select box)
			jQuery(phProductHref).attr('href', phDefaultHref);
			jQuery(phProductImg).attr('src', phDefaultSrc);
			jQuery(phProductSource).attr('srcset', phDefaultSrc);//webp
		}
	})
})

and add data-image-original atribute to this code in file

/components/com_phocacart/layouts/atribute_options_select.php from line 57

Code: Select all

	if ($d['dynamic_change_image'] == 1) {
		
		// Start new code : Add src to original image for zoom plugin - 
		
		$linkOrig = $d['pathitem']['orig_abs'] . '/' . $v2->image;
		if (File::exists($linkOrig)) {
			$linkOrig 		= $d['pathitem']['orig_rel'] . '/' . $v2->image;
			$attrO		.= 'data-image-original="/'.htmlspecialchars($linkOrig).'"';
		}

		// End new code 

		if ($d['image_size'] == 'large' && isset($v2->image) && $v2->image != '') {

[Jan]

Hi, thank you for the info.

Jan