/***************** VIEW IMAGE SCRIPT *****************/
/*
1. Place the following just after the tag...
2. Create the style for the DIV, e.g.
#div_image_viewer
{
background:#FFF url(images/image_loading.gif) center center no-repeat;
border: 1px solid #000;
z-index:10;
width: 150px;
height: auto;
position: absolute;
top: 1px;
left: 1px;
visibility:hidden;
}
3. Add the script to your page, e.g.
4. Example on calling the script
*/
/*********** ImageToView CLASS ***************/
function ImageToView(src, width, height, cache_now)
{
/*this.name = name;*/
this.src = src;
this.width = width;
this.height = height;
this.image = null;
if (!(!cache_now))
this.CacheImage();
}
// cache an image...
ImageToView.prototype.CacheImage = function()
{
if (this.image == null)
{
this.image = new Image();
this.image.src = this.src;
}
}
// check for image height and width - good indication image has been cached
ImageToView.prototype.CheckImage = function()
{
if (this.image != null)
{
if (this.image.width > 0 && this.image.height > 0)
return true;
}
return false;
}
/*********** ImageSet CLASS ***************/
function ImageSet(name, divID)
{
this.images = new Array();
this.name = name;
this.divID = divID;
this.old_object = null;
}
ImageSet.prototype.CacheImages = function()
{
if (this.images.length > 0)
{
for (var i in this.images)
{
this.images[i].CacheImage()
}
}
}
ImageSet.prototype.CheckImage = function(i)
{
return this.images[i].CheckImage();
}
// toggle visibility of selects when image is accessed...
ImageSet.prototype.ToggleSelects = function(on)
{
var selects = document.getElementsByTagName("SELECT");
if (selects)
{
for (var i in selects)
{
if (selects[i].style)
selects[i].style.visibility = on ? "visible" : "hidden";
}
}
}
// checks to see if enter was pressed...
ImageSet.prototype.IsEnter = function(evt)
{
var theKey = (!document.all) ? evt.which : evt.keyCode;
if (theKey == 13)
return true;
return false;
}
// hide the image display div...
ImageSet.prototype.HideImage = function(dont_focus)
{
divID = document.getElementById(this.divID);
divID.style.visibility = "hidden";
divID.style.width = "150px";
divID.style.width = "100px";
this.ToggleSelects(1);
// focus back on formerly selected element
if (!dont_focus)
{
if (typeof(this.old_object) == "string")
{
var old_image = document.getElementById(this.old_object);
if (old_image)
old_image.focus();
else
window.focus();
}
}
return false;
}
ImageSet.prototype.CheckHideImage = function(evt)
{
if (this.IsEnter(evt))
return this.HideImage();
return false;
}
ImageSet.prototype.ShowImage = function(i, old)
{
this.old_object = old;
var divID = document.getElementById(this.divID);
// get window dimensions...
if (window.innerWidth)
{
var window_width = window.innerWidth;
var window_height = window.innerHeight;
}
else if (document.documentElement.clientWidth)
{
var window_width = document.documentElement.clientWidth;
var window_height = document.documentElement.clientHeight;
}
else
{
var window_width = document.body.clientWidth;
var window_height = document.body.clientHeight;
}
window_width = parseInt(window_width);
window_height = parseInt(window_height);
// get scroll bar information
if (window.pageYOffset)
{
var scroll_top = window.pageYOffset;
}
else if (document.documentElement.scrollTop)
{
var scroll_top = document.documentElement.scrollTop;
}
else
{
var scroll_top = document.body.scrollTop;
}
scroll_top = parseInt(scroll_top);
this.ToggleSelects(0);
// adjust image div
divID.style.visibility = "hidden";
divID.style.width = "150px";
divID.style.height = "100px";
divID.style.left = parseInt((window_width - 150) / 2) + "px";
divID.style.top = (parseInt((window_height - 100) / 2) + scroll_top) + "px";
divID.style.textAlign = "center";
divID.innerHTML = 'Cancel';
divID.style.visibility = "visible";
// check image is cached...
this.images[i].CacheImage();
if (!this.CheckImage(i))
{
this.HideImage();
alert("An error occurred! Product image could not be displayed!");
return false;
}
// adjust image div
divID.style.visibility = "hidden";
divID.style.textAlign = "right";
divID.innerHTML = '
Hide Image ';
divID.style.width = this.images[i].width + "px";
divID.style.height = 'auto';//this.images[i].height + "px";
divID.style.left = parseInt((window_width - this.images[i].width) / 2) + "px";
divID.style.top = (parseInt((window_height - this.images[i].height) / 2) + scroll_top) + "px";
divID.style.visibility = "visible";
var divID_hide = document.getElementById(this.divID + "_hide");
if (divID_hide)
divID_hide.focus();
return false;
}
ImageSet.prototype.CheckShowImage = function(which, old, evt)
{
if (this.IsEnter(evt))
return this.ShowImage(which, old);
return true;
}