PDA

View Full Version : Image open in new window problem

ihaveabike
10-31-2002, 10:53 PM
I have a small static webshop, http://sosantique.net.
All pictures when pressed upon is opened in the same fram. Instead of this I would like to open the enlarged image in a new window without navigation and the other stuff.
Is the script winopen the best solution?
And is there any easy way to implement on my page without to much effort?
Also will this work on most browsers?
Thanks
easbrandel
10-31-2002, 11:39 PM
If I understood your question...

First, I assume you have two versions of your pics. Next, (and this is not an ad) O'Reilly's Designing with JavaScript has exactly the answers to your question, and since it is copyrighted, I can't quote it here, I'm sure. What I will say is that you can make a window.open (like you mentioned) function, and pass the url to it in your a href's. You name it so every photo opens up in that same 2nd window, and you can define the size, scrollbars and all that. I would say, saving your function in an external js file an efficient and (compliant) way to go. Also, I think this is a pretty basic JavaScript thing, so most JS browsers should be fine with it. Someone else out there correct me if I'm wrong on that one (also if there is a better way to do this);)
ihaveabike
10-31-2002, 11:43 PM
that's the way I want it.

Anywhere I can see the code for this.
whammy
11-01-2002, 12:29 AM
<html>
<head>
<title>Opening a window example!</title>
<script type="text/javascript">
<!--
function OpenWindow(URL,w,h){
myWin = window.open(URL,"myWin","scrollbars=1,left=400,top=150");
window.myWin.resizeTo(w,h);
window.myWin.focus();
}
// -->
</script>
</head>
<body>
<div>
<a href="javascript: void OpenWindow('example.htm',800,600)">Google it!</a>
</div>
<div>
<a href="javascript: void OpenWindow('example.htm',400,300)">Google it!</a>
</div>
</body>
</html>


P.S. the resizeTo() function will only work if you are accessing a page within the same domain. Otherwise it may give you an "Access denied." error.
ihaveabike
11-01-2002, 12:50 AM
thanks, image opens great. But however, I'm not solving the rest.
The thumbnail should be the link, not a written text.
Also, do I have to write the complete URL to make it work.
Here's the code
-----------------------------
<html>

<head>
<link rel="stylesheet" href="css/stilar.css" type="text/css">
<title>fynd</title>
<base target="_self">
<script type="text/javascript">
<!--
function OpenWindow(URL,w,h){
myWin = window.open(URL,"ResponseWin","width="+w+",height="+h+",scrollbars=1,left=400,top=150");
window.myWin.focus();
}
// -->
</script>
</head>

<body>
<table border="1" cellspacing="0" bordercolor="#003366" width="638" id="AutoNumber2" height="275" bordercolorlight="#003366" bordercolordark="#003366" style="border-collapse: collapse" cellpadding="8">
<tr>
<td width="137" height="12" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="center" bordercolor="#414F89">
&nbsp;</td>
<td width="384" height="12" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="left" valign="top" bordercolor="#414F89">
<p align="center"><font color="#FFFFFF" face="Verdana">FYNDAVDELNING</font></p>
<p align="center"><font color="#FFFFFF" face="Verdana">40 % avdrages på
angivet pris.</font></td>
<td width="113" height="12" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="left" bordercolor="#414F89">
&nbsp;</td>
</tr>
<tr>
<td width="137" height="19" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="center" bordercolor="#414F89">
<a href="bilder/olja/09080024.JPG">
<img border="2" src="bilder/olja/09080024_small.JPG" xthumbnail-orig-image="bilder/olja/09080024.JPG" width="100" height="88"></a></td>
<td width="384" height="19" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="left" valign="top" bordercolor="#414F89">
<font face="Verdana" size="2" color="#FFFFFF"><b>Olja på pannå av Evy Låås. Motivet föreställer ett landskap. Signerad,
60-tal. 45*55 cm. Ramad.</b></font></td>
<td width="113" height="19" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="center" bordercolor="#414F89">
<font face="Verdana" size="2" color="#FFFFFF"><b>Pris 495 kr</b></font></td>
</tr>
<tr>
<td width="137" height="1" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="center" bordercolor="#414F89">
<a href="http://www.sosantique.net/images/mynt.jpg">
<img border="2" src="bilder/mynt_small.jpg" xthumbnail-orig-image="http://www.sosantique.net/images/mynt.jpg" width="100" height="55"></a></td>
<td width="384" height="1" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="left" valign="top" bordercolor="#414F89">
<b><font color="#FFFFFF" face="Verdana" size="2">Felvänd 10-krona. Det vill
säga myntet är präglat som på bilden. Ocirkulerat.</font></b></td>
<td width="113" height="1" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="center" bordercolor="#414F89">
<b><font face="Verdana" size="2" color="#FFFFFF">Pris 1900 kr</font></b></td>
</tr>
<tr>
<td width="137" height="10" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="center" bordercolor="#414F89">
&nbsp;</td>
<td width="384" height="10" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="left" valign="top" bordercolor="#414F89">
&nbsp;</td>
<td width="113" height="10" bordercolorlight="#414F89" bordercolordark="#414F89" bgcolor="#003366" align="center" bordercolor="#414F89">
&nbsp;</td>
</tr>
</table>

</body>

</html>
whammy
11-01-2002, 12:52 AM
Hmm... actually you might want to try something like this as your final page:

http://www.solidscripts.com/querystring.htm?pic=mypicture.jpg&width=214&height=118

view the source code, and you can see hwo it works.
ihaveabike
11-01-2002, 01:01 AM
ok, like this and then(huuhu this is not my best area)
copy-paste this and fill in som fiction values so I know how to do it.
---------------------
<html>

<head>
<script type="text/javascript">
<!--
function QueryString(str){
var q = window.location.search;
var foundValue = ""
if(q.length > 1){
this.q = q.substring(1, q.length);
}
this.keyValuePairs = new Array();
if(q){
for(var i = 0; i < this.q.split("&").length; i++){
this.keyValuePairs[i] = this.q.split("&")[i];
if(this.keyValuePairs[i].split("=")[0] == str){
foundValue = unescape(this.keyValuePairs[i].split("=")[1]);
}
}
}
return foundValue;
}
//-->
</script>
</head>
<body>

<script type="text/javascript">
<!--
document.write("<img src=\"" + QueryString('') + "\" width=\"" + QueryString('width') + "\" height=\"" + QueryString('height') + "\" />");
//-->
</script>



</body>

</html>
whammy
11-01-2002, 01:02 AM
in that case there aren't any fictional values... it's all in the querystring (look at the address bar)
ihaveabike
11-01-2002, 01:10 AM
as I said, i'm not very good with this... :)

from the little I know, you must have something to collect data from(database) for this to work or am I completly wrong?

Sorry for not understanding.
whammy
11-01-2002, 01:14 PM
Ok, I can show you how to put the two together, but I have to go to work right now, it will have to be tonight or tomorrow unless someone else can help.

You might want to search the forums, there are a lot of solutions already posted here for what you're trying to do.

:)
ihaveabike
11-01-2002, 01:46 PM
hi
if you have the time, I would be glad, meanwhile I'll try to find something suitable here on the forum. I'll give you a notice if I find something.
whammy
11-01-2002, 11:54 PM
Ok, this is one example. All you'd have to do is change the "pic" and the width and height in the HTML body (NOT the function), and this should be close to what you want... check out the source codes of both pages.

You may also want to look up window.open() to see what other functionality you might want to add...

http://www.solidscripts.com/openpic.htm
ihaveabike
11-02-2002, 06:38 PM
thanks, I have got it working now.
Greatful for all you help and time "whammy".