Page 1 of 1
Zooming original picture when pic change after click on atribute
Posted: 05 Jan 2023, 18:54
by 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.
Re: Zooming original picture when pic change after click on atribute
Posted: 05 Jan 2023, 22:07
by 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 != '') {
Re: Zooming original picture when pic change after click on atribute
Posted: 11 Jan 2023, 22:46
by Jan
Hi, thank you for the info.
Jan