/*
===================================================================
Single Image Preview Script
===================================================================
Written for Webfoot.Net by Joseph Noble
on Thursday, November 13, 2008
*******************************************************************
This script is a cross-browser compatible inpage large image viewer.
------------------------------------------------------------------------------------------------------------------------------------------
=============================
Include this HTML to the page
inbetween the
tags
=============================
=============================
Include this HTML to the page
just under the tag
=============================
------------------------------------------------------------------------------------------------------------------------------------------
============================
IMAGE LINK FORMAT
-----------------
This is the format that you
would write the links on
your HTML page
============================
-Replace the words imageName with the actual image file name.
-If you do not have an image group assigned to your images
then just put the words null in place of the arrayID.
-Arrays/Image groups explained a little further down.
------------------------------------------------------------------------------------------------------------------------------------------
========================
Include this to your CSS
========================
#darkLayer{
position:absolute;
display:none;
z-index:80;
background-color:gray;
filter:alpha(opacity=80);
opacity: 0.8;
}
#previewPane{
width:400px;
background-color:white;
border:1px solid gray;
text-align:center;
padding:5px;
display:none;
position:absolute;
z-index:90;
}
#lgImage{
margin:0 auto;
text-align:center;
}
#lgImage img{
border:1px solid gray;
}
#closeImage{
height:30px;
}
#closeImage a,#closeImage a:hover,#closeImage a:visited{
text-decoration:none;
color:gray;
margin-top:10px;
}
------------------------------------------------------------------------------------------------------------------------------------------
================================
Variables
================================
These are equal to half of the
actual width and hieght values
assigned to the div through CSS
--------------------------------
*/
var maxWidth=400; //Maximum Width of a displayed image
var maxHeight=300; //Maximum Height of a displayed image
var imgDIR="products/sm/" //Relative directory of images to be displayed
/*
================================
DO NOT EDIT THE FOLLOWING VARS
================================
*/
var elWidth2=400;
var elHeight2=300;
var elWidth=elWidth2/2;
var elHeight=elHeight2/2;
var img=new Image();
img.src=imgDIR+"loading.jpg"
var wait;
/*
============================
ARRAYS/IMAGE GROUPS
-------------------
If you would like to show
multiple images when one is
clicked on, then you will
need to use the space below
to write a multi-dimensional
array.
Of course the format below
could be used in a dynamic
situation either ASP or PHP.
Do not change the array name:
"activeImages"
============================
*******
Example
*******
*/
/*
var activeImages=new Array();
activeImages[0]=new Array(); //Adds new dimension to single level array to start adding groups
activeImages[0][0]="1"; //Unique id to define image groups
activeImages[0][1]="firstImage.jpg"; //First image in group
activeImages[0][2]="secondImage.jpg"; //Second image in group *repeat as needed
// Use the format above to continue making new
// image groups.
activeImages[1]=new Array();
activeImages[1][0]="6";
activeImages[1][1]="firstImage.jpg";
activeImages[1][2]="secondImage.jpg";
*/
/*
Onload Functions
=================
If your page does not contain any other scripts with the
onload function, uncomment the functions below. If you have
an onload function set somewhere else, just copy the two
events (window.onscroll and window.onresize) into the current
onload function.
-----------
**Warning**
-----------
Having two onload functions in different scripts will cause
unexpected results. The onload functions execute in order of
the scripts located within the page. The only one that will
set the active events properly is the last one to load.
*/
/*
window.onload=function(){
window.onscroll=function(){setSize()}
window.onresize=function(){setSize()}
}
*/
/*
------------------------------------------------------------------------------------------------------------------------------------------
================================
Functions
================================
A function for most everything.
It is cleaner and easier to edit
later if you keep one function
to one set of commands.
--------------------------------
*/
function display(x,y){
preloadImage(x);
// setSize();
showPreview(x,y);
}
function preloadImage(x){
img.src=imgDIR+x;
setImage(x);
}
function setImage(x){
var tempHTML="![]("+imgDIR+x+" "Click image to close")
";
document.getElementById("lgImage").innerHTML=tempHTML
var testData=0;
testData=checkIMGLoad();
wait=setInterval("checkIMGLoad();",50);
}
function checkIMGLoad(){
var x=document.getElementById("lgIMG").offsetWidth;
if(x>0){
clearInterval(wait);
var t=setTimeout("loadIMG()",100);
}
}
function loadIMG(){
var tmpIMG=document.getElementById("lgIMG");
var previewPane=document.getElementById("previewPane");
var imgW=tmpIMG.offsetWidth;
var imgH=tmpIMG.offsetHeight;
if(imgW>imgH){
if(imgW>=maxWidth){
tmpIMG.width=maxWidth;
tmpIMG.height=tmpIMG.width*(imgH/imgW);
}
}else{
if(imgH>=maxHeight){
tmpIMG.height=maxHeight;
tmpIMG.width=maxHeight*(imgW/imgH);
}
}
previewPane.style.width=(tmpIMG.width+40)+"px";
elHeight=(tmpIMG.height/2);
elWidth=(tmpIMG.width+40)/2;
setSize();
}
function setSize(){
checkIMGLoad();
var nav=navigator.appName;
var previewPane=document.getElementById("previewPane");
var darkLayer=document.getElementById("darkLayer");
switch (nav){
case "Microsoft Internet Explorer":
var sizeW=document.body.offsetWidth;
var sizeH=document.documentElement.clientHeight;
var sizeH2=document.documentElement.scrollTop;
var winW=Math.round((sizeW/2)-elWidth);
var winH=Math.round(((sizeH/2)+sizeH2)-elHeight);
var winH2=Math.round(sizeH+sizeH2);
break;
case "Netscape":
var sizeW=window.innerWidth;
var sizeH=document.documentElement.clientHeight;
var sizeH2=document.documentElement.scrollTop;
if(sizeH2==0||sizeH2=="0"){
var sizeH2=document.body.scrollTop;
var winW=Math.round((sizeW/2)-elWidth);
var winH=Math.round(((sizeH+sizeH2)/2)-elHeight);
var winH2=Math.round(sizeH+sizeH2);
}else{
var winW=Math.round((sizeW/2)-elWidth);
var winH=Math.round(((sizeH/2)+sizeH2)-elHeight);
var winH2=Math.round(sizeH+sizeH2);
}
break;
}
darkLayer.style.width=sizeW+"px";
darkLayer.style.height=winH2+"px";
darkLayer.style.top="0px";
darkLayer.style.left="0px";
previewPane.style.left=winW+"px";
previewPane.style.top=winH+"px";
}
function showPreview(x,y){
setSize();
var previewPane=document.getElementById("previewPane");
var darkLayer=document.getElementById("darkLayer");
if(multImageCheck(y)==true){
setMultImage(x,y);
}else{
document.getElementById("moreImages").innerHTML="";
document.getElementById("moreImages").style.display="none";
}
previewPane.style.display="block";
darkLayer.style.display="block";
}
function multImageCheck(y){
if(activeImages==null){
return false;
}else{
var i;
for(i=0;i<=activeImages.length-1;i++){
if(activeImages[i]!=null&&parseInt(activeImages[i][0])==parseInt(y)){return true;}
}
return false;
}
}
function setMultImage(x,y){
var i,z;
for(i=0;i<=activeImages.length-1;i++){
if(activeImages[i]!=undefined){
if(parseInt(activeImages[i][0])==parseInt(y)){
var tmpLinks="Main Image
";
for(z=1;z<=activeImages[i].length-1;z++){
tmpLinks=tmpLinks+" [ "+z+" ] ";
}
document.getElementById("moreImages").innerHTML=tmpLinks;
document.getElementById("moreImages").style.display="block";
}
}
}
}
function changeImage(x){
preloadImage(x);
var t=setTimeout("setSize()",3000);
}
function closePreview(){
document.getElementById("previewPane").style.display="none";
document.getElementById("darkLayer").style.display="none";
}
/* */