If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Lightbox - am I doing something wrong?

Greetings,
I have a website that includes several simple (jquery) tools that I've gathered across the Internet. An image gallery (lightbox, "image opener") is by far the most complicated one. I am just getting familiar with javascript and believe I could make my own scripts for those simplistic needs (and get rid of all those third party implementations, and jquery as well). I haven't encountered a specific problem I could not handle, but I would appreciate someone taking a look at what I've done so far, point out my mistakes and direct me on the right track.
Please note that this is a simplified version of a lightbox stripped off some functionalities.

javascript (please follow the link on jsfiddle at the end of the post)

Code:

var resizeBool,
navHeight=0,
overlay=document.getElementById("overlay"),
imgHolder=document.getElementById("imgHolder"),
img=document.getElementById("mainImg"),
imgNav;
function openUp(firstImage, numberOfImages)
{
resizeBool=true;
img.src="images/"+firstImage+".jpg"; //i guess we call this preloading?
img.onload=function()
{
overlay.style.display="block";
imgHolder.style.display="block";
if(numberOfImages>1) //if there are multiple images, their navigation will be appended
{
navHeight=85; //navigation has a fixed height, so this will be used later
imgNav=document.createElement("div");
imgNav.id="imgNav";
/* this part here worries me the most, will it slow things down when images are bigger? I tested it with a 2.5 mb image, which gets loaded twice (once as a big image, and once for navigation) and the whole site is lagging like hell. There won't be any images of such sizes, but still */
var imgsLinks=[], imgs=[];
for(var i=0, n; i<numberOfImages; i++)
{
n=firstImage+i;
imgs[i]=new Image();
imgs[i].src="images/"+n+".jpg";
imgsLinks[i]=document.createElement("a");
imgsLinks[i].href="#";
/* imgsLinks[] exist for storing the onclick event (number of the image from navigation to get), though its perhaps achievable simply by stripping the image src. in any case, this part is not finished yet :p but i don't see it as a problem */
// imgsLinks[i].onclick=replaceImage(actual(n));
imgsLinks[i].appendChild(imgs[i]);
imgNav.appendChild(imgsLinks[i]);
}
}
else
{
navHeight=0;
}
resize();
brighten(imgHolder, 0, 0.1, numberOfImages);
window.onresize=function(){resize();}; //will this get called every time an image is opened? will it slow things down?
}
}
function resize() //gets called once on image load, and later on window resize
{
if(resizeBool==true)
{
img.style.maxHeight=(window.innerHeight || document.documentElement.clientHeight)-navHeight+"px"; //fit the image on screen
setTimeout(function(){ //this instant timeout allows the above maxHeight to take effect
imgHolder.style.width=img.width+"px"; //scale the imgHolder div to img size
imgHolder.style.height=(navHeight+img.height)+"px";
if(img.height>300) //if its big enough fix and center it
{
imgHolder.style.position="fixed";
imgHolder.style.top="50%";
imgHolder.style.left="50%";
imgHolder.style.marginTop="-"+(imgHolder.offsetHeight/2)+"px";
imgHolder.style.marginLeft="-"+(imgHolder.offsetWidth/2)+"px";
}
else //and if not, display it at current position as absolute (min-height: 300px; in css allows for the image not to go smaller than that
{
imgHolder.style.position="absolute";
imgHolder.style.top=(document.body.scrollTop)+"px";
imgHolder.style.left=(document.body.scrollLeft+((window.innerWidth || document.documentElement.clientWidth)-imgHolder.offsetWidth)/2)+"px";
imgHolder.style.marginTop="0px";
imgHolder.style.marginLeft="0px";
}
},0);
}
}
/* this here is an apppearing effect function which I wasn't going to put here, however it could be affecting performance so its here. It gets called on image load. It first displays the imgHolder div, and then the navigation (I noticed things were faster this way) */
function brighten(what, op, step, numberOfImages)
{
if(op>=1)
{
if(numberOfImages>1)
{
imgHolder.appendChild(imgNav);
brighten(imgNav, 0, 0.2, 0);
}
return;
}
op+=step;
what.style.opacity=op;
window.setTimeout(brighten, 20, what, op, step, numberOfImages);
}
function removeOverlay() //gets called when overlay is clicked
{
if(navHeight>0)
{
imgHolder.removeChild(imgNav); //also increasing performance
}
resizeBool=false;
darken(1, 0.1);
}
function darken(op, step)
{
if(op<=0)
{
imgHolder.style.display="none";
overlay.style.display="none";
img.src="";
return;
}
op-=step;
imgHolder.style.opacity=op;
window.setTimeout(darken, 20, op, step);
}

edit: I believe it will be much easier to read the code HERE. I am sorry for not making a working example, but too much editing would be required (especially due to image numbering).
edit: And HERE is an image to give you a rough idea of what it looks like.