PDA

View Full Version : Opening Images in New Windows--With Text

RoshSok
01-06-2003, 09:03 PM
Hey I'm a total novice with javascript so please bear with me...

I have a website where I display my artwork. There are about 10 thumbnails on a page. What I want is that when the thumbnail is clicked, the bigger sized image of my artwork opens into a new window. For each thumbnail, I would like the .jpg file to open up into the new window (and not a new .html file), when clicked. However, I would like there to be space for where i can write an explanation for the piece within the popup.

I have tried the following, but I haven't figured out how to get text in there:

function MM_openWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}

Any help would be appreciated
Rosh
ez4ne12c
01-06-2003, 09:08 PM
If you want to put text then you will end up with html not just a jpg...
that is, unless you edit your image and put the text as part of the jpg..
ez

ps This is just how i would do it

popping up new windows is not always good form... thats because the user is already able to choose to look at your thumbnail in a new window if they want to with a right click.. a left click usually means the user wants to look at the link in the same window...
If i wanted to provide further information i would use the mouseover on the thumbnail to display this...
scroots
01-06-2003, 09:21 PM
try the following it might not be the best but anyway

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<SCRIPT language="JavaScript">

/*
Script posted and featured on JavaScript Kit
http://javascriptkit.com
*/
//a is image location
//b is image text

function displayimage(a,b) {
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width=2 00,height=255");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC=" + a + ">");
PreView.document.write("<P>"+ b +"</P>");
PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " +
"onClick='window.close()'></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
</SCRIPT>
</head>

<body>

<p><a href="#" onClick="displayimage('Flags/Flag3.jpg','my image text')"><img border="0" src="image.jpg" width="241" height="158"></a></p>

</body>

</html>

for a differnet image just add the follwoing for each thumbnail
<a href="#" onClick="displayimage('fullsize.jpg','my image text')"><img border="0" src="thumbnail.jpg" width="241" height="158"></a>

scroots
scroots
01-06-2003, 09:39 PM
is the code above helpful? would you like me to explain it, i might submit it to javascriptkit

scroots
ez4ne12c
01-06-2003, 09:50 PM
I would get rid of the Front Page generator stuff b4 submitting to kit
ez
scroots
01-06-2003, 09:53 PM
i will do i will improve it and modify it first before sending it to kit, its only like that becaue i was doing it quickly.

scroots
RoshSok
01-09-2003, 02:20 PM
I'm trying to understand it, Scroots, but I'm getting a little lost...

PS: sorry about the delayed response
Borgtex
01-09-2003, 03:33 PM
Use parameters, and then you only need a page that will work as a template:


function MM_openWindow('XCont.htm?image01.jpg&This is image number one','noname','width=450,height=450)


and in XCont.htm
<head>
<script>
data=unescape(self.location.search.substring(1)).split('&')
</script>
</head>

<body>
<script>
document.write('<img src="'+data[0]+'"><br>'+data[1])
</script>
</body>
scroots
01-09-2003, 07:03 PM
its ok.

****Put in the Head Section
<SCRIPT language="JavaScript">

/*
original Script posted and featured on JavaScript Kit
http://javascriptkit.com modified by Matt Newton
*/
//a is image location
//b is image text
//Block 0
function displayimage(a,b) {
//block 1
PreView = window.open("", "Preview", " toolbar=0,location=0,directories=0,status=0,menuba
r=0,scrollbars=0,resizable=0,copyhistory=0,width=2
00,height=255");
//block 2
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM>");
//Block 3
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC=" + a + ">");
//Block 4
PreView.document.write("<P>"+ b +"</P>");
//Block 5
PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " +
"onClick='window.close()'></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
</SCRIPT>

I have added some comments to help.
In Block 0 this is the funtion it grabs what is in the onclick handler of a link and calls them a and b (seperated by a comma (,)).
In block one this is the window atributes e.g. size, title
Block 2 opens the window an writes some html to it (the html is in the PreView.document.write bit)
Block 3 writes the image tag and the image source (SRC) is a which is the first thing in the onlcick handler in the brackets.
Block 4 writes b which is the text which is got from the onclick handler in the brackets, the second one, the thing after the comma.
Block 5 adds a close button to close the popup.

for the image links

****Put in the body section****
<p><a href="#" onClick="displayimage('Flags/Flag3.jpg','my image text')"><img border="0" src="image.jpg" width="241" height="158"></a></p>

the part in red needs to be change to the location of the image which is going to be in the popup window.
the part in purple is the image text which needs to be changed to the text that is going to be written inder the image.
the part in the colour deep pink needs to be changed for the image location of the thumbnail.

I will post in a min with an example of my script in practice, so you can get the jist of it all.

scroots
scroots
01-09-2003, 07:14 PM
right a quick example (george i hope you don`t mind about the use of the images)
male the following into a new page (you will need to be on the internet to see it work properly)

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<SCRIPT language="JavaScript">

/*
originale Script posted and featured on JavaScript Kit
http://javascriptkit.com
modifications by Matt Newton to have text and not a dropdown
*/
//a is image location
//b is image text

function displayimage(a,b) {
PreView = window.open("", "Preview", " toolbar=0,location=0,directories=0,status=0,menuba
r=0,scrollbars=0,resizable=0,copyhistory=0,width=2
00,height=255");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC=" + a + ">");
PreView.document.write("<P>"+ b +"</P>");
PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " +
"onClick='window.close()'></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
</SCRIPT>
</head>

<body>
a few hyperlink examples
<p><a href="#" onClick="displayimage('http://www.codingforums.com/images/smilies/smile.gif','what a happy face')">Smile</a></p>
<p><a href="#" onClick="displayimage('http://www.codingforums.com/images/smilies/thumbsup.gif','a big thumbs up for everyone at coding forums')">THUMBS UP</a></p>
some image link examples are shown in the code in my previous post, i cannot find suitable images to show you it but i hope you get the idea from the code.
</body>

</html>
RoshSok
01-13-2003, 06:51 PM
Ok, Will try it, THanx