function imageZoom(){
imgContainer = document.createElement('div');
if (jsVars && jsVars.imgArray != '' && jsVars.imgArray != undefined) {
imgs = jsVars.imgArray;
}
var imgBank = document.createElement('div');
imgBank.setAttribute('id', 'image-row');
//Set the options that will be used in the href to control the zoom and gallery functions
var zoomOptions = {};
zoomOptions.useZoom = 'hero'; //id of the main/hero img
zoomOptions.adjustX = 10; //x-axis offset in px
zoomOptions.adjustY = -4; //y-axis offset in px
zoomOptions.zoomWidth = 'auto'; //width in px or 'auto'
zoomOptions.zoomHeight = 'auto'; //height in px or 'auto'
zoomOptions.tint = '#ccc'; //hex value or false
zoomOptions.position = 'right' //left, right, top, bottom
zoomOptions.showTitle = true; //show the title, true/false
//Dynamically set the class and rel on the main image. If we do it dynamically
//it takes less template modifications.
document.getElementById(zoomOptions.useZoom).setAttribute('class', 'cloud-zoom generated');
document.getElementById(zoomOptions.useZoom).setAttribute('rel', getZoomOptions(zoomOptions));
function getImages() {
for (var i in imgs) {
var anchor = document.createElement('a');
var img = document.createElement('img');
img.src = imgs[i].thumbnail;
img.id = imgs[i].id;
img.title = imgs[i].title;
img.setAttribute('class', 'additional-images generated');
img.setAttribute('data-large', imgs[i].large);
img.setAttribute('data-popup', imgs[i].popup);
img.setAttribute('data-rank', imgs[i].rank);
img.setAttribute('data-prod_id', imgs[i].prod_id);
img.setAttribute('data-type', imgs[i].type);
img.setAttribute('data-inactive', imgs[i].inactive);
img.setAttribute('alt', imgs[i].title);
img.setAttribute('data-attribute_id', imgs[i].attribute_id);
anchor.href = (imgs[i].popup !='')? imgs[i].popup : imgs[i].large;
anchor.setAttribute('class', 'cloud-zoom-gallery generated');
var imgRel = 'useZoom: ' +'\'' +zoomOptions.useZoom +'\' , ' +'smallImage: ' +'\'' +imgs[i].large +'\'';
anchor.setAttribute('rel', imgRel );
anchor.appendChild(img);
imgBank.appendChild(anchor);
}
}
getImages();
document.getElementById('additional-images').innerHTML = '';
document.getElementById('additional-images').appendChild(imgBank);
function getZoomOptions(zoomOptions) {
var params = '';
for (var option in zoomOptions) {
if (zoomOptions.hasOwnProperty(option) && option != 'useZoom') {
params += option + ': ';
if(typeof zoomOptions[option] === 'number')
{params += zoomOptions[option]}
else
{ params += '\'' + zoomOptions[option] + '\''};
params += ' , ';
}
}
return params.substring(0, (params.length - 2) ); //trim last comma
}
}
imageZoom();
function clickFull(){//Replace the built in fullscreen image handling with a better one.
var imgPop = 'Additional Product Images