Professor Al Presents a menu of JavaScript Ideas

Thumbnail Pop-Up Viewer

This Thumbnail viewer would be a nice addition to your JavaScript Library. Each image uses DHTML for a Pop-up and therefore eliminates the need to open a new Window to view the larger image file. The images can be moved around the page and each come with a close button. What more can you ask for?

Highlight all the code in the textbox below and paste it into the head of your document in a Style block.

Select All

Highlight all the code in the textbox below and paste it into the head of your document in a JavaScript block, or you can link the code as I did for this page.

Select All

var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>

Highlight all the code in the textbox below and paste it into the body of your document. Of course you will be using your own image information, don't forget to label your Thumbnail images with somethink like the TN I've used, no sense in going crazy trying to figure out what belongs where!

Select All

The following code places the images on the page and connects them to the JavaScript.
<a href="javascript:;" onClick="return enlarge('images/image01.jpg',event)">
<img src="images/image01TN.jpg" alt="Linkage" width="94" height="66" border="0" /></a>

Be sure to add the following to the very end of the page, just above the closing body tag.

Return to the JavaScript Menu page here.