SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic height & width of images

    We are loading images to a page using by calling a link. Unfortunately, we do not know the width and height of the thumbnails we are loading. This really would not be a problem if all of these were landscape style but they are a mixed bag. Is there some way to determine the height and width of these so we could then handle them appropiately?

    Thanks for reading and thanks for any help.

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you post your code?

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go. This is in the middle of a for loop:

    var image = "http://whc.unesco.org/uploads/sites/site_" + rowNodes[a].getAttribute("id") + ".jpg";

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var image = new Image();
    image.src = "http://whc.unesco.org/uploads/sites/site_" + rowNodes[a].getAttribute("id") + ".jpg";

    you can get the width will be image.width, and height at image.height

  5. #5
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What gimbles said is correct, but only after the image has loaded. Trying to access the width and height immediately will not return correct results.
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You can easily use one of many addEvent functions that are around to help you out with this, so that you can call a function when the image has finished loading.

    The scripted attaching of an event is tricky because of browser differences. Here is one of the more common ways of dealing with such issues.

    Code JavaScript:
    var Event = {
        add: function () {
            if (window.addEventListener) {
                return function (el, type, fn) {
                    el.addEventListener(type, fn, false);
                };
            } else if (window.attachEvent) {
                return function (el, type, fn) {
                    var f = function () {
                        fn.call(el, window.event);
                    };
                    el.attachEvent('on' + type, f);
                };
            }
        }()
    };

    Thanks to the above helper function, it's now easy to attach an event to an object.

    Code JavaScript:
    Event.add(image, 'load', processImage());
     
    processImage() {
        if (this.width > this.height) {
            // landscape
        } else {
            // portrait
        }
    }

    You may find useful a recent post where I was helping someone else with discovering the size of an image too.

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much. I was able to use part of your solution and it worked great.


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
  •