Attn Code Geeks: Need Help With Popup Javascript (1 Viewer)

[Michael Martin]

Hey all.

I recently purchased a domain name and am in the process of building the site. Part of the purpose of the site is to display pictures so relatives and friends around the globe can see the kids.

Here is what I want to do:

Have a series of thumbnails of images (scanned photos)that act as links to popups of the full-sized image. Sort of like this:

[thumbnail1] [thumbnail2] [thumbnail3]

The viewer would be able to click on the actual images and a popup would appear with the full picture.

My problem is that I have found plenty of code online that gives the script for a single popup, but not for multiple popup links on the same page.

Can anyone help?

 

[Mike D.]

I just typed this up, with < 1 cup of coffee, but this might work. It could probably be done more efficiently, but I'm not a true JScript "guru"...
Have fun,
Mike
HTML:

picture1_thumb.jpg
picture2_thumb.jpg

javascript:
function openWin (picNumber) {
if (picNumber == 1) {
URL = "bigpics/picture1.jpg";
}
else if (picNumber == 2) {
URL = "bigpics/picture1.jpg";
}
// etc...
awindow=window.open(URL, "thewindow","height=400,width=200,left=100,top=100,toolbar=no,s crollbars=no,menubar=no");
}

 

[Michael Martin]

Mike:

Part of my challenge is that the pictures are not all the same size (when viewed full size). How can I write javascript so that the popup window is the correct size?

And honestly, I feel stupid saying this, but I am not sure what to do with the code you gave me.

The HTML part goes in the body, yes? and the other part goes in the Head, with the javascript tag around it?

I have a hard time just figuring out where stuff goes with HTML and javascript when I don't see it "in place" on a page of sourcecode.

 

[Michael Martin]

Mike:
Here is the page as it stands now.
See how the popups are all the same size, but need to be different for each full-sized image?
I know this can be done, it's simply escaping me at the moment.

 

[Kevin P]

Do something like this:

< a href="javascriptpenPopup("pic1.jpg", 400, 200)" > 
< img src="pic1thumbnail.jpg" ... > < /a >
< br >
< a href="javascriptpenPopup("pic2.jpg", 500, 300)" >
< img src="pic2thumbnail.jpg" ... > < /a >
...
javascript[b][/b]:
function openPopup(picName, height, width) { 
awindow=window.open(picName, "thewindow", "height=" +
height + ",width=" + width +
",left=100,top=100,toolbar=no,scrollbars=no,menubar  =no"); 
}

In the above example, the first picture displays in a popup of 400 x 200. The second picture displays in a popup of 500 x 300. If you like, you could add left and top as parameters to the function and pass those as well.
For some reason vBulletin is changing "Javascript" to "java script" in the above code examples.
KJP

 

[Michael Martin]

Kevin:

I tried that code, making sure I fixed "java script" to "javascript," but nothing popped up at all -- nothing!

There was a tiny little "error" icon in the bottom left of my IE browser window when trying it.

Any ideas?

I checked and double checked the script, and had a friend (who knows more about HTML and related issues than me) double check it, but we could not figure out what the problem was.

There is a link in my post above to the page as it is now. Any ideas?

 

[Jared_B]

Michael,
Check out my website in my sig. I have several different examples of what you're looking for. It might give you a few ideas. The functions aren't the most efficient, but they work. If you're still having trouble, email me your code (since vBulletin isn't showing it correctly) and I'll take a look. [email protected]

 

[Michael Martin]

Jared, I've emailed you the page.

I looked at your page and I want something similar, yes. The biggest challenge seems to be that the full size images are different sizes, instead of all being the same shape/size.

 

[Michael Martin]

Mike, Kevin, and Jared --
Thanks for the help and replies. Between your answers and friend's email, I have been able to figure out what problem was.
The original javascript I was using simply needed to be revised to allow for dynamic height and width values, and those values had to be put in the HTML.
The page is posted with the "fixed" javascript.
Again, thanks to all for your help and ideas.

 

[John Miles]

Don't use popups, Michael. Those of us who run Popup Stopper to kill unwanted ads may never see the content on your site. (You can ctrl-click to allow the window to open normally, but I usually find myself forgetting this handy tip and leaving the site when the links don't seem to work).

Find another way to display the links, if at all possible.

 

[Michael Martin]

John, these are not links for other Web sites or pages. The popups are for pictures of my family and such. I doubt very much anyone else besides family and friends will care, and none of them employ popup stoppers.

I decided to do popups because it seemed easier than having to load a page every time you wanted to look at a photo, and then having to go back or forward. Using the popups, family and friends can look at the full-sized image, close it, and choose the next photo to look at without having to reload a page or go to the next page.

 

[Mike D.]

Well, I didn't get a chance to check in since this morning, but I see you've gotten it worked out. Another successful HTF thread!

 

[Jared_B]

I'm using a lot of pop-up windows on my site now because they are easy to work with, and they keep clutter down. Once I'm finished with my ASP class, I'll be going through another site re-design using server-side scripts.
Pop-up killers are only for people who surf porn all day, anyway...

 

[Greg_Y]

Just for future reference, there are applications that build HTML albums out of image files. No need to use popups because when you click on an image, it loads a new webpage with only that photo showing. These apps automatically generate the HTML to do this. Best of all, they should be able to create thumbnails of the images so you don't have to. You just point the app at a directory of image files and it does the rest, then you upload all of the files to your web server.

Of course, that's not as much fun as coding, but if you have ALOT of image files and not enough time to write the code, these kinds of apps present a good solution.