1. Sign-up to become a member, and most of the ads you see will disappear. It only takes 30 seconds to sign up, so join the discussion today!
    Dismiss Notice

Attn Code Geeks: Need Help With Popup Javascript

Discussion in 'Archived Threads 2001-2004' started by Michael Martin, Apr 30, 2002.

  1. Message #1 of 14 Apr 30, 2002
    Michael Martin

    Michael Martin Screenwriter

    Joined:
    Nov 26, 2000
    Messages:
    1,129
    Likes Received:
    0
    Trophy Points:
    0
    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?
     
  2. Message #2 of 14 Apr 30, 2002
    Mike D.

    Mike D. Stunt Coordinator

    Joined:
    Apr 8, 1999
    Messages:
    97
    Likes Received:
    0
    Trophy Points:
    0
    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");
    }
     
  3. Message #3 of 14 Apr 30, 2002
    Michael Martin

    Michael Martin Screenwriter

    Joined:
    Nov 26, 2000
    Messages:
    1,129
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  4. Message #4 of 14 Apr 30, 2002
    Michael Martin

    Michael Martin Screenwriter

    Joined:
    Nov 26, 2000
    Messages:
    1,129
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  5. Message #5 of 14 Apr 30, 2002
    Kevin P

    Kevin P Screenwriter

    Joined:
    Jan 18, 1999
    Messages:
    1,439
    Likes Received:
    0
    Trophy Points:
    0
    Do something like this:
    Code:
    < a href="javascript[img]http://static.hometheaterforum.com/imgrepo/2/29/htf_images_smilies_redface.gif[/img]penPopup("pic1.jpg", 400, 200)" > 
< img src="pic1thumbnail.jpg" ... > < /a >
< br >
< a href="javascript[img]http://static.hometheaterforum.com/imgrepo/2/29/htf_images_smilies_redface.gif[/img]penPopup("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
     
  6. Message #6 of 14 Apr 30, 2002
    Michael Martin

    Michael Martin Screenwriter

    Joined:
    Nov 26, 2000
    Messages:
    1,129
    Likes Received:
    0
    Trophy Points:
    0
    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?
     
  7. Message #7 of 14 Apr 30, 2002
    Jared_B

    Jared_B Supporting Actor

    Joined:
    May 7, 2001
    Messages:
    580
    Likes Received:
    0
    Trophy Points:
    0
    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]
     
  8. Message #8 of 14 Apr 30, 2002
    Michael Martin

    Michael Martin Screenwriter

    Joined:
    Nov 26, 2000
    Messages:
    1,129
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  9. Message #9 of 14 Apr 30, 2002
    Michael Martin

    Michael Martin Screenwriter

    Joined:
    Nov 26, 2000
    Messages:
    1,129
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  10. Message #10 of 14 Apr 30, 2002
    John Miles

    John Miles Stunt Coordinator

    Joined:
    Jan 16, 2000
    Messages:
    236
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  11. Message #11 of 14 Apr 30, 2002
    Michael Martin

    Michael Martin Screenwriter

    Joined:
    Nov 26, 2000
    Messages:
    1,129
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  12. Message #12 of 14 Apr 30, 2002
    Mike D.

    Mike D. Stunt Coordinator

    Joined:
    Apr 8, 1999
    Messages:
    97
    Likes Received:
    0
    Trophy Points:
    0
    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! :)
     
  13. Message #13 of 14 Apr 30, 2002
    Jared_B

    Jared_B Supporting Actor

    Joined:
    May 7, 2001
    Messages:
    580
    Likes Received:
    0
    Trophy Points:
    0
    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...
    [​IMG]
     
  14. Message #14 of 14 Apr 30, 2002
    Greg_Y

    Greg_Y Screenwriter

    Joined:
    Mar 7, 1999
    Messages:
    1,466
    Likes Received:
    0
    Trophy Points:
    0
    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.
     

Share This Page