MarcParnes wrote:
> Hi,
> I have a thumbnail that opens a smallish picture in a new browser
> window. I'd like to control the size of the new window so its about
> the same size as the picture. Now it opens up a fullscreen window
> which dwarfs the picture. I've seen other sites that do that but I
> can't figure out how to do it in FP. Can someone help please?
>
> Thanks,
> Marc
Marc,
FP won't do it by itself, but Steve Easton (MVP) and I have been having a
discussion over many threads about a script that will do it.
Steve's script is below, with one small change (only he will know what it
is).
Go to Code or HTML view and paste it between <head> and </head>:
// =============== Script to paste ================
<script type="text/javascript">
var img , imageToLoad , sVarA , sVarRS
var newwindow , newdocument , sToPass
function newWindow(img)
{
imageToLoad = new Image()
new function testit()
{
imageToLoad.src = (img)
// we need a little pause while the script gets the image since the
image is on the server,
// or the browser will open the window and write the script before the
image is cached,
// which causes the script to write zeros for the resizeto dimensions.
setTimeout(loadit,1000)
//--- Internal function ---
function loadit()
{
sVarA = ("left=20px" + ",top=20px" + ",width=" + imageToLoad.width +
",height=" + imageToLoad.height)
sVarRS = 'onload="resizeTo(' + imageToLoad.width + ',' +
imageToLoad.height + ')"'
sToPass='<html><head>\n'
+ '<style type="text/css"> body{ background-repeat:
no-repeat; }</style>\n'
+ '<title>' + img + '</title>\n'
+ '</head>\n'
+ '<body ' + sVarRS + ' background=' + img + '>\n'
+ '</body></html>'
//check to see if we have the dimensions and if not, go back and wait
another 1 second
if ( imageToLoad.width == 0 ){ testit() }
else
newwindow = window.open('','',sVarA)
newdocument = newwindow.document
newdocument.write(sToPass)
newdocument.close()
}
//--- End loadit() ---
}
//--- End testit() ---
}
</script>
// =============== End of Script ================
Call it from HTML by
<a href="#" onclick="newWindow('mypicture.jpg')">
<img src="mypicture_t.jpg" alt=" ">My picture</a>
Change:
'mypicture.jpg' to the name of your image
"mypicture_t.jpg" to the name of your thumbnail image
'My picture' to your caption
You can change the position of the page by left and top in this line
sVarA = ("left=20px" + ",top=20px" + ",width=" + imageToLoad.width +
",height=" + imageToLoad.height)
I found it works quite nicely.
Steve, hope you don't mind. I think the script is great.
I have modified it myself (see my website) to place the background image in
a grey box, centered horizontally, with grey rounded corners, but that's
just an added bell (or is a whistle?) Marc, I can send details of how to do
this, but the rounded corners are a bit tricky.
--
Cheers,
Trevor L.
Website:
http://tandcl.homemail.com.au