www.webdeveloper.com
Results 1 to 7 of 7

Thread: javascript controlling images

  1. #1
    Join Date
    Nov 2002
    Posts
    411

    javascript controlling images

    I've tried this in the graphics forum without much luck, so thought I'd throw it to the java monkies to see what can be done (no offence intended!):

    I'm using a java script image gallery thing that scrolls through some images on my page. Nice and simple, works well, and I'm not too bothered about the non javascript views who cant see it since it's hardly a matter of life and death, and if they dont want to use the bloomin' technlology that someones taken the time to invent then that's up to them.

    ahem

    anyway, the problem is that as it scrolls through the images, I would love it if I had some way of checking what width the image that's about to be displayed is. Then, if it saw that the image was over 360, for example, it set the width of the image to 360 so that it got scaled down. i dont want to have to tell it the dimensions of every image using the width/height commands, and nor do i want EVERY image to display at 360 width - if it's slimmer than that then I'm quite happy for it to stay that way. It's just for the ones that are bigger than 360 that will mess up my tables, they're the ones that I want scaled down so that they fit.

    Am I being far too optimistic with this, would I need an applet, or is it just not possible at all?

    help me java-script guru's, you're my only hope...
    John

  2. #2
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    It's do-able, but without seeing your code I can't really help much. But what I would do, instead of checking the images as it is coming into focus, is just loop through them all at the start, and check/set their size then.
    Last edited by Rick Bull; 11-26-2002 at 06:47 AM.

  3. #3
    Join Date
    Nov 2002
    Posts
    411
    The java I'm using preloads the images so that it can scroll through them when the user clicks on the "next image" button. Is there code that i can put into an if cycle along the lines of;
    If image.width>360 then
    image.width=360
    else
    image.width=image.width

    or something like that?
    John

  4. #4
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    Something like this should work:

    Code:
    if (image.width>360)
      image.width=360;
    (you don't need the else bit though, as it's not changing any values). Again if you need more specific code you'll have to provide the HTML/JavaScript you already have.

  5. #5
    Join Date
    Nov 2002
    Posts
    411
    Ah so I wasn't too far off then! Where would I put that into my code? I cant put it in with the img handles since the dimensions for each image are different. And can I use image.width even though I havent defined it as a variable? Is it just recognised by java? Do I put it in with each images entry in the preloading list? And actually surely I cant use
    a '>' sign since the HTML will think that I'm trying to put some markup in?
    Last edited by jpmoriarty; 11-26-2002 at 09:01 AM.
    John

  6. #6
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    That's a lot of questions You should be able to use image.width even if you haven't set the attribuets according to DOM 2 at least. You can use >, according to the HTML 4.01 specs, you can use > (as long as you have comments around the <script> elements) but not </, you need to escape them, e.g.

    Code:
    <script type="text/javascript"><!--
      document.write('<p>Blah<\/p>')
    //--></script>
    And as for referring to the images there are several ways to do it. Probably the way I would do it would be to give all your img tags an ID, starting with a string like "thumb_", then loop through all images on the page, if they have that at the start then set the width. I'll try to put together a script for you.

  7. #7
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    OK, try something like this:

    Code:
    <script type="text/javascript"><!--
      function setImageSize() {
        //"Constansts"
        var thumbPrefix = "thumb_"; //What's before thumbnail's IDs
        var maxWidth = 360, maxHeight = 360; //Max size of thumbnails
        //If we can access the images
        if (document.images) {
          //Loop for all images
          for (var loopCounter = 0; loopCounter < document.images.length; loopCounter++) {
            //If this one starts with thumbPrefix
            if (document.images[loopCounter].id.substring(0, thumbPrefix.length) == thumbPrefix) {
              //If this one is too wide, shrink it
              if (document.images[loopCounter].width > maxWidth)
                document.images[loopCounter].width = maxWidth;
              //Same for height
              if (document.images[loopCounter].height > maxHeight)
                document.images[loopCounter].height = maxHeight;
            }
          }
        }
      }
    //--></script>
    </head>  
    
    <body onload="setImageSize();">
      <p>
        <img id="thumb_1" src="thumb_one.png" alt="" />
        <img id="thumb_2" src="thumb_2.png" alt="" />
        <img id="thumb_3" src="thumb_3.png" alt="" />
        <img id="thumb_4" src="thumb_four.png" alt="" />
      </p>
    You will have to set an (invidual) ID on each image starting with "thumb_". You can also change it to check the src attribute, just that I had that before, but the full filename gets returned, so it doesn't work, but it maybe OK online.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles