Image Thumbnail Viewer in iFrame Show Across Whole Window?

**DynoDog** · 03-12-2006, 06:58 AM

Re: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

Is there a way I can get this script to have its clickable thumbnails on a page in an iFrame but the large images to appear over the whole window (so appearing in the _top or _parent target)?

I'm normally good with this, but couldn't figure this out today when trying.

Thanks!

-- DynoDog

**jscheuer1** · 03-12-2006, 08:36 AM

On the page inside the iframe, use this version of the script:

Code:

<script type="text/javascript">

/***********************************************
* Image Thumbnail viewer- © Dynamic Drive (www.dynamicdrive.com)
* Last updated Sept 26th, 03'. This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

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? parent.document.getElementById("showimage") : parent.document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(parent.pageYOffset) : parseInt(parent.ietruebody().scrollTop)
horzpos=ns6? parent.pageXOffset+parent.window.innerWidth/2-imgwidth/2 : parent.ietruebody().scrollLeft+parent.ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+parent.window.innerHeight/2-imgheight/2 : pgyoffset+parent.ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+parent.window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? parent.pageXOffset+e.clientX : parent.ietruebody().scrollLeft+event.clientX
var vertpos=ns6? parent.pageYOffset+e.clientY : parent.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="bud.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>

Just for the fun of it and so that the page can be tested independantly (only the close part won't work), include the style section and the:

HTML Code:

<div id="showimage"></div>

as per the instructions on the demo page. Your activating links, of course, also belong on this page.

Now, on the top page, use the style section and the showimage division as well. Also include your iframe (which for this to work, must be named 'bud') and some bootstrap code, here is a demo top page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#showimage{
position:absolute;
visibility:hidden;
border: 1px solid gray;
}

#dragbar{
cursor: hand;
cursor: pointer;
background-color: #EFEFEF;
min-width: 100px; /*NS6 style to overcome bug*/
}

#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
}
</style>
</head>
<body>
<div id="showimage"></div>
<iframe name="bud" src="thumb_1.htm" width="100" height="150" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">
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 drag_drop(e){
if (ie&&dragapproved){
bud.crossobj.style.left=tempx+event.clientX-offsetx+"px"
bud.crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
bud.crossobj.style.left=tempx+e.clientX-offsetx+"px"
bud.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(bud.crossobj.style.left)
tempy=parseInt(bud.crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>
</body>
</html>

Added Info: You can configure your iframe to suit, as long as it is named 'bud'.

**DynoDog** · 03-12-2006, 08:19 PM

Ah, now I know where I went wrong. Thanks!!

It works great - had to change the iFrame from "bud", of course, since that's not my iFrame name - and has no bugs (at least in IE6).

There's one thing I didn't think about before, though: I have a CSS menu on the main page and the menu is the frontmost layer. I forgot about this and so the images are appearing below the menu. I'm too tired right now to think of a way to make the images over the menu?

Thanks again for the good script alteration!

-- DynoDog

**DynoDog** · 03-12-2006, 09:15 PM

Never mind my previous question; I finally found my z-index for my CSS menu. It was set to 999999, which is why all the lower numbers weren't working *grin*. Now my images are at 1000000 so are above the menu.

**jscheuer1** · 03-12-2006, 11:47 PM

As long as you are mentioning z-indexes, it is worth noting that, as far as I can tell in the Opera browser, the iframe itself will always be on top of the images, no matter what type of z-index ordering is set-up for them. Even with the display division following the iframe in the document's stacking order would not prevent this and that is usually the normal way (without using z-index) to resolve something like that. So, unless someone knows how to get absolutely positioned content over an iframe in Opera, this scheme will have that one drawback in that browser.

**idolyz** · 02-08-2008, 03:29 AM

I'm stuck on this also... please advise.

I am using your exact demo top page code and here is the code to my iFrame page named thumb_1.htm:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>iFrame Thumbnail Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/***********************************************
* Image Thumbnail viewer- © Dynamic Drive (www.dynamicdrive.com)
* Last updated Sept 26th, 03'. This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

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? parent.document.getElementById("showimage") : parent.document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(parent.pageYOffset) : parseInt(parent.ietruebody().scrollTop)
horzpos=ns6? parent.pageXOffset+parent.window.innerWidth/2-imgwidth/2 : parent.ietruebody().scrollLeft+parent.ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+parent.window.innerHeight/2-imgheight/2 : pgyoffset+parent.ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+parent.window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? parent.pageXOffset+e.clientX : parent.ietruebody().scrollLeft+event.clientX
var vertpos=ns6? parent.pageYOffset+e.clientY : parent.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="bud.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>
</head>
<body>
<a href="../images/example.jpg" rel="thumbnail"><img src="../images/thmb_example.jpg" border="0"></a>
<script type="text/javascript" src="./thumbnailviewer.js"></script>
</body>
</html>

Am i meant to include the js and css files in this page? I have tried every combination and can't get it to work.

It still won't open on top of the parent window

Thanks

Thread: Image Thumbnail Viewer in iFrame Show Across Whole Window?

Thread Tools

Search Thread

Image Thumbnail Viewer in iFrame Show Across Whole Window?

Thanks & One More Q

Found the Z-Index

Bookmarks

Bookmarks

Posting Permissions