my image veiwer has stopped working properly, I dont know why. It resizes as its meant to, but dosent pop the veiwer window. Can you find the problem?

<script type='text/javascript'>
var popbackground="http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg"; //specify backcolor or background image for pop window
var windowtitle="Image Viewer" ; //pop window title

function detectexist(obj){
return (typeof obj !="undefined");
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft;
toppos-=screenTop;
}
}
getpos()
var winattributes = 'width='+popwidth+', height='+popheight+', resizable=yes,scrollbars=yes, left='+leftpos+', top='+toppos;
var bodyattribute = 'topmargin=0 leftmargin=0 background='+popbackground;
if (typeof jkpopwin=="undefined" || jkpopwin.closed){
jkpopwin = window.open("","",winattributes);
} else {
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30);
}
jkpopwin.document.open();
jkpopwin.document.write('<html><title>'+windowtitl e+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br><center>'+'</body></html>');
jkpopwin.document.close();
jkpopwin.focus();
}
</script>
<script type='text/javascript'>
<!--
function ResizeThem(){
maxheight=300;
maxwidth= 300;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].setAttribute('title','Reduced Image - Click to see full size');
imgs[p].onclick=new
Function('onclick=jkpopimage(this.src,600,500);');
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function('onclick=jkpopimage(this.src,600,500);');
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;}}}} 
ResizeThem();
//-->
</script>
<img src="http://landscapearchiteck.files.wordpress.com/2008/04/franklin_trees_01.jpg"alt='user posted image'/>

Recommended Answers

All 21 Replies

What browser are you using? Have you tested on all IE, FF, Opera, etc? When you said 'has stopped working properly', does that mean it has been working before? Or it has never been working at all?

Yes it was working before, now its just resizing but not popping the veiwer window to enlarge.
Im on IE 8, 7 till recently.

Im not sure how to test it in browsers other than mine???

Does anything look wrong with it, something left off from when I moved it maybe?

find the problem

For your code to work as intended, the call to ResizeThem(); must be at the end of the body, like so

<script type='text/javascript'>
        ResizeThem();
    </script>
  </body>

If that line were moved to the <head> section with the rest of the javascript, it would be triggered before the <img> elements are accessible.

Also, there is a line of code missing. You should insert this

imgs[p].setAttribute('title','Reduced Image - Click to see full size');

between lines 19 and 20 [to parallel line 13]. If you don't do that, the 'title' won't change when only the height is out of range.

Note: as this line of code

jkpopwin.document.write('<html><title>'+windowtitl e+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br><center>'+'</body></html>');

appears on DANIWEB, there is an extraneous space in +windowtitl e+ .

I assume that was caused by the DANIWEB parser (and does not appear in the original).

like this? still not working....??

<head><script type='text/javascript'>
var popbackground="http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg"; //specify backcolor or background image for pop window
var windowtitle="Image Viewer" ; //pop window title

function detectexist(obj){
return (typeof obj !="undefined");
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft;
toppos-=screenTop;
}
}
getpos()
var winattributes = 'width='+popwidth+', height='+popheight+', resizable=yes,scrollbars=yes, left='+leftpos+', top='+toppos;
imgs[p].setAttribute('title','Reduced Image - Click to see full size');imgs[p].setAttribute('title','Reduced Image - Click to see full size');

var bodyattribute = 'topmargin=0 leftmargin=0 background='+popbackground;
if (typeof jkpopwin=="undefined" || jkpopwin.closed){
jkpopwin = window.open("","",winattributes);
} else {
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30);
}
jkpopwin.document.open();
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br><center>'+'</body></html>');
jkpopwin.document.close();
jkpopwin.focus();
}
</script>
</head>
<body><script type='text/javascript'>
<!--
function ResizeThem(){
maxheight=300;
maxwidth= 300;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].setAttribute('title','Reduced Image - Click to see full size');
imgs[p].onclick=new
Function('onclick=jkpopimage(this.src,600,500);');
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function('onclick=jkpopimage(this.src,600,500);');
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;}}}} 
ResizeThem();
//-->
</script></body>

No, like this

<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type='text/javascript'>
var popbackground = "http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg"; //specify backcolor or background image for pop window
var windowtitle = "Image Viewer"; //pop window title

function detectexist(obj) {
    return (typeof obj != "undefined");
}
function jkpopimage(imgpath, popwidth, popheight, textdescription) {
    function getpos() {
        leftpos = (detectexist(window.screenLeft)) ? screenLeft + document.body.clientWidth / 2 - popwidth / 2 : detectexist(window.screenX) ? screenX + innerWidth / 2 - popwidth / 2 : 0
        toppos = (detectexist(window.screenTop)) ? screenTop + document.body.clientHeight / 2 - popheight / 2 : detectexist(window.screenY) ? screenY + innerHeight / 2 - popheight / 2 : 0
        if (window.opera) {
            leftpos -= screenLeft;
            toppos -= screenTop;
        }
    }
    getpos()
    var winattributes = 'width=' + popwidth + ', height=' + popheight + ', resizable=yes,scrollbars=yes, left=' + leftpos + ', top=' + toppos;
    var bodyattribute = 'topmargin=0 leftmargin=0 background=' + popbackground;
    if (typeof jkpopwin == "undefined" || jkpopwin.closed) {
        jkpopwin = window.open("", "", winattributes);
    } else {
        //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
        //jkpopwin.moveTo(leftpos, toppos)
        jkpopwin.resizeTo(popwidth, popheight + 30);
    }
    jkpopwin.document.open();
    jkpopwin.document.write('<html><title>' + windowtitle + '<\/title><body ' + bodyattribute + '><img src="' + imgpath + '" style="margin-bottom: 0.5em"><br><center>' + '<\/body><\/html>');
    jkpopwin.document.close();
    jkpopwin.focus();
}
function ResizeThem() {
    maxheight = 300;
    maxwidth = 300;
    imgs = document.getElementsByTagName("IMG");

    for (p = 0; p < imgs.length; p++) {
        if (imgs[p].getAttribute("alt") == "user posted image") {
            w = parseInt(imgs[p].width);
            h = parseInt(imgs[p].height);

            if (parseInt(imgs[p].width) > maxwidth) {
                imgs[p].style.cursor = "pointer";
                imgs[p].setAttribute('title', 'Reduced Image - Click to see full size');
                imgs[p].onclick = new Function('onclick=jkpopimage(this.src,600,500);');
                imgs[p].height = (maxwidth / imgs[p].width) * imgs[p].height;
                imgs[p].width = maxwidth;
            }
            if (parseInt(imgs[p].height) > maxheight) {
                imgs[p].style.cursor = "pointer";
                imgs[p].setAttribute('title', 'Reduced Image - Click to see full size');
                imgs[p].onclick = new Function('onclick=jkpopimage(this.src,600,500);');
                imgs[p].width = (maxheight / imgs[p].height) * imgs[p].width;
                imgs[p].height = maxheight;
            }
        }
    }
}
    </script>
    <title></title>
  </head>
  <body>
    <img src="http://landscapearchiteck.files.wordpress.com/2008/04/franklin_trees_01.jpg"
    alt='user posted image'>
    <script type='text/javascript'>
ResizeThem();
    </script>
  </body>
</html>

this one has stopped working also. Could some other newer code be interupting them?

<div class='row4' style='position:absolute; background-color:yellow;border:1px solid #000000; padding:10px; display:none' id='miniTopic'></div>
<script>
function Request() {
if (window.XMLHttpRequest ) { return new XMLHttpRequest(); }
else if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
return false;
}
}
}
}
function SetDescPos(e) {
if (typeof event!='undefined') {
e=new Object();
e.pageX=event.clientX+document.body.scrollLeft;
e.pageY=event.clientY+document.body.scrollTop;
}
descarea=document.all?document.all.miniTopic:document.getElementById("miniTopic");
descarea.style.left=e.pageX+2;
descarea.style.top=e.pageY+2;
}
function GetTopic(url,tTitle) {

maxlen=300;

if (typeof saveDesc=='undefined') { saveDesc=[]; }
if (typeof saveDesc[url]!='undefined') { descarea=document.all?document.all.miniTopic:document.getElementById("miniTopic");
descarea.innerHTML="<b><u>"+tTitle+"</u></b><br />"+saveDesc[url];
descarea.style.display='';
}
else {
url=url;
tTitle=tTitle;
descReq=Request();
descReq.open("http://inny.ipbfree.com/GET",url);
descarea=document.all?document.all.miniTopic:document.getElementById("miniTopic");
descarea.innerHTML="<b>Loading Topic Preview...Please Wait... <img src='http://static.whosgoing.com/images/loading.gif'>";
descarea.style.display='';
descReq.onreadystatechange=function() {
if (descReq.readyState==4) {
txt=descReq.responseText;
txt.match(/<div class=["']postcolor["']>(.*?)<\/div>/i);
ntxt=RegExp.$1;
if (ntxt.length>maxlen) {
ntxt=ntxt.substring(0,maxlen);
if (ntxt.match(/(<[^>]*?$)/i)!=null) { ntxt=ntxt.replace(RegExp.$1,''); }
ntxt+="...";
}
descarea=document.all?document.all.miniTopic:document.getElementById("miniTopic");
descarea.innerHTML="<b><u>"+tTitle+"</u></b><br />"+ntxt;
saveDesc[url]=ntxt;
}
}
descReq.send(null);
}
}
if (document.location.href.match(/showforum=[0-9]+/i)) {
as=document.getElementsByTagName("a");
for (p=0; p<as.length; p++) {
if (as[p].href && as[p].href.match(/showtopic=[0-9]/i)) {
u=as[p].href;
as[p].onmouseover=function() { GetTopic(this.href,this.innerHTML); }
as[p].title='';
as[p].onmouseout=function() { descarea=document.all?document.all.miniTopic:document.getElementById("miniTopic"); descarea.style.display="none"; }
}
}
}
document.onmousemove=SetDescPos;
</script>

this one has stopped working also.

Is your original problem fixed?
If so, mark this thread as 'solved' and start a new one.

Excellent fxm, Thankyou so much, except my window had colored scrollbars before, these colors

{scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;}

any way to put them back? :)

Css maybe?

my window had colored scrollbars before, these colors

{scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;}

That is [part of] a <style> declaration.

any way to put them back?

You did not post any <style> information with your first question, which is why my version of the page has none.

Just copy [carefully] all of the <style></style> section(s) from the original page into the proper place in the <head> of the current version.

like this? before or after the code in the head?

<style type="text/css">
<!--
Image Viewer{scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;} 
-->
</style>

I meant the popup had colored scrollbars, not the original page.

like this?

With one change.

<style type="text/css">
<!--
body {scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;} 
-->
</style>

before or after the code in the head?

The usual place is right after the closing </title> tag. It gets a little more complicated if there are other <style> elements.

It seems to disable the code entirely ???

<script type='text/javascript'>
var popbackground = "http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg"; //specify backcolor or background image for pop window
var windowtitle = "Image Viewer"; //pop window title

function detectexist(obj) {
    return (typeof obj != "undefined");
}
function jkpopimage(imgpath, popwidth, popheight, textdescription) {
    function getpos() {
        leftpos = (detectexist(window.screenLeft)) ? screenLeft + document.body.clientWidth / 2 - popwidth / 2 : detectexist(window.screenX) ? screenX + innerWidth / 2 - popwidth / 2 : 0
        toppos = (detectexist(window.screenTop)) ? screenTop + document.body.clientHeight / 2 - popheight / 2 : detectexist(window.screenY) ? screenY + innerHeight / 2 - popheight / 2 : 0
        if (window.opera) {
            leftpos -= screenLeft;
            toppos -= screenTop;
        }
    }
    getpos()
    var winattributes = 'width=' + popwidth + ', height=' + popheight + ', resizable=yes,scrollbars=yes, left=' + leftpos + ', top=' + toppos;
    var bodyattribute = 'topmargin=0 leftmargin=0 background=' + popbackground;
    if (typeof jkpopwin == "undefined" || jkpopwin.closed) {
        jkpopwin = window.open("", "", winattributes);
    } else {
        //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
        //jkpopwin.moveTo(leftpos, toppos)
        jkpopwin.resizeTo(popwidth, popheight + 30);
    }
    jkpopwin.document.open();
    jkpopwin.document.write('<html><title>' + windowtitle + '<\/title><style type="text/css">
<!--
body {scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;} 
--></style>
<body ' + bodyattribute + '><img src="' + imgpath + '" style="margin-bottom: 0.5em"><br><center>' + '<\/body><\/html>');
    jkpopwin.document.close();
    jkpopwin.focus();
}
function ResizeThem() {
    maxheight = 300;
    maxwidth = 300;
    imgs = document.getElementsByTagName("IMG");

    for (p = 0; p < imgs.length; p++) {
        if (imgs[p].getAttribute("alt") == "user posted image") {
            w = parseInt(imgs[p].width);
            h = parseInt(imgs[p].height);

            if (parseInt(imgs[p].width) > maxwidth) {
                imgs[p].style.cursor = "pointer";
                imgs[p].setAttribute('title', 'Reduced Image - Click to see full size');
                imgs[p].onclick = new Function('onclick=jkpopimage(this.src,600,500);');
                imgs[p].height = (maxwidth / imgs[p].width) * imgs[p].height;
                imgs[p].width = maxwidth;
            }
            if (parseInt(imgs[p].height) > maxheight) {
                imgs[p].style.cursor = "pointer";
                imgs[p].setAttribute('title', 'Reduced Image - Click to see full size');
                imgs[p].onclick = new Function('onclick=jkpopimage(this.src,600,500);');
                imgs[p].width = (maxheight / imgs[p].height) * imgs[p].width;
                imgs[p].height = maxheight;
            }
        }
    }
}
    </script>

Oh, I see.
To get the declaration into the script you need it in the form of a variable (as opposed to the plain CSS).
Give me a couple of minutes.

This

<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type='text/javascript'>
var popbackground = "http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg"; //specify backcolor or background image for pop window
var windowtitle = "Image Viewer"; //pop window title

function detectexist(obj) {
    return (typeof obj != "undefined");
}
function jkpopimage(imgpath, popwidth, popheight, textdescription) {
    function getpos() {
        leftpos = (detectexist(window.screenLeft)) ? screenLeft + document.body.clientWidth / 2 - popwidth / 2 : detectexist(window.screenX) ? screenX + innerWidth / 2 - popwidth / 2 : 0
        toppos = (detectexist(window.screenTop)) ? screenTop + document.body.clientHeight / 2 - popheight / 2 : detectexist(window.screenY) ? screenY + innerHeight / 2 - popheight / 2 : 0
        if (window.opera) {
            leftpos -= screenLeft;
            toppos -= screenTop;
        }
    }
    getpos()
    var winattributes = 'width=' + popwidth + ', height=' + popheight + ', resizable=yes,scrollbars=yes, left=' + leftpos + ', top=' + toppos;
    var bodyattribute = 'topmargin=0 leftmargin=0 background=' + popbackground;
    if (typeof jkpopwin == "undefined" || jkpopwin.closed) {
        jkpopwin = window.open("", "", winattributes);
    } else {
        //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
        //jkpopwin.moveTo(leftpos, toppos)
        jkpopwin.resizeTo(popwidth, popheight + 30);
    }
var bodycss = '<style type="text\/css">html \{scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;\}<\/style>'
    jkpopwin.document.open();
    jkpopwin.document.write('<html><title>' + windowtitle + '<\/title>'+bodycss+'<body ' + bodyattribute + '><img src="' + imgpath + '" style="margin-bottom: 0.5em"><br><center>' + '<\/body><\/html>');
    jkpopwin.document.close();
    jkpopwin.focus();
}
function ResizeThem() {
    maxheight = 300;
    maxwidth = 300;
    imgs = document.getElementsByTagName("IMG");

    for (p = 0; p < imgs.length; p++) {
        if (imgs[p].getAttribute("alt") == "user posted image") {
            w = parseInt(imgs[p].width);
            h = parseInt(imgs[p].height);

            if (parseInt(imgs[p].width) > maxwidth) {
                imgs[p].style.cursor = "pointer";
                imgs[p].setAttribute('title', 'Reduced Image - Click to see full size');
                imgs[p].onclick = new Function('onclick=jkpopimage(this.src,600,500);');
                imgs[p].height = (maxwidth / imgs[p].width) * imgs[p].height;
                imgs[p].width = maxwidth;
            }
            if (parseInt(imgs[p].height) > maxheight) {
                imgs[p].style.cursor = "pointer";
                imgs[p].setAttribute('title', 'Reduced Image - Click to see full size');
                imgs[p].onclick = new Function('onclick=jkpopimage(this.src,600,500);');
                imgs[p].width = (maxheight / imgs[p].height) * imgs[p].width;
                imgs[p].height = maxheight;
            }
        }
    }
}
    </script>
    <title></title>
  </head>
  <body>
    <img src="http://landscapearchiteck.files.wordpress.com/2008/04/franklin_trees_01.jpg"
    alt='user posted image'>
    <script type='text/javascript'>
ResizeThem();
    </script>
  </body>
</html>

will style the scrollbars in the popup in IE8 [and in any other browser(s) with support for the declarations].

This project has been very instructive - for me, anyway.
In the course of testing I discovered that [because of a timing issue] your code wouldn't work in Chrome/Safari(pc).

The cure is to change the way the first function is called. Replace the existing lines 67-72 with

<body onload="ResizeThem()">
    <img src="http://landscapearchiteck.files.wordpress.com/2008/04/franklin_trees_01.jpg"
    alt='user posted image'>
  </body>

and 'all' browsers will shrink the images as intended.

This is indeed instructive, I hadnt even considered testing in other browsers, is there somewhere online you can do that without installing other browsers?
Anyway its working well, Thankyou very much for all your help, you're a ledgend! :)

testing in other browsers, is there somewhere online you can do that without installing other browsers?

Arguably the best of the free ones are
http://browsershots.org/ somewhat slow
https://browserlab.adobe.com/en-us/index.html# almost realtime [a limited number of browsers (compared to browsershots) but impressive additional features]

IMO testing on a Windows platform will go a lot faster with browsers installed locally. In order of preference I have Chrome, Firefox, Safari(pc), IE8, Opera [and for special cases IE6 (although I have basically phased that out)]. Keeping them all current is trivial with Secunia running.

Once Again, Thankyou for going out of your way to be helpful! Much appreciated indeed! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.