How to link to specific images in a Javascript slideshow

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Jeannie
    #1

    How to link to specific images in a Javascript slideshow

    I have a popup window which is a slideshow of about 7 images. When the
    popup window loads, the first image is present and then the viewer can
    select next or previous to scroll through the rest of the images.

    I'd like to use the same popup window at different points throughout
    the website and have the Virtual Tour (slideshow) open up at the
    appropriate photos. Meaning I'd like to control which picture the
    popup window opens up to, depending on where the user is in the site.

    Does anyone know where I can find code that does this? I am somewhat
    familiar with Javascript but would like to find some ready-made code
    which accomplishes this.

    Thanks for all help and suggestions!!

    --JAG
    Tags: None
    • Reply Via Newsgroup
      #2
      Re: How to link to specific images in a Javascript slideshow

      Jeannie wrote:
      [color=blue]
      > I have a popup window which is a slideshow of about 7 images. When the
      > popup window loads, the first image is present and then the viewer can
      > select next or previous to scroll through the rest of the images.
      >
      > I'd like to use the same popup window at different points throughout
      > the website and have the Virtual Tour (slideshow) open up at the
      > appropriate photos. Meaning I'd like to control which picture the
      > popup window opens up to, depending on where the user is in the site.
      >
      > Does anyone know where I can find code that does this? I am somewhat
      > familiar with Javascript but would like to find some ready-made code
      > which accomplishes this.
      >
      > Thanks for all help and suggestions!!
      >
      > --JAG[/color]

      I don't know about ready made code - however it shouldn't prove to
      difficult to come up with some sort of a solution since you already have
      some javascript skills. There are a couple of things you might already
      know, but you've not connected them...

      First, when you open your popup window with window.open, you give the
      popup window a name... If you use the same window name as a target in
      any of your other pages, it will update the popup window - And if its
      not already open (perhaps the user closed it) then a new one will open.

      The only problem that I could forsee is that you might want a popup that
      is larger then the one opened in an earlier window in which case you
      might have to resize it (which I believe is possible on most recent
      popular browsers but I've never written code for it).

      Does that help you any, or do you still need some code? In my early days
      of learning javascript I used to examine some of the code at
      javascript.inte rnet.com however not all of it is environmentally
      friendly (in such that it may be unclean code, achieveing results that
      could be achieved with less resources using alternative methods).
      Still, its helps me along... maybe you might find what you're looking
      for there.

      randelld

        Comment

        • Jeannie
          #3
          Re: How to link to specific images in a Javascript slideshow

          Thanks - though I wasn't able to quite come up with a solution yet. I
          am putting my code here, maybe that will help. If anyone can make
          suggestions on how to alter it, that would be much appreciated!

          Here's the code for the popup slideshow I have now which currently is
          running.
          *************** *************** *************** **
          <html>
          <head>
          <script language="JavaS cript">
          <!--
          var interval = 30000;
          var random_display = 0;
          var imageDir = "images/";

          var imageNum = 0;
          imageArray = new Array();
          imageArray[imageNum++] = new imageItem(image Dir +
          "im_pop_airplan e.jpg");
          imageArray[imageNum++] = new imageItem(image Dir +
          "im_pop_airplan e.jpg");
          imageArray[imageNum++] = new imageItem(image Dir +
          "im_pop_humidor .jpg");
          imageArray[imageNum++] = new imageItem(image Dir +
          "im_pop_humidor 2.jpg");
          imageArray[imageNum++] = new imageItem(image Dir +
          "im_pop_lounge1 .jpg");
          imageArray[imageNum++] = new imageItem(image Dir +
          "im_pop_lounge2 .jpg");
          imageArray[imageNum++] = new imageItem(image Dir + "im_pop_udr.jpg ");
          imageArray[imageNum++] = new imageItem(image Dir +
          "im_pop_winecel .jpg");

          var totalImages = imageArray.leng th;

          function imageItem(image _location) {
          this.image_item = new Image();
          this.image_item .src = image_location;
          }
          function get_ImageItemLo cation(imageObj ) {
          return(imageObj .image_item.src )
          }

          function randNum(x, y) {
          var range = y - x + 1;
          return Math.floor(Math .random() * range) + x;
          }
          function getNextImage() {
          if (random_display ) {
          imageNum = randNum(0, totalImages-1);
          }
          else {
          imageNum = (imageNum+1) % totalImages;
          }

          var new_image = get_ImageItemLo cation(imageArr ay[imageNum]);
          return(new_imag e);
          }

          function getPrevImage() {
          imageNum = (imageNum-1) % totalImages;
          var new_image = get_ImageItemLo cation(imageArr ay[imageNum]);
          return(new_imag e);
          }

          function prevImage(place ) {
          var new_image = getPrevImage();
          document[place].src = new_image;
          }

          function switchImage(pla ce) {
          var new_image = getNextImage();
          document[place].src = new_image;
          var recur_call = "switchImage('" +place+"')";
          timerID = setTimeout(recu r_call, interval);
          }
          // -->
          </script>
          </head>
          <body>
          <table>
          <tr>
          <td><img src="images/im_pop_airplane .jpg" width="442" height="288"
          alt="" border="0" img name="slideImg" ></td>
          </tr>
          <tr>
          <td class="closelin k"><a href="#" onClick="prevIm age('slideImg') ;
          clearTimeout(ti merID)" class="closelin k"> &lt;&lt;previou s</a> </td>
          <td></td>
          <td align="right" class="closelin k"><a href="#"
          onClick="switch Image('slideImg '); clearTimeout(ti merID)"
          class="closelin k">next&gt;& gt; </a></td>
          </tr>
          <tr>
          </table>
          </body>
          </html>
          *************** *************** *************** **************

          The code above is the actual slideshow code which runs in a popup
          window. I want to be able to call up the slideshow popup from other
          pages in my website, but have it start at an image I specify.

          For instance, on one page, I use this code to call up the slideshow
          popup:
          <a href="javascrip t:popUp('banque t_tour.html')"> <img
          src="images/bt_bd_pic2.jpg" width="234" height="153" alt=""
          border="0"></a>

          It always defaults to the first popup in the array. How can I ask it
          to start with a different specific image in the array?
          *************** *************** *************** **

          Reply Via Newsgroup <reply-to-newsgroup@pleas e.com> wrote in message news:<LpJdc.635 27$oR5.13701@pd 7tw3no>...[color=blue]
          > Jeannie wrote:
          >[color=green]
          > > I have a popup window which is a slideshow of about 7 images. When the
          > > popup window loads, the first image is present and then the viewer can
          > > select next or previous to scroll through the rest of the images.
          > >
          > > I'd like to use the same popup window at different points throughout
          > > the website and have the Virtual Tour (slideshow) open up at the
          > > appropriate photos. Meaning I'd like to control which picture the
          > > popup window opens up to, depending on where the user is in the site.
          > >
          > > Does anyone know where I can find code that does this? I am somewhat
          > > familiar with Javascript but would like to find some ready-made code
          > > which accomplishes this.
          > >
          > > Thanks for all help and suggestions!!
          > >
          > > --JAG[/color]
          >
          > I don't know about ready made code - however it shouldn't prove to
          > difficult to come up with some sort of a solution since you already have
          > some javascript skills. There are a couple of things you might already
          > know, but you've not connected them...
          >
          > First, when you open your popup window with window.open, you give the
          > popup window a name... If you use the same window name as a target in
          > any of your other pages, it will update the popup window - And if its
          > not already open (perhaps the user closed it) then a new one will open.
          >
          > The only problem that I could forsee is that you might want a popup that
          > is larger then the one opened in an earlier window in which case you
          > might have to resize it (which I believe is possible on most recent
          > popular browsers but I've never written code for it).
          >
          > Does that help you any, or do you still need some code? In my early days
          > of learning javascript I used to examine some of the code at
          > javascript.inte rnet.com however not all of it is environmentally
          > friendly (in such that it may be unclean code, achieveing results that
          > could be achieved with less resources using alternative methods).
          > Still, its helps me along... maybe you might find what you're looking
          > for there.
          >
          > randelld[/color]

            Comment

            Previous template Next
            Working...