The Barebomes default theme's product image tools (images.js)

Functions related to product images are managed in the default theme with the images.js plugin. Product image galleries, zoomable product images and product variation selection based on images have already been implemented in the default theme, and no additional action is required to enable them.

If your theme uses zoomable product images, make sure that it also includes the MagicZoom Plus plugin. You can add it to the theme free of charge with the following tag:

<script type="text/javascript" src="/assets/defaults/vendor/magiczoomplus/magiczoomplus.js"></script>

The images.js plugin can be enabled by initializing it in the theme. The example below shows how the plugin is initialized in the default theme (you'll find it in the /scripts/custom.js file):

MCF.Images.init({
	transitionEffect: false,
	textClickZoomHint: MCF.Locales.get('expandImage'),
	textHoverZoomHint: MCF.Locales.get('expandImage'),
	textExpandHint: MCF.Locales.get('expandImage'),
	textBtnClose: MCF.Locales.get('close'),
	textBtnPrev: MCF.Locales.get('previous'),
	textBtnNext: MCF.Locales.get('next')
	imageToVariation: true, // true = change the variation in the purchase form when the thumbnail is clicked
	variationToImage: true // true = change the product image when a variation is selected
});

For settings starting with text, texts for gallery management functions are fetched from the theme's language file.

To change the product image when a visitor selects a variation – or to change the variation if the visitor selects its image – use imageToVariation and variationToImage settings while initializing the plugin. By default, both settings are true.