PDA

View Full Version : pop up window for detail images



lms2394
07-09-2005, 01:52 PM
Hi,

I have a website I am working on and the client requested pop up windows to show the detail images when clicking on thumbnails. Here is the criteria:

- detail images are different sizes
- I don't want to have a separate .htm file for each detail image
- I want the title bar to display a name I give it, rather than the name of the image
- Each image will have it's own unique caption within the pop up window
- I need a button on the bottom of the window to close
- There are currently 40 thumbnail images, however this number is expected to increase over time which is why I don't want to have separate pages for each detail image

I am not really sure how to go about doing this. I am looking forward to receiving help with this mission :)

thanks in advance for any and all help

Lisa

jscheuer1
07-09-2005, 05:14 PM
I already had something close to that and have, just now been fiddling with it to see if it can match your specifications. Probably but for one thing - 'security' concerns have prompted all the major browsers to disallow a pop up window that doesn't show an address bar, unless the base address is shown in the title bar, If you don't mind an address bar, that's no problem. Even without an address bar, it will show the title, but after the base address. Out of curiosity, why a button on the bottom (I've already made one) to close? All windows have a button at the top to close. Anyways, for pure esthetics, you might prefer:

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

It can probably be tweaked to your requirements but, is not a true window and, as such, will be limited in certain applications, particularly when launched from inside a frame. Even on a full window page, its pop ups cannot leave the window's borders.

Here's a demo of what I've been working on, using fairly small images which point up some of its limitations, especially in IE. In FF or NS it is better behaved. The caption would be easy to add:

http://home.comcast.net/~jscheuer1/side/opener4.htm

lms2394
07-09-2005, 07:18 PM
thanks so much for your reply :)

At this point, I wouldn't mind an address bar. I just like the button in the bottom of the new window because the way it looks. Personally, I think it looks cleaner - just my opinion :)

I do like the dynamic index 4, and will probably play around with it to see if it would be something that could work for the site I am working on. It is a cool concept - thanks for the link. For some strange reason, my mind is set on the open new window thing. Probably because I am the type of person that knows there is a solution in how to do what I want. It may take me hours of beating my head against the wall - but that would be the "geek" mentality I have.

I tried to view the demo you were working on, but the links on your demo page didn't do anything - could be because I am on a mac and using safari.

thanks again!!!! Back to playing with code.

Lisa

bubba.daniel
07-09-2005, 09:19 PM
Yes, John, that is a very good point, and you are correct lms2394.

Your images are not showing up John. I'm disappointed in you. *scold*

jscheuer1
07-10-2005, 01:10 AM
Even though home.comcast.net is a part of my broadband service, they don't provide much bandwidth for the personal pages, especially at 'peak' times on the East Coast of the US, which it has been since I posted the demo and now. In addition, I have no Mac to test on. If you are using IE6 or FF the demo should be fine. On a 'real' site the images will load much faster, even where they are, they will load eventually, if you are patient (for FF, I think it will need a preload function to avoid a pop-up warning on large images, as is, you can just refuse the pop-up and try again, by then the image will be cached). Also, that demo was something I slapped together from files I had lying around, it probably can be tightened up quite a bit. I'd be happy to work with a Mac user to find a way to get it to work on Safari, I've done that before.

lms2394
07-10-2005, 11:59 AM
I am going to try it on my pc, and I will also see if it works on other mac browsers. Will let you know :)

In the meantime, must have coffee

Lisa

lms2394
07-10-2005, 12:21 PM
Ok, I had coffee and feel better :)

John, your script seems to work in NS 7.2 on mac - although, it opens up a large window and then resizes to a smaller window to accommodate the size of your image. Not sure if that is how it is supposed to work.

Doesn't work on IE 5.2 for mac

It is more along the lines of something I am looking for. I am wondering if there is perhaps a way to write some javascript code and have an xml file define all the larger images. I am sure I am grasping at straws with the xml thing. For me the harder it is to find a solution, the more drive I have to get one.

Lisa

jscheuer1
07-10-2005, 12:48 PM
Well, I originally designed this scheme on the supposition that I couldn't be bothered writing tons of code for images. I wanted the browser to do as much work as possible. If we took a different tack and fed the script the images dimensions from the git go, things would be much smoother. Currently it is set to detect the images size. In IE6 this happens the moment you mention an image. In other browsers, they like to cache the image first. That is why in NS7 the window resizes after the image loads. FF's default security won't allow that, nor will it report to us the image' dimensions ahead of time, like IE6, hence, the idea of a preload for FF. Once preloaded, any image capable browser can report an images dimensions. If we have the dimensions ahead of time though, all we need to do is calculate the chrome for our anticipated window (including in this case the caption and button thing), add it all up and we can know ahead of time the window size. I'm off for a bit, get back to you later.

jscheuer1
07-11-2005, 07:04 AM
OK, I've upgraded the demo, it is still located at the same Link (http://home.comcast.net/~jscheuer1/side/opener4.htm)

jscheuer1
07-13-2005, 03:10 PM
OK, I've gotten fed up with the bandwidth at my ISP's free personal web pages and have put the demo Here (http://johsch7.farvista.net/opener6.htm). It is an ad supported site but at least it loads fairly fast.

lms2394
07-13-2005, 05:39 PM
thanks so much John!! Question, how do I get it to open in a new window? It is opening in the same window using mac and safari. Or is this just another one of those safari quirks?

The person I am doing a website for has a thumbnail page that showcases his architectural projects. When you click on the thumbnails, it brings you to a detail page. He wants the detail page images, which are approx. 400px wide, to be even larger in a new window. I kind of think his idea is overkill and unnecessary - what is your opinion? His website is http://www.degnandesign.com

thanks so much :)

Lisa

jscheuer1
07-13-2005, 07:31 PM
Hmmm, I wouldn't say a Safari quirk but, opening in the same window is the fall back for browsers without javascript enabled. Is Safari giving any kind of error? Are you sure you had javascript enabled when you viewed the page? As I said before, I am open to determining how to get this thing working in Safari, especially as the reason I first started tinkering with it is to use it on a site I master. With Safari, try out this page:

Jazz Gallery (http://www.mediajazzbynight.com/2004/gallery.htm)

If it isn't a total mess to begin with, scroll down and click on the pictures and see if you get pop up windows with that.

As for your architect's site. His large images should be optimized, they are of too large a size, file size, as in too many bytes. His thumbnails' dimensions are a bit big as well. I could see his site working with the thumbnails about three quarter the size they are now, the pages they open to containing images about the size of the current thumbnails down the left side of the page, then if you hover one of those images using something like:

Image Thumbnail Two (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm)

for a larger image. A nice twist to this script is to have one of the images already loaded in the viewing area when the page opens.

lms2394
07-13-2005, 07:52 PM
thanks for your reply- I like both ideas on the links in your reply. I especially like the image thumbnail two link!! AWESOME!

As far as the architect's site, I did optimize the large images, but perhaps need to optimize a bit more. I used photoshop to do it and going down in byte size seemed to lose quality - but, I will try again with lower settings and see what happens. As far as the dimensions of the images, I originally had them all smaller - but he wanted them this size. So, I had to redo all the pics and we compromised on these dimensions.

My thought is since he has rather large dimensions on the detail images, why bother with a new window for an even larger size? What will he gain other than lots of wasted space on his hosting server and customers who don't want to wait for the images in the new window to download - just my opinion.

I am going to look into optimizing them even more - thanks for the suggestion!

Lisa :)

jscheuer1
07-13-2005, 09:05 PM
Ya, hmm - the Jazz site worked OK in Safari, good. That's my work, I've never had anyone test it in Safari. Image optimization is such a hassle due to the very fact you mentioned, quality loss. I've used xat.com's image optimizer. It has a 'magic' compression feature that helps with that quality loss problem and even allows you to save your jpg images using regions of varying quality or, using png or gif format, regions of varying dither. This allows you to keep clarity on essential details while allowing backgrounds and other nearly monotone areas to be rendered at low resolution.

It can be tough to convince a client, or anyone really, that the web is not for huge images. Most folks see it like TV, which it isn't, yet. Try getting him to view his site using a dial-up connection.