Web Design Question

[oDDity]

When clicking on athumbnail, how do you get the full size image to pop up in it's own window, fully sized to the image?

Like this gallery for example.

[Subjective Effect]

Well the way she does it is with javascript. This is the important line:

<a href="#" onClick="MM_openBrWindow('portfolio/paintings/paint_01.htm','RKlargeart','scrollbars=yes,resizable=yes,width=7

00,height=550')"><img src="images/portfolio/paintings/thumbs/Ptg_thumb_01.jpg" width="74" height="74" border="0" /></a>

 

The problem with this is if someone has javascript turned off it won't work. The solution is to add the actual url to the href=""

If scripts are on it will pop-up normally, if not the user will still get to see the link but just not formatted they way you intended. And I just use window.open. She has used a function (MM_openBrWindow) to open the window. There is probably some fancy reason she has used a function to do it but I don't see it and my method works fine afaik.

 

Is this for pixelwerks?

[oDDity]

She specifies the size after that code though, can you make the pop up window automatically fit the image?

Yes, I'm redesigning pixelwerks, the old design looks like amateur shite. THis is still under construction, but it's looks a lot better - www.pixelwerks.be

[Subjective Effect]

There are several ways you can do this. You can specify in the link what size you want the window to be, yes. E.g. :

 

window.open('examples/revenant.html','newwin','height=300, width=300')

Easier than her method.

 

But you could also set each image to be the same size (or have the same sized bounding box) and have a gallery that you can cycle through with buttons in the pop-up.

[oDDity]

It's half working, the problem is that as well as the pop up image window, it's also trying to open the page as normal as well, and opera is treating the second one as a pop up and won't load it.

The inages on the main page are actually an image map-

<map name="l5" id="l5">
 <area shape="rect" coords="42,3,137,98" href="#" onClick="window.open('pictures/pages/builderpriest02.htm','RKlargeart','scrollbars=yes,resizable=yes,width=7
00,height=550')">
 <area shape="rect" coords="39,127,140,227" href="#" alt="ursula">
 <area shape="rect" coords="39,257,142,360" href="#" alt="revenant">
 <area shape="rect" coords="40,383,139,483" href="#" alt="noblewoman">
 <area shape="rect" coords="41,511,143,611" href="#" alt="thief">
</map>

IT works in firefox though.

Also, if I put the link in place of the "#" then the popup doesn't work any more and the page just opens as normal.

[Subjective Effect]

Have you tried it with the actual url in?

 

I never use image maps so I don't know if it's related to that but you could try taking href out altogether.

[oDDity]

Removing the href works in firefox and IE, but not in opera, and in all browsers, the hand icon does not appear when you hover over the image.

[Subjective Effect]

Try it with the actual href in it. Just make sure you target it out of the parent window. That might work and if someone has javascript turned off they'll still be able to see the image.

[oDDity]

IT works in IE and Firefox, but not in opera. opera just opens the page as normal, which is strange since it works in the gallery I linked above.

Even when I try it with a normal image

<a href="pictures/pages/builderpriest02.htm"onClick="MM_openBrWindow('pictures/pages/builderpriest02.htm','RKlargeart','scrollbars=yes,resizable=yes,width=7
00,height=1024')"><img src="mainpageimages/pixelwerks.jpg" alt="pixelwerks" width="410" height="64" border="0">

THat's using the exact same code from that site, and I included the java script at the top as well.

It works in opera for that site, but not for mine.

[Subjective Effect]

Hmmm. I can't see why it shouldn't work. I'll look later.

 

Edit: I keep editing as I realise that you've tried each thing I suggest lol.

[oDDity]

To sum uo, the basic problem is that tis code works fine in IE and Firefox, but in Opera, the window just opens like a normal linked page, even though this code is from a site where the popup does work in opera

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>pixelwerks</title>
<style type="text/css">
<!--
body,td,th {
color: #29333D;
}
body {
background-color: #FFFFFF;
}
-->
</style>
<link href="style01.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arg
uments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
 window.open(theURL,winName,features);
 }

//-->
</script>
</head>

<body onLoad="MM_preloadImages('mainpageimages/darkmod_over.gif','mainpageimages/nioghtblade_over.gif','mainpageimages/misc_over.gif','mainpageimages/tuorials_over.gif','mainpageimages/contact_over.gif')">
<table width="763" height="161" border="0" align="center" bgcolor="#FFFFFF" id="main">
 <tr>
<td width="788" height="64" align="center" valign="top" nowrap bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="right"><a href="#"onClick="MM_openBrWindow('pictures/pages/builderpriest02.htm','RKlargeart','scrollbars=yes,resizable=yes,width=7
00,height=1024')"><img src="mainpageimages/pixelwerks.jpg" alt="pixelwerks" width="410" height="64" border="0"></a><img src="mainpageimages/charmodleing.jpg" alt="character modeling" width="346" height="64"></div></td>
 </tr>
 <tr>
<td height="64" align="center" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="right"></div>
	<div align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('dark mod','','mainpageimages/darkmod_over.gif',1)"><img src="mainpageimages/darkmod.gif" alt="dark mod" name="dark mod" width="140" height="64" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','mainpageimages/nioghtblade_over.gif',1)"><img src="mainpageimages/nightblase.gif" alt="nightblade" name="Image6" width="102" height="64" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','mainpageimages/misc_over.gif',1)"><img src="mainpageimages/misc.gif" alt="misc" name="Image7" width="85" height="64" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','mainpageimages/tuorials_over.gif',1)"><img src="mainpageimages/tutorials.gif" alt="tutorials" name="Image8" width="99" height="64" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','mainpageimages/contact_over.gif',1)"><img src="mainpageimages/contact.gif" alt="conact" name="Image9" width="141" height="64" border="0"></a></div>
	<div align="left"></div>
	<div align="center"></div></td>
 </tr>
 <tr>
<td height="21" align="center" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
 </tr>
</table>
<table width="763" height="496" border="0" align="center">
 <tr>
<td width="230" nowrap bgcolor="#FFFFFF"><div align="right"><img src="mainpageimages/leftimages.jpg" alt="left image map" width="141" height="632" border="0" usemap="#l5"></div></td>
<td width="286" align="center" valign="top" bgcolor="#FFFFFF"><div align="center">
  <p> </p>
  <p class="bodymain">To be, or not to be   
	</p>
  </div></td>
<td width="233" nowrap bgcolor="#FFFFFF"><div align="left"><img src="mainpageimages/rightimages.jpg" alt="right image map" width="141" height="632" border="0" usemap="#r3"></div></td>
 </tr>
</table>
<div align="left"></div>
<map name="l5" id="l5">
 <area shape="rect" coords="43,3,138,98" href="#"onClick="MM_openBrWindow('pictures/pages/builderpriest02.htm','RKlargeart','scrollbars=no,resizable=yes,width=60
0,height=800')">
 <area shape="rect" coords="39,127,140,227" href="#" alt="ursula">
 <area shape="rect" coords="39,257,142,360" href="#" alt="revenant">
 <area shape="rect" coords="40,383,139,483" href="#" alt="noblewoman">
 <area shape="rect" coords="41,511,143,611" href="#" alt="thief">
</map>
<map name="r3" id="r3">
 <area shape="rect" coords="3,1,102,101" href="#" alt="guard1">
 <area shape="rect" coords="1,130,99,229" href="#" alt="bot1">
 <area shape="rect" coords="2,259,103,357" href="#" alt="guard2">
 <area shape="rect" coords="3,381,101,484" href="#" alt="keeper">
 <area shape="rect" coords="3,508,105,611" href="#" alt="forgere">
</map>
</body>
</html>

[Subjective Effect]

The crazy thing here is I have had an issue with Opera not liking href="#" in the past, and even when I've copied working code from another site. Might be the docutype or something.

 

Anyway, I have this in one of my pages and it works fine:

<a href="examples/jseg4.html" onclick="window.open('examples/jseg3button.html','newwin','height=300, width=300')" target="newwin">

If javascript is on it opens a window 300x300 with the jseg3button.html in it. If it's off it opens a full sized new window (with the name "newwin") with jseg3button.html in it.

[oDDity]

I deleted my cache and it's working in opera again now, even the links form the image maps, so I think I'll just leave it. I don't want to have tn replace all that code again.

It was obviously just not refreshing properly due to the cache in opera as I constantly changed the code and tested it.

[Subjective Effect]

Nevertheless I recommend you include the real url in the href if you haven't already done so. I look forward to seeing your new site.

[oDDity]

Actually, I've just worked on what was really going on with opera.

It's to do with the size of your screen Vs the size of the popped up window.

If the pop up windows are bigger than the current opera window - the actual 'live' aera, not counting toolbars etc - then the popup doens't happen, and it just opens the image in an ordinary page.

The upshot is, that even with images that are no higher than 700 pxiels, at 1024x756 screen res they are too big and opera opens them as normal windows.

[Subjective Effect]

You know you can remove all the extra stuff from a window so it's practically a fram without scrollbars, buttons and the address bar, right? That would make a 700 high image go into a window. But if you want to exploit this Opera behaviour...

[oDDity]

I only have the toolbar, address bar and window tabs, as I'm sure the vast majority of Opera users have at least that much as well. I kee my screen 1280x1024 so it's not a problem for me anyway, but most people have their's at 1024 or even samller.I guess I'll have to try the OPera forums to see if there is a way around this.

[oDDity]

Apparently opera always behaves like that and there is no fix for it, so people surfing at low resolution using Opera will just have to forego the sized pop-up image and make do with a boring old normal page.

Kills my design intent a little, but you can't have everything, can you..

Anyway, my new site is up now - if you have visted in the recent past you will have to refresh the main page.

Any suggestions?

[Subjective Effect]

I really like the new site. Very clean, nice organisation and the pop-ups work fine. I can see why you wouldn't want next and back buttons. The drop shadow on the thumbs is nice too. And everyone likes B&W thumbs opening colour pics.

 

The menu gfx are a tiny (tiny) bit unneccesary but I'm a real minimalist and it is an art site so I guess it's ok. If you are going to have those animated arrows you should put one on the title graphic that links to the index page>

 

I found a spelling error: - "[City Watch Captian]"

[oDDity]

Yes, I can see how next and back button might be handy to stop people having to close each popup image and then click on the next thumbnail., it would get rather annoying if they wanted to view every image.

[Gildoran]

If I may suggest a slight modification - when viewing images, I'm in the habit of opening up the link in a new tab/window in firefox, in case the website doesn't do what you did. However, when I try that on your page, the original menu page pops up in the new tab instead of the screenshot. Could you make it so that if you follow the actual link, it goes to the image?

[Subjective Effect]

Oh yeah, that's another benefit of having the real url instead of #. Got to think of these things in a world of tabbed browsing

[oDDity]

I can't get that to work, if I put the link instead of a # then it opens up the pop-up image AND the images on a separate page as well.

[Subjective Effect]

In all browsers? That's wierd. Do it and clear the cache. I have this very thing set up right here on my machine and it doesn't do that.