;
PDA

Click to See Complete Forum and Search --> : Popups from flash buttons to custom HTML window

ArtnSoul
11-29-2006, 10:13 PM
Hi there, I was wondering if someone could help me work out how to code the java script for the following:

I have a scrolling thumbnail gallery (flash8) I have converted each thumbnail to a button. Now I want to open a size defined html window when the button/thumbnail is clicked. The good news is I've got the code worked out and working for 1 thumbnail, but how do you get the javascript in the originating page to recognise each of the other button/thumbnail's individual call to a different window? I hope I made sense!??

Thank you for any help - much appreciated.

Kind regards
Arty
catbert303
11-30-2006, 05:49 AM
Hi,

Exactly how this is done depends on how you've set up your javascript. But the key point is the window.open call.

window.open('picture.jpg', 'windowName', 'width=500,height=400,etc....');

in order to have javascript create separate windows for each thumbnail the windowName part needs to be changed for each of them.

So the button for thumbnail 1 might result in using,

window.open('picture1.jpg', 'pic1', 'width=500,height=400');

then for thumbnail 2,

window.open('picture2.jpg', 'pic2', 'width=500,height=400');

and so on...
ArtnSoul
11-30-2006, 04:24 PM
Hey thanks for that, so how do I work that in with what I have??

Here's the URL of what I have... http://www.doug-chapman-design.co.nz/Paintings/Websitev3ruf-22-11-06.html

Here's the script for that first thumbnail/button in flash8:
on(Release) {
getURL("JavaScript:popup();");
}

Here's the script from the top of my html page:
<SCRIPT LANGUAGE="JavaScript">
function popup() {
window.open('http://christianchapmanart.com.au/paintings/loaduponguns.htm','','toolbar=no,location=no,direc tories=no,status=no,menubar=no,scrollbars=yes,resi zable=no,width=942,height=444,left=0,top=0');
}
</script>

What do you do to add the next one? ie should the button script differ to the first one?

I'm sorry if I'm not getting it - I'm not a programmer... but very much appreciate your help!

Kind Regards
Arty
catbert303
11-30-2006, 05:52 PM
Hi, you don't really need any javascript in the page to do this.

Instead on your button use,

on (release) {
getURL("javascript:window.open('http://christianchapmanart.com.au/paintings/loaduponguns.htm', 'win1', 'scrollbars=yes,width=942,height=444,left=0,top=0' );void(0);");
}

note you don't need to include the things about status, directories, toolbar etc... if you don't want to have them on the window (leaving them out is the same as saying =no)

You next button might then be,

on (release) {
getURL("javascript:window.open('http://christianchapmanart.com.au/paintings/someotherfile.htm', 'win2', 'scrollbars=yes,width=942,height=444,left=0,top=0' );void(0);");
}

You could obviously give different windows different dimensions, positions and so on. The important part is the win1, win2 bits (which should appear in bold). These are the window names. If you try to create a window with a name that already exists the browser will reuse that window. So if you want each button to open a different window you have to make sure to use a different name for each call to window.open.
ArtnSoul
11-30-2006, 06:49 PM
THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU !!!!!!!!
Worked a treat!!!!!!

I've learned something great here!!!!! I just expanded my flash capability!!!!

Flashkit rocks!!!! as does this new section!!!

Thank you... I'll post the finished item when it's done!

Kind Regards
Arty
Schenkius
12-20-2006, 10:43 AM
Hi,

Is it possible to code the background for the html-page and so that the html-page resizes to the dimensions of the jpg-image? I'm affraid not (at least, in that line of code), but how could I do that? Can I do it by passing variables to an html-page, like in this example, 'http://christianchapmanart.com.au/paintings/loaduponguns.htm?bgcolor=#ff9933&resize=true' or so?

Thanx,
Michiel
catbert303
12-20-2006, 12:19 PM
If you have a template page for displaying the images you could maybe add some javascript to that to detect the dimensions of the image then resize the window accordingly. Here's a rough example,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
html, body, img { margin: 0; padding: 0; }
</style>
<script type="text/javascript">
onload = function() {
var img = document.getElementsByTagName('img')[0];
if (!img) return;
window.resizeTo(img.offsetWidth, img.offsetHeight);
};
</script>
</head>
<body>

<img src="/images/filename.jpg">

</body>
</html>