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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

popup image link with close window

Status
Not open for further replies.
mwebbo1

mwebbo1

Technical User
Jul 11, 2002
71
US
I am doing a site for a realtor, for a particular property, I have 4 thumbnail images, I can pop open a window with the larger version of the image in it. What I want to know is if there is a way to add a close window button without haveing to make the images open in another page. So the this is what I am thinking.
Click image > window opens with image as the path > some code writes to the window a close window button, is this possible?
Thanks in advance.
 
Sort by date Sort by votes
Your function:
Code: 
function openWin(src) {
    var w = window.open('', 'w', 'height=200,width=300');
    with (w.document) {
        .open();
        .writeln('<html><head><title>picture</title></head>');
        .writeln('<body>');
        .writeln('<img src="' + src + '"><br />');
        .writeln('<button onclick="window.close();">Close</button>');
        .writeln('</body></html>');
        .close();
    }
}


The way to call your function:
Code: 
<img src="thumb.gif" onclick="openWin('largerpic.gif');" />

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
Thanks for the response, but for some reason, I can not get it to work, are there any special instruction that i might need. I am far from being good with Javascript, so a detailed explanation might be necessary. Thanks again~
 
Upvote 0 Downvote
Sorry buddy, I got confused with my code for a second. Just remove those leading "."s from your code. Like this:

Code: 
function openWin(src) {
    var w = window.open('', 'w', 'height=200,width=300');
    with (w.document) {
        open();
        writeln('<html><head><title>picture</title></head>');
        writeln('<body>');
        writeln('<img src="' + src + '"><br />');
        writeln('<button onclick="window.close();">Close</button>');
        writeln('</body></html>');
        close();
    }
}

And consider adding "return false;" to your call.

Code: 
<img src="thumb.gif" onclick="openWin('largerpic.gif'); return false;" />

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
cLFlaVA, I am sorry man, I am not sure what you mean by removing the leading "."s from my code. The code that you sent is the same as before with the addition of the return false.
 
Upvote 0 Downvote
actually, I got ya, and it works, but there is no "clickable" mouse pointer, is there a way to get that?
 
Upvote 0 Downvote
Either of these two ways:

Code: 
<img src="thumb.gif" onclick="openWin('largerpic.gif'); return false;" style="cursor: pointer;" />
Code: 
<a href="#" onclick="openWin('largerpic.gif'); return false;"><img src="thumb.gif" /></a>

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
great, works perfectly, finally, is there a way to lose the button and have text? Thanks a lot for your help, saved me a lot of time!!!
 
Upvote 0 Downvote
Below is how to do it with text. I've modified the code a bit. This will now work for people even if they don't have JavaScript enabled. It will open the image in the same window if JS is disabled, but will open in the popup window if JS is enabled. This is a solid concept for maximum compatibility.

Code: 
<a href="largerpic.gif" onclick="openWin(this.href); return false;">Blah Blah Text Blah Blah.</a>

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
What I mean is, close the window with text rather than a button
 
Upvote 0 Downvote

Code: 
function openWin(src) {
    var w = window.open('', 'w', 'height=200,width=300');
    with (w.document) {
        open();
        writeln('<html><head><title>picture</title></head>');
        writeln('<body>');
        writeln('<img src="' + src + '"><br />');
        [red]writeln('<a href"#" onclick="window.close();">Close</a>');[/red]
        writeln('</body></html>');
        close();
    }
}

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]
 
Upvote 0 Downvote
cLFlaVA,

Thanks a lot for all of your help. I really appreciate the time and advice. Everything is working great! Take care!

mwebbo1
 
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
274
rogerte
rogerte
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
219
waubain
waubain
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
103
ggriffit
ggriffit
bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
118
Offera
Offera
bs6600
  • Locked
  • Question
How can I make a window wider?
Replies
1
Views
78
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top