PDA

View Full Version : POP-UP IMAGES

contactbill
01-11-2001, 01:13 PM
Hello
Say you go to a holidasy site and find a villa you like and the details of the villa have small thiumbnail images of the pool,inside rthe villa and so on.When you click the one thumbnail(say the pool) it opens a lager view,then you can clos that view with the original holiday site still there and click the next thumbnail say inside the vills and so on.When the larger view is seen it does not cover the whole of the original page (like a pop-up)The thumbnail can be clicked closed and you do not have to reload or wait for the original page to reload. Thats what I am after.
Bill
kevin
01-11-2001, 02:40 PM
try something like this....

<a href=# onclick="window.open('../images/bigpicture.jpg','mywindow','width=300,height=300,toolbar=no,location=no,directories=no,status=no,men ubar=no,scrollbars=yes,copyhistory=yes,re sizable=yes')"><img src=imagepath/thumbnail.jpg border=0 alt="click to see bigger"></a>

use the corrrect URL or path to your images (bold in above example). And adjust the width and height values to fit. You can also experiment with "no" and "yes" values, change them to yes or no and check out the results to set the resource window (pop up window) how you like it.

Regards,
Kevin
Syst3m Err0r
01-12-2001, 01:29 PM
This one only works with MSIE for now (I trying to make a NS compatible), but maybe you like it because it is very easy to use...

Put this between the <head></head> tags:
---------------------------------------------
<style>
DIV {position:absolute;}
</style>

<script language="JavaScript">
<!--//

function showFlyer(imgName) {
var image = new Image();
image.src = imgName;
popup = window.open( image ,'_blank','Height="0",Width="0",scrollbars=no,resize=no,left=0,top=0');
popup.document.write('<html><head><title>');
popup.document.write(imgName);
popup.document.write('</title><script language="JavaScript">');
popup.document.write('function fitWindowSize() {');
popup.document.write('width = 10+ (document.images[0].width);');
popup.document.write('height = 28 + (document.images[0].height);');
popup.document.write('window.resizeTo(width, height);}');
popup.document.write('</script></head>');
popup.document.write('<BODY onPageLoad="fitWindowSize();">');
popup.document.write('<div style="position:absolute; left:0px; top:0px">');
popup.document.write('<img src=" ' + imgName + '" onLoad="fitWindowSize();">');
popup.document.write('<script>fitWindowSize();setTimeout(fitWindowSize(),200);</script>');
popup.document.write('</div>');
popup.document.write('</body></html>');
}

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

And then call a picture just like this:
---------------------------------------------
<a href="javascript:showFlyer('../your/picture1.jpg');">click here to enlarge</a>

<a href="javascript:showFlyer('../your/picture2.jpg');">click here to enlarge</a>

---------------------------------------------

And that's it...

Greetz,

Syst3m Err0r

ps. this is very handy for popup windows/pictures that changes very often... see working demo at http://www.secretsound.nl

[This message has been edited by Syst3m Err0r (edited 01-12-2001).]