SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: pop up windows

Hybrid View

  1. #1
    SitePoint Enthusiast rutters's Avatar
    Join Date
    Nov 2002
    Location
    ct
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pop up windows

    Hey all,

    I have a quick question about pop up windows.

    So say I want to make up a pop up window, that opens a larger image of the one that is clicked one.

    At the moment, in my function code in the header tags I have to put in the dimensions of the window size. But thats a real pain in the butt when you have to change 12 window sizes, with different sized larger windows...

    Is there a different way to do this, so the window automatically adjusts to the size of the image???

    please help.

    Jake

  2. #2
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe something like this?
    ---
    <Script language="JavaScript">
    function openAndResize(imgW, imgH, imgName, ext)
    {
    var child_window = window.open(imgName+ext);
    child_window.resizeTo(imgW,imgH);
    }
    </script>

    <img src="img1.gif" OnClick="openAndResize(250,200,'img1Larger','gif');">

    As you can see, the openAndResize() function will work for every window you open...but when you call it, you need to specify a) the width of the larger image, b) the height of it, c) it's file name, and d) it's image file extension (such as .gif, .jpg, etc).

    I didn't test the above code, but it should open a window and resize it to the width/height you put and it should display the image img1Larger.gif in the pop up.

    BTW, if you want to find out how many pixels each of your large images is, just right-click on each one and go to its properties...it should display what width/height of each large image is in pixels.

  3. #3
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is another way you could do it:
    <html>
    <head>
    <title>Image Pop Up Viewer</title>
    <script language="JavaScript">
    image0=new Image() // preload images large images
    image0.src="large0.gif"
    image1=new Image()
    image1.src="large1.gif"
    image2=new Image()
    image2.src="large2.gif"
    image3=new Image() // preload thumb nail images of large images
    image3.src="thumb0.gif"
    image4=new Image()
    image4.src="thumb1.gif"
    image5=new Image()
    image5.src="thumb2.gif"
    var ImgWin=" "
    function imgwin(Imgn) // get width of large image that was pre loaded above
    {
    w=eval(Imgn+".width")
    if(w<100)
    {w=100}
    h=eval(Imgn+".height") // get height of large image that was pre loaded above
    if(h<100) // cannot open window less than 100 by 100 pixels
    {h=100}
    h=h+25
    picgif=eval(Imgn+".src") // build image source
    if(ImgWin.open) // if the window is open close it
    {ImgWin.close()}
    /*Create window and display large image of thumbnail.
    If you want to change the position of the window when it pops up change the values for the top and left
    properties below in the variable WinProps. The values in top and left are number of pixels from the top
    and left of the edge of the screen.
    */
    WinProps="width="+w+",height="+h+",location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resize=no,top=0,left=0"
    ImgWin=window.open("","winimg",config=WinProps);
    ImgWin.document.write("<html>")
    ImgWin.document.write("<head><title>Display Image</title></head>")
    ImgWin.document.write("<body marginheight='0' marginwidth='0' leftmargin='0' topmargin='0' bgcolor='lightyellow'>")
    ImgWin.document.write("<center><img src="+picgif+" border='0' hspace=0 vspace=0><br>")
    ImgWin.document.write("<font size=-1><a href="#" onClick='self.close()'>Close Me</a></font></center>")
    ImgWin.document.write("</body>")
    ImgWin.document.write("</html>")
    ImgWin.document.close()
    ImgWin.focus()
    }
    </script>
    </head>
    <body>
    <center>
    <script>
    /*
    If you add more thumbnail images make sure that you include the thumbnail and larger image in the
    preload sections above. In the onClick event for the added images make sure you change the value
    being passed to match the image name of the large image that matches the thumbnail image. Both
    of these must be setup in the image preload sections above.
    */
    </script>
    <br><br><br>
    <a href="#" onClick="imgwin('image0');return false;"><img src="thumb0.gif" name="img0" border="0"></a>
    <br>
    <a href="#" onClick="imgwin('image1');return false"><img src="thumb1.gif" name="img1" border="0"></a>
    <br>
    <a href="#" onClick="imgwin('image2');return false"><img src="thumb2.gif" name="img2" border="0"></a>
    </center>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, nice script requestcode...preloading the images...good idea.


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
  •