3 Replies Latest reply on Aug 14, 2006 3:32 PM by JesseLY

    Next Image feature in pop-up window

    JesseLY Level 1
      I would like to create a "next image" feature in a pop-up window, much the way it's done on this page:
      http://www.kovalenkohale.com/folio/institutional_white_hall_08.htm

      It appears that they're simply using some kind of Swap Image script, which I'm familar with. But I can't figure out how to do it with the static "next" button. I'm sure I'm missing something really simple. Suggestions?

      -Jesse
        • 1. Re: Next Image feature in pop-up window
          Crispy_One
          One way is to call a javascript function for the onclick event for a button or link. This function could modify the src property for the image. The pictrures need to be in one directory and be named like pic1.jpg, pic2.jpg, pic3.jpg.

          ex.

          <script language="javascript">
          var imgCurr = 1; // start picture
          var max = 10; // set to be the total number of pictures in the directory
          function chgImg (direction) {
          if (direction == 'next') {
          if (imgCurr < max) {
          imgCurr += 1;
          }
          }
          elseif (direction == 'prev') {
          if (imgCurr > 1) {
          imgCurr -= 1;
          }
          }
          document.imgName.src = "/path/to/src" + imgCurr + ".jpg";
          }
          </script>
          .
          .
          .
          <img src="/path/to/default/src.jpg" name="imgName" alt="" />
          <a href="" onclick="chgImg('prev')">Previous</a>
          <a href="" onclick="chgImg('next')">Next</a>
          .
          .
          .
          One major thing to remember is to name your objects like images when you are going to use them in javascript....

          Hope this helps!
          • 2. Re: Next Image feature in pop-up window
            geowelch06
            Yes, that is certainly the more elegant way to do it, reusing the page HTML and changing just the image. The page you quote, JesseLY, uses a simpler approach. A different page is used for each image, so "next" and "previous" are straightforward HTML links.
            • 3. Re: Next Image feature in pop-up window
              JesseLY Level 1
              Thanks, folks!

              -Jesse