Welcome, please login or register

Product optional images in a popup window?

+1 vote
196 views
Hello, is it possible to change the way optional images work for customers? - Currently when clicked, they go in to the main image, showing a larger picture.
 
Is it possible to have them open in a popup window instead? 
 
Please advice.
asked in Store Design by Mark

1 Answer

0 votes
 
best answer
Mark, sure you can change most if not all template related functionality including zoom effect of product optional images by overriding existing functions in custom JS.
 
Try this:
 
Navigate to SETTINGS -> Design -> custom JS, than paste the below code and save.
 
Your product optional images should now open in a popup window.
 
NOTE: you can go back to the default functionality by simply deleting the code from the custom JS at any time.
 
 
 custom JS code:
function opt_pic_zoom(img_id) {

	var product_id = $('#product_id').val();
	if (product_id == 'new') { return }    //disable for unsaved product
	var img_id_clean = img_id.substring(4);
	var cur_img_src = $('#'+img_id).prop('src');

	if ($('#opt_img_order_'+img_id_clean).length != 0)
	{
		return;    //disable for admins
	}
	else
	{
		var fp_zoom = window.open(	'full_page_zoom.php',
									'full_page_zoom',
									'height=600'+
									',width=600'+
									',resizable=1,menubar=0,scrollbars=0,status=0,toolbar=0,titlebar=0'
								);

		var large_img_preview =	'<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%"><tr>' +
        						'<td align="center" valign="middle">' +
								'<img src="'+cur_img_src+'" alt="" style="max-width:550px;max-height:550px;" onclick="window.close();" />' +
                                '</td></tr></table>';

		fp_zoom.focus();
		fp_zoom.document.open();
		fp_zoom.document.write(large_img_preview);
	}
}

 

Steve - eez.io support

answered by support (3,846 points)
Sell Online
Features
Pricing
Support
FAQ
Tutorials
Contact Us
Privacy
Terms
...