Display of the image from JavaScript

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • krzysztof.murkowski@gmail.com
    #1

    Display of the image from JavaScript

    Hi,

    I have problem with JavaScript for gallery of images.
    From the overview page with thumbnails, after a click on the small
    picture,
    the subpage 'slide_show.htm l' is called, with a number of picture as
    parameter
    for example: <a href=slide_show .html?nb=2>
    (The code is at the end of this post)

    The page 'slide_show.htm l' should display the appropriate picture
    and give the possibility to navigate previous/next.

    Result: some browsers don't display the first picture. It looks like a
    browser
    finished to display the picture before it resolved its name.
    Some browsers show the first picture ok.
    The navigation previous/next works always ok.

    What is wrong? I tried to move the code inside the page but it didn't
    help.
    With the help of document.write I can see, that the parsing of
    parameter
    and finding the name of the picture was ok, but it wasn't displayd.

    Do you have any ideas?

    Best regards,
    K.

    <HTML>

    <HEAD>

    <SCRIPT LANGUAGE="JavaS cript">

    NewImg = new Array (
    "P0000284.j pg",
    "P0000286.j pg",
    "P0000287.j pg",
    "P0000288.j pg",
    "P0000291.j pg"
    );

    var current = 0;
    var len = NewImg.length - 1;
    var param = location.search ;

    param = param.substr(4, param.length);
    current = eval(param);

    document.write( "location.h ref: ", location.href, "<BR>" );
    document.write( "location.searc h: ", location.search , "<BR>" );
    document.write( "param: ", param, "<BR>" );
    document.write( "current: ", current, "<BR>" );

    function showImg()
    {
    document.slides how.src = NewImg[current];
    }

    function chgImg(directio n)
    {
    if (document.image s)
    {
    current = current + direction;
    if (current len)
    {
    current = 0;
    }
    if (current < 0)
    {
    current = len;
    }
    document.slides how.src = NewImg[current];
    }
    }
    </script>

    </HEAD>

    <BODY>

    <a href="javascrip t:chgImg(-1)">Previous</a>
    <a href="javascrip t:chgImg(1)">Ne xt</a>
    <br><br>
    <img src="javascript :showImg()" name="slideshow ">
    <br><br>
    <a href="javascrip t:chgImg(-1)">Previous</a>
    <a href="javascrip t:chgImg(1)">Ne xt</a>

    </BODY>

    </HTML>
    Tags: None
    • Codaholic
      #2
      Re: Display of the image from JavaScript

      Hello Krzysztof,

      the problem is, that the call of showImg() takes place to early in many
      cases, so some browsers get confused about establishing the image object and
      dynamically creating its source. To solve this, use first a placeholder
      image (e. g. a transparent GIF called space.gif) and second put the
      showImg() call into the onload event handler of the body tag.

      So your body tag then looks like
      <BODY onload="showImg ()">
      and your image tag looks like
      <img src="space.gif" name="slideshow ">

      This guarantees that the javascript function gets called AFTER the image tag
      object has been loaded.
      Instead of using such a placeholder image you can also place the right first
      image, of course, which you generate dynamically. For example:
      <SCRIPT LANGUAGE="JavaS cript">
      document.write( '<img src="' + NewImg[current] + '" name="slideshow ">');
      </script>
      It depends on you, which image tag you prefer.

      I hope that helps you.

      Nice greetings from
      Codaholic


        Comment

        • SAM
          #3
          Re: Display of the image from JavaScript

          Le 11/14/08 3:43 PM, krzysztof.murko wski@gmail.com a écrit :
          Hi,
          >
          I have problem with JavaScript for gallery of images.
          From the overview page with thumbnails, after a click on the small
          picture,
          the subpage 'slide_show.htm l' is called, with a number of picture as
          parameter
          for example: <a href=slide_show .html?nb=2>
          (The code is at the end of this post)
          >
          The page 'slide_show.htm l' should display the appropriate picture
          and give the possibility to navigate previous/next.
          >
          Result: some browsers don't display the first picture. It looks like a
          browser
          finished to display the picture before it resolved its name.
          Some browsers show the first picture ok.
          The navigation previous/next works always ok.
          >
          What is wrong?
          that :
          <img src="javascript :showImg()" name="slideshow ">
          can't work


          <html>
          <head>
          <title>My Gallery</title>
          <script type="text/javascript">

          NewImg = [
          "P0000284.j pg",
          "P0000286.j pg",
          "P0000287.j pg",
          "P0000288.j pg",
          "P0000291.j pg"
          ];

          var current = 0;
          if(self.locatio n.search.length >1)
          current = self.location.t oString().split ('=')[1]*1;
          var len = NewImg.length;

          function showImg()
          {
          if (document.image s)
          document.slides how.src = NewImg[current];
          document.getEle mentById('comme nt').innerHTML = NewImg[current];
          window.status = 'View #'+(current+1); return true;
          }

          function chgImg(directio n)
          {
          if(typeof direction == 'undefined') direction=0;
          current = current + direction;
          current = current>=len? 0 :
          current<0? len :
          current;
          showImg();
          }

          window.onload = function() { chgImg(); };
          </script>

          </head>
          <body style="text-align:center">
          <p>
          <button onclick="chgImg (-1);">Previous</button>
          <button onclick="chgImg (1);">Next</button>
          <br><br>
          <img src="" name="slideshow " alt="viewer"><b r>
          <span id="comment">le gend</span><br>
          <a href="javascrip t:chgImg(-1)">Previous</a>
          <a href="javascrip t:chgImg(1)">Ne xt</a>
          </p>
          </body>
          </html>

          --
          sm

            Comment

            • krzysztof.murkowski@gmail.com
              #4
              Re: Display of the image from JavaScript

              Hi Codaholic,

              thanks a lot for your tips.

              I've found next possibility:
              <img name="slideshow " src="javascript :showImg()" onError="showIm g()">

              but your seems to be better!

              Regards,
              K.

                Comment

                Previous template Next
                Working...