SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry javascript - huh?

    http://www.tonibanks.com/jkelly/test.htm

    I'm trying to get these pictures to open a new browser window (when clicked) with a larger image displayed (browser window sized for picture - but I'm inputting that size manually). I want to make this a template to save some work on layout and future changes (unless someone has a better suggestion)

    Problems:

    1. how do I disable the border (the pics are a link) or underline, I guess would be more appropriate on the the pics. ICK!

    2. I can't seem to get the javascript function to work. It's opening a page, but not correctly and not with the larger image.

    I'm cutting and pasting here - don't know too much javascript. I've gotten this to work on another page (with a text link), but for some reason it's not working here. Ideally, I'd like to have it resize the new window to each picture but I can't figure that one out (I looked at an article http://www.sitepoint.com/article/1022 about it but was pretty lost when I tried to emulate it :P)

    thanks for any help

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  2. #2
    SitePoint Wizard silver trophy Crazybanana's Avatar
    Join Date
    Mar 2003
    Location
    In tha fruit cellar
    Posts
    1,379
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    hers the script for the resize window..
    the ones ower the </head> goes into the <head> tag..

    <SCRIPT language=Javascript>
    function PopupPic(sPicURL) {
    window.open("popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
    }
    </SCRIPT>
    </HEAD>
    <BODY >
    <p><a href="javascript:PopupPic('Image1.gif')"><img src="yourpic.jpg" width="108" height="72" ></a><BR>
    <a href="javascript:PopupPic('Image2.gif')"><img src="yourpic2.jpg" width="108" height="72" ></a><BR>
    <a href="javascript:PopupPic('Image3.gif')"><img src="yourpic3.jpg" width="108" height="72" ></a><BR>
    </p>

    and hers the script for popup.htm where the images will show in:

    <script language='javascript'>
    var temp=self.location.href.split("?");
    var picUrl = (temp.length>1)?temp[1]:"";
    var NS = (navigator.appName=="Netscape")?true:false;
    function fitPic() {
    iWidth = (NS)?window.innerWidth:document.body.clientWidth;
    iHeight = (NS)?window.innerHeight:document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight-1);
    self.focus();
    };
    </script>

    and put this in the <body> of popup.htm
    <script language='javascript'>
    document.write( "<img src="" +picUrl +"" border=0>" );
    </script>

    and also put this inside <body> like <body onload='fitPic();'>

    and to take away the border around the pic try: border="0"

    hope this helps
    Who's to doom when the judge himself is dragged before the bar


  3. #3
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok - I got this to work - thanks Crazybanana. I didn't realize I was supposed to replace 'image1.gif' with the location of the FULL sized image.

    Now I have another question - what can I add to the script to make each window close automatically - like when they click on another image - so they don't have a bunch of windows open all over the place. Or is this not recommended...in case they DO want to be able to open several images?

    Please be specific - as I mentioned, my facility with javascript is limited.


    Thanks!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  4. #4
    SitePoint Wizard silver trophy Crazybanana's Avatar
    Join Date
    Mar 2003
    Location
    In tha fruit cellar
    Posts
    1,379
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    the window have to be closed from popup page, you cant close it from the image gallery.. just add a link with this attribute at the bottom of page:
    <a href="javascript:window.close()">[
    Close window ]</a>
    without the space between java and script (vb messing up code)
    yeah, i almost forgot.. if you do so then the window has to be a lill bigger than your biggest pic..

    hope this helps.
    Who's to doom when the judge himself is dragged before the bar


  5. #5
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does this make the window close automatically?

    Quote Originally Posted by Crazybanana
    if you do so then the window has to be a lill bigger than your biggest pic
    do you mean in the script head where it says resize=1, width=200 height=200? this should be bigger than my biggest pic?

    thanks
    Last edited by TBanks; Jul 12, 2003 at 09:22.
    dare to Dream, dare to Be...
    www.eodweb.com

  6. #6
    SitePoint Wizard silver trophy Crazybanana's Avatar
    Join Date
    Mar 2003
    Location
    In tha fruit cellar
    Posts
    1,379
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    well no.. its a javascriptlink, the visitor has to click it to close the window.
    the 200x200 is the max size of the opened window, this can be altered if needed. but i dunno if this script allows text in it or if it only can contain images. has to be tested to know
    Who's to doom when the judge himself is dragged before the bar



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •