Barebones-teema sisältää työkaluja, joiden avulla toteutetaan tuotekuvagalleria, zoomattavat tuotekuvat ja tuotevariaatioiden valinta kuvan perusteella. Tässä artikkelissa käydään läpi kuvatyökalujen käyttäminen.

Tuotekuvien toimintoja hallitaan oletusteeman images.js-pluginin avulla. Tuotekuvagalleria, zoomattavat tuotekuvat ja tuotevariaatioiden valinta kuvan perusteella on valmiiksi toteutettu oletusteemaan, joten nämä ominaisuudet ovat käytössä ilman erillisiä toimenpiteitä.

Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn sivulle käyttämällä {SupportScripts}-tagia.

Oletusteemaan jQuery on lisätty valmiiksi.

Löydät pluginin oletusteeman tiedostosta /scripts/plugins/images.js.

Tuotekuvien ulkoasu määritellään tiedostossa /scss/modules/_images.scss.

Jos käytät teemassasi zoomattavia tuotekuvia, varmista että teema sisältää MagicZoom Plus -pluginin. Voit lisätä sen teemaan maksutta oheisella tagilla:

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

images.js-plugin otetaan käyttöön alustamalla se teemassa. Alla on esimerkiksi pluginin alustus oletusteemassa (löydät tämän tiedostosta /scripts/custom.js):

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 = vaihda variaatiota ostolomakkeella kun klikataan thumbnailia
	variationToImage: true // true = vaihda tuotekuva, kun jokin variaatio valitaan
});

text-alkuisissa asetuksissa haetaan teeman kielitiedostosta tekstejä gallerian hallintatoimintoihin.

Jos haluat että tuotekuva vaihtuu kun kävijä valitsee jonkin variaation – tai että variaatio vaihtuu kun kävijä valitsee sen tuotekuvan, käytä pluginin alustuksessa asetuksia imageToVariation ja variationToImage. Molemmat näistä asetuksista ovat oletusarvoisesti true.

Voit käyttää pluginin alustuksessa myös kaikkia Magic Zoom Plus -pluginin asetuksia.