0

I'm trying to design this site so that there is an image carousal with a mid-size image shown above small thumbnail options of other pictures.

The problem is, the way it shows right now, the "thumbnails" per-say are showing as full size. I tried editing the JavaScript in the document.write section to add height and width elements, but it wasn't working correctly.

Can someone help me get it to work? I've defaulted the code back to when it was showing full size images instead of thumbnails.

This is what I have so far:

var photos = new Array();
var photoindex = 0;
photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";

function backward() {
  if (photoindex > 0) {
    document.images.p.src = photos[--photoindex];
  }
}

function forward() {
  if (photoindex < photos.length - 1) {
    document.images.p.src = photos[++photoindex];
  }
}

function goto(n) {
  if (n < photos.length && n >= 0) {
    photoindex = n;
    document.images.p.src = photos[photoindex];
  }
}
</script>

<br>
<div style="text-align:center;left:5px;">
  <table width="250" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="3" align="center" valign="top">
        <img src="images/weloveweb.png" name="p" width="250" height="188" id="p" /></td>
    </tr>
    <tr>
      <td valign="top"><a href="javascript: backward();">&lt;&lt;</a></td>
      <td valign="top" style="text-align: center">
        <script type="text/javascript">
        for (i = 0; i < photos.length; i++) {
          document.write("<a href=\"javascript: goto(" + i + ");\">" + "<img src='" + photos[i] + "' /></a> ");
        }
        </script>
      </td>
      <td valign="top" style="text-align: right"><a href="javascript: forward();">&gt;&gt;</a></td>
    </tr>
  </table>
</div>
Mike Cluck
  • 28,921
  • 12
  • 72
  • 85
NewAtThis
  • 43
  • 5
  • 2
    Pro-tip: [Don't use `document.write`](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). In the end, it makes your life a lot harder. There are better methods of working with the DOM at the link I posted. – Mike Cluck Oct 07 '16 at 16:08
  • 1
    As for your question, are you familiar with CSS? It's very easy to make the kind of change you're asking for with just a few lines of CSS. – Mike Cluck Oct 07 '16 at 16:09
  • Not too familiar, no. Thanks for the tips, I'm a total noob so I'm not really sure how to implement the CSS changes you're describing. Can you give an example with how the javascript portion would find it? – NewAtThis Oct 07 '16 at 17:26

0 Answers0