SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Rocko's Avatar
    Join Date
    Dec 2000
    Location
    Louisiana
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image-sized popup

    Hi peeps!

    I want to be able to do this:

    Have some thumbnails that when clicked, pops up the full-sized image.

    The thing is this: Each image will be a different size.
    I want the pop-up window to have the dimension of each full size image with no padding, etc...
    So what's the best solution to this in javascript?

    Thanks.

    // -->rocko
    "If it's taking up my time, then it must be good!" -Rocko

  2. #2
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <script>
    function imageClicked(img) {
     height = img.height;
      width = img.width;
      src = img.src;
    window.open(src,"img_window","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width="+width+",height="+height)
    }
    </script>
    
    <img src="image.gif" onClick="imageClicked(this)">
    <img src="anotherimage.gif" onClick="imageClicked(this)">
    That function should open a new window containing the image set to the width and height of the image. You may need to tweak it a bit but the basic concept is there.

  3. #3
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this will not work properly, as it will get the image size of the minimised image, so

    what you should do is preload the larger images as well and for each one use the script above to store the values in a array
    http://www.webmasterbase.com/article/625/72

    i did have something similar, but i wont be able to find it right now.

    basically you can do some validation if the image exists or fails via

    if (img.width <= 200 || img.height <= 100 || img.complete() != true)
    {
    //.. do this popup instead
    }

  4. #4
    SitePoint Zealot Rocko's Avatar
    Join Date
    Dec 2000
    Location
    Louisiana
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Still....

    Thanks for the reply.

    ALl that did was popup the thumbnail itself

    The full-size image is has to be different than the thumbnail

    Thanks again, sorry for the mess-up.

    // -->rocko
    "If it's taking up my time, then it must be good!" -Rocko

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    function imageClicked(img) {
     
    height img.height;
     
    width  img.width;
     if (
    height == undefined || width == undefinedalert('no value');
     
    tools  'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=' width ',height='+height;
    window.open(img,'img_window',tools)

    reason it wont get the width is because its a null value as img.height does nothing more or less.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •