Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Preloading images and view them in new window 1

Status
Not open for further replies.
Idee

Idee

Programmer
Jul 8, 2003
51
NZ
Hi everyone,
I have preloaded the images and then view the bigger image in a new window.
I have a page with number of images and on a image click, I call function PopImage('imagename'). The problem is that if I have clicked on an image and viewd it in a new window and that window is still open and then I try to view another image, it will keep on poping up the first image. So image doesn't get refreshed. This is my javascript code below:


<script>

var myImage;
var wd,img,hi,opWin=0,imgWindow
function PopImage(img) {
myImage = new Image()
myImage.src = img
IsLoaded(img)
}

function IsLoaded(img) {
if (myImage.complete){
var wd = myImage.width
var hi = myImage.height

var imgWindow=window.open ('', 'img_window', 'scrollbars=no,status=no,resizable=no,width='+wd+',height='+hi+'')

imgWindow.document.writeln(
'<style>body{border:0;margin-width:0;padding:0;}</style><body bgcolor="##ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">'
+'<img src="'+img+'" width=100% height=100%></body>');

imgWindow.focus();

opWin++
self.status = 'Image Loaded!'
setTimeout('self.status = \'\'',2000)
}

else {
setTimeout('IsLoaded(\''+img+'\')',100)
self.status = 'Loading Image - '+img+'....'
}
}
</script>


Any help is appreciated.

Thanks
 
Sort by date Sort by votes
Well, I hope all your images are the same size because once that window is created, they will continue to pop into that window (unless it is closed). To avoid this, name each window distinctly, like:

Code: 
var imgWindow=window.open ('', [b]img.substring(0,img.indexOf('.'))[/b], 'scrollbars=no,status=no,resizable=no,width='+wd+',height='+hi+'')

The crux of what you're asking about, however, is that you need to CLOSE the document to which you're writing your images. If you left 'menubar=yes' in the window.open line, you could 'View Source' after loading the first image, then again after loading the second image. What you would see (after the second image is loaded) is something like:

Code: 
<style>body{border:0;margin-width:0;padding:0;}</style><[b]body[/b] bgcolor="##ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><img src="firstImage.gif" width=100% height=100%></body>
<style>body{border:0;margin-width:0;padding:0;}</style><[b]body[/b] bgcolor="##ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><img src="secondImage.gif" width=100% height=100%></body>

Notice the two body tags. This confuses the HTML. If you want to keep using this window for images (although you won't be able to resize it the way you're going about it), then you need to "close" the document in the image window. Try:

Code: 
    imgWindow.document.writeln(
        '<style>body{border:0;margin-width:0;padding:0;}</style><body bgcolor="##ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">'
        +'<img src="'+img+'" width=100% height=100%></body>');
    [b]imgWindow.document.close();[/b]
    imgWindow.focus();

...and that should do the trick.

--Dave
 
Upvote 0 Downvote
Thank you so much Dave..

It solves my problem to some extent. My images are not of same size. If I name the windows distinctly and then close it, will it solve the problem of different image sizes. I am trying to give distinct name to each window using:

var imgWindow=window.open ('', img.substring(0,img.indexOf('.')), 'scrollbars=no,status=no,resizable=no,width='+wd+',height='+hi+'')

It throws an error - Invalid arguement. Can window name parameter be a variable in window.open?

If you help me again. Thanks once again..
 
Upvote 0 Downvote
It was working for me in IE6. Prior to doing the indexOf(...) stuff, I was getting errors, I believe, because it didn't like the '.' in front of the file extension that was part of (img).

That's probably the problem... make sure there are no spaces in the values for 'img'. That will throw off the window.open command also.

Change the line to:

Code: 
var imgWindow=window.open ('', img.substring(0,img.indexOf('.'))[b].replace(' ','')[/b], 'scrollbars=no,status=no,resizable=no,width='+wd+',height='+hi+'')

...or better yet... (this will capture other potentially-problematic characters)

Code: 
var imgWindow=window.open ('', [b]escape([/b]img.substring(0,img.indexOf('.'))[b])[/b], 'scrollbars=no,status=no,resizable=no,width='+wd+',height='+hi+'')

Let me know if that works for you.

By the way, there is a imgWindow.resizeTo(width, height) function you can use, but my reference on that indicates use in Navigator 4 "requires UniversalBrowserWrite privilege to set either width or height to less than 100 pixels". It definitely requires that document.close() function, but then you can use:

Code: 
if(!imgWindow)
 imgWindow=window.open ('', 'img_window', 'scrollbars=no,status=no,resizable=no,width='+wd+',height='+hi+'')
else
 imgWindow.resizeTo(wd, hi);

...and not worry about the window name. In fact, since it works in the same window, it is significantly faster (for me) than opening a new window.

Note that to try this last idea, you CANNOT declare imgWindow as a variable INSIDE the function. I just noticed that you declared it globally (inside the SCRIPT tag, but outside the function) and then declared it again (locally) inside the function. No need to declare it again (i.e., instead of var imgWindow = ..., just use imgWindow = ...), and, in the case of using the resizeTo(...) function, you cannot (are not allowed to) do so.

'hope something in here gets you the rest of the way!

--Dave
 
Upvote 0 Downvote
By the way, if you go with the resizeTo(...) function, you might want to adjust your code to this:

Code: 
var content = 
 '<style>body{border:0;margin-width:0;padding:0;}</style><body bgcolor="##ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">'
 +'<img src="'+img+'" width=100% height=100%></body>'

if(!imgWindow)
{
 imgWindow=window.open ('', 'img_window', 'resizable=yes,scrollbars=no,status=no,width='+wd+',height='+hi+'')
 imgWindow.document.writeln(content);
}
else
{
 [b]imgWindow.document.writeln(content);[/b]
 imgWindow.resizeTo(wd, hi);
}

Notice the bold line. It writes the image to the window BEFORE resizing it. When you window.open(...), you have no choice but to write to it AFTER the command, but if you write to the window AFTER resizing it, you get a momentary vision of the old picture resized to awkward dimensions. Doing it this way makes it look smoother (to me).

Have a good rest of your weekend!

--Dave
 
Upvote 0 Downvote
Thanks Dave for being so helpful. It worked wonders and I have taken the second approach suggested by you..

Thanks once again..

Cheers
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
751
rogerte
rogerte
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
944
xwb
xwb
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
845
AbidingDude
AbidingDude
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
259
chrisjchrisj
chrisjchrisj
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
405
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top