...

View Full Version : Need help to fix the code-Popup Window



burcu
06-22-2010, 10:44 AM
Hi,
I desperately need help after hours of reading 1000s of forums just to be able to have a thumbnail which will enlarge in a new window.
I've found this script in one of the forums, and I am trying to apply it to my page. But when I click on a thumbnail, although it's opening a pop-up window, it also enlarges the image in the current browser. How should I fix this?
I also need to do the same thing with a .swf file. How can I have a flash movie enlarge when clicked?

Any help is appreciated thanks in advance!!

<HTML>
<Head>
<Script type="text/javascript">

var largerView = "";
var winToggle = false;

function openFullSize(Pix,isDesc){

if (winToggle){largerView.close()}
document.getElementById('nullIMG').src = Pix;
var wStr = document.getElementById('nullIMG').width;
var offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
var hStr = document.getElementById('nullIMG').height;
var offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
var lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
var tStr = (screen.availHeight-50-offsetH)/2;
tStr = "top="+tStr;
largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
largerView.document.title = isDesc;
winToggle = true;
}

function buildSupport(){

var styleStr = "<style>.thumb{cursor:pointer;border:solid blue 2px}</style>"
var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'>&nbsp</Div>"
document.write(divStr);
document.write(styleStr);
}

buildSupport();

window.onunload=function(){

if (winToggle && !largerView.closed){largerView.close()}
}
</Script>
</Head>
<Body>
<Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
<Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
<!-- The following line must be the LAST line in the Body -->
<Script> document.getElementById('nullIMG').src = document.images[1].src </Script>
</Body>
</HTML>

I've changed the last part to:
<Img Src='images/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
<Img Src='images/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
<!-- The following line must be the LAST line in the Body -->
<Script> document.getElementById('nullIMG').src = document.images.src </Script>
</Body>
</HTML>

Old Pedant
06-22-2010, 10:56 PM
This makes no sense:

<Script> document.getElementById('nullIMG').src = document.images.src </Script>

document.images is an *ARRAY*. There's no such thing as a .src property of an array.

The code just seems way overly complex. And, too, when you use the full size image for your thumbnail, as you are doing, it means that *ALL* the full size images have to load into the main page. If they are really large images, and if you have several of them, this can take a very long time for a user with a slow connection. If at all possible, you really ought to supply both full size image files and thumbnails.

Old Pedant
06-23-2010, 01:18 AM
Here's my version of that:


<html>
<head>
<script type="text/javascript">
var largerView = null;

function openFullSize(pix)
{
if ( largerView != null ) largerView.close();
var hidden = document.getElementById('nullIMG');
hidden.src = pix.src;
var pixw = hidden.width;
var pixh = hidden.height;
var lStr = (screen.width-50-pixw)/2; // may not work right in all browsers?
var tStr = (screen.availHeight-50-pixh)/2;
var props = "toolbar=0,status=0,width="+(pixw+20)+",height="+(pixh+20)
+ ",left="+lStr+",top="+tStr;
largerView = window.open( pix.src,"FullSize", props );
largerView.document.title = pix.alt;
}
</script>
<style type="text/css">
div#NOSHOW {
position:absolute;
top=-2000px;
visibility: hidden;
}
img.thumb {
height: 90px;
width: 120px;
}
</style>
</head>
<body>
<div id="NOSHOW">
<img id="nullIMG" alt=""/>
</div>
<img src="pic1.jpg" class="thumb" alt="This is the 'ANY' picture" onclick="openFullSize(this)" />
<img src="pic2.jpg" class="thumb" alt="This is the 'SOME' picture" onclick="openFullSize(this)" />
</body>
</html>

(Images changed to match what I had available.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum