Question

Relative JavaScript newbie here looking for some help in creating a scrollable thumbnail slider using JavaScript/AJAX/HTML.

By ‘scrollable thumbnail slider’ I mean a set of thumbnail images wedged between ‘left’ and ‘right’ arrow images. Clicking either arrow should alter the set of thumbnails displayed WITHOUT reloading/refreshing the rest of the page. As an example please see this page: http://www.travelzoo.com/local-deals/Boston/Entertainment/34729.

Here’s my code thus far:

<div id="thumbnails">
  <a href="#" onclick="slideLeft()"><img src="left_arrow.jpg"/></a>
  <script>
    //I only want to display 4 thumbnails at a time, but may have many more cached
    for (var i=0;i<4;i++)
    {
       // don't worry about the formula below, it simply manipulates the imgCounter var
      document.write('<a href=""><img src="sampleImage'+(((parseInt(imgCounter)+i-1)%4)+1)+'.jpg"/></a>');
    } 
  </script>
  <a href="#" onclick="slideRight()"><img src="right_arrow.jpg"/></a>
</div>

<script>
  ...

  function slideLeft() {
    //imgCounter is a passed var, updated when either arrow is clicked
    imgCounter = (parseInt(imgCounter)+3)%4;
    if (imgCounter == 0)
      imgCounter = 4;
    }
  ...
</script>

When the user clicks the left or right arrow, the variable representing the first image (imgCounter) is updated. I then want to redraw the DIV (id=”thumbnails”) with this updated variable while leaving the rest of the page AS IS.

Can this be done with pure JavaScript?
If not, can someone please provide a basic AJAX example?

If you feel that this question has already been answered (I checked) or is not adequately explained, please don’t be a jerk/troll and politely suggest what additional info I can provide.

Thanks!

Answer 1

Ok, so I figured this out myself. As I suspected, I was over-thinking it…

I wrote a helper function that generates the innerHTML code for my div, as follows:

function generateThumbHTML() {
  var html = '';

  for (var i=0;i<4;i++)
  {
    html += '<a href=""><img src="sampleImage';
    html += '(((parseInt(imgCounter)+i-1)%4)+1)';
    html += '.jpg"/></a>';
  }

  return html;
}

Then, I added a call to my slideLeft() and slideRight() functions, setting the innerHTML property of my DIV to the new HTML code:

<script>
  ...

  function slideLeft() {
    //imgCounter is a passed var, updated when either arrow is clicked
    imgCounter = (parseInt(imgCounter)+3)%4;
    if (imgCounter == 0)
      imgCounter = 4;

    var container = document.getElementById("thumbnails");
    container.innerHTML = generateThumbHTML();
  }
  ...
</script>

The only remaining question I’m trying to answer is this…

Why does updating the innerHTML property automatically kick in? Is there an event that takes place in the background as soon as this property is updated? And if so, how can I find out what events are being fired? I’m looking at the HTML DOM spec but am not finding the innerHTML property on any object definition.