Front Page Express Pop Up ???

[maxximilian]

Hi,

Does anybody know if and how you can use FPE to make an image appear in a pop-up window. For example: Right now, on my pages, when someone clicks a thumbnail image, the browser will leave the page and display the larger version. What I want to do is when someone clicks a thumbnail, instead of leaving the page, a pop-up appears with the larger image in it, but the browser stays on the thumbnail page. Also, this pop-up will not be a full-browser thingy, but just a window with the minimize/maximize/close corner buttons. I've seen this many places and I'm sure doing it in HTML is easy, but I don't know HTML and have only used WYSIWYG. Can FPE do this? Thanks. :)

[Steven.Bentley]

Hi Maxx

Not sure that FP can do it automatically, but this ought to work:

Put the small picture in and make it into a link that opens in a new window. Make the link point to

javascript:window.open('picturename.jpg','','width =50,height=60,top=100.left=100, menubar=no,toolbar=no,statusbar=no')

putting the filename for the image in for picturename.jpg, and the height and width of the popup in the obvious place. The Top and Left are the positioning of the popup, relative to the top left corner.

If you manage to get JavaScript errors it may be that you need to use double quotes instead of single quotes.

[maxximilian]

Thanks Steven, I'll give that a try. :)

[Steven.Bentley]

let us know how you get on :)

[maxximilian]

Steven,

OK...the first problem I ran into was that FPE doesn't seem to have a setting or option for forcing a link to open in a new window. I did some dearching and found some references to the fact that the followinf hand-editing will do this though:

A HREF="http://www.page.com" TARGET="NEW WINDOW"

Assuming that after I hand-edit the HTML that FPE produces and include the new window stuff, and I get the larger image to open in a new window, here is the next question:

In reference to the javascript you posted and making the link point to: For the "picture name.jpg", should I use a full address path including "http"?

For examlpe which of these are correct for an image called "fountain.jpg" that I have at my site:

1.
javascript:window.open('fountain.jpg','','width=50 ,height=60,top=100.left=100, menubar=no,toolbar=no,statusbar=no')

2.
javascript:window.open('http://members.home.net/glassportpa/graphics/fountain.jpg','','width=50,height=60,top=100.left= 100, menubar=no,toolbar=no,statusbar=no')

If it is the first example that is correct, how does the browser know where the file is located?

As I say, I don't know HTML or JAVA so if you can dumb it down just a little bit more I would appreciate it...LOL :D :D

Thanks

[Steven.Bentley]

In your first example that's a relative link, it looks for fountain.jpg in the same directory as the html page.

The second example gives the full path. I suspect that what you really want is images/fountain.jpg

../ works too in relative links to go up the directory structure.

Both work fine, relative links are better if you can because it means that you can move the site around to different servers and the relative links should still be valid.

[ 18 June 2001: Message edited by: Steven.Bentley ]

[Buzz]

javascript:window.open('fountain.jpg','','width=50 ,height=60,top=100.left=100, menubar=no,toolbar=no,statusbar=no')

What's the double quote there between the image and the width for?


I don't want to confuse things but.....

I use a standard little function for all my popups.

function popIt(url,x,y) {
window.open(url,"projects","toolbar=no,location=no,directories=no,status=no,me nubar=no,scrollbars=no,resizable=no,width=" + x + ",height=" + y);
}

just place that code between your head tags on your page.

In the link all you need is <a href=javascript :popIt("yourpage.html", widthvalue, hieghtvalue)">Your thumbnail image here</a>

I set up pages with my images on them because I like to add a button that will close the window when clicked <a href="javascript:self.close()">Button image here</a>

The pages link and act just like regular pages they are just smaller to accomodate specific image sizes.

for an example see here>>> http://www.creativescott.com/projects.html and click an image.

[ 18 June 2001: Message edited by: Buzz ]

[maxximilian]

Thanks for the suggestions steven and buzz. :)

I tried both methods listed here and only succeeded in wrecking the page. Not a problem, because I had a feeling this was going to happen and was working with copies...LOL :D

Here's the trouble. I don't have a clue what you guys are talking about. :D FPE does all this behind the scenes, so when I look at the HTML, it is difficult to determine what spots to place the lines of code you have provided. Apparently I placed them in the wrong places. Clearly, I need to learn more about what the WYSIWYG is actually doing. Hell I don't even know what "head tags" are and to be perfectly honest, I aint real sure what "tags" are...LOL :D

On the upside, this process has taught me how to make the images open in a new browser window, which is much better than the way I am using now. I'm going to at least make that change. Thanks for the help, but I spent hours on the page and couldn't get it to work. This isn't a crucial thing and can always wait until I get a bit more knowledge of this stuff. The site in question is just a dinky little hometown website I threw together. It's not like it is my job or anything...LOL :D :D

Thanks again and I'm sure I'll be back with more questions after I get a little of the basics. :)

[Steven.Bentley]

Buzz, it's two single quotes, I've found from painful experience that it's easier to leave that window title parameter blank, if you put a space in it then for some reason the window.open stops working but doesn't throw any errors to give you a clue :rolleyes:

Maxx, I'm blaming FrontPage here :D

[maxximilian]

Steven,

You are probably right. :D

I'm a fan of WYSIWYG editors, but I have heard that hand-editing their documents can get pretty ugly. Something about the things inserting tags where they should't. I understand that alot of experienced webmasters wouldn't touch a WYSIWIG with a ten-foot pole, but I have had pretty good luck with them since my pages are pretty simple. However, I can see where I might be starting to run into the limitations of FPE and may have to either learn the languages or learn how to use my Dreamweaver 4. Don't know which is harder...LOL :D

[Buzz]

Okay I guess I did confuse things. Sorry. I'll stay out of it. :)

[Steven.Bentley]

The WYSIWYGs do have their place, FPE is pretty lowest common denominator, there are a lot of limitations to the functionality it has.

You're right about the code they make in many cases, more painful experience there LOL

DreamWeaver is definitely much better than any version of Frontpage :)