iframe image viewer controlled by previous/next buttons and thumbnails

I need help!

[beezer172]

Hi everyone. This is my first post here on webmasterworld and one of my first website projects... so there's a lot I don't know.

I'm trying to create kind of an image gallery within an iFrame. I have it set up so that image navigation can be controlled either by previous/next buttons OR by clicking on thumbnails of the images.

The problem is that these two controls work separately from each other and I need them to work together. So, for example, if you click the next button through to the 4th image, then click the thumbnail for the 2nd image, then click the next button again, the 5th image is shown rather than the 3rd as one would intuitively expect.

Here is my code for the head:

<script language="JavaScript" type="text/javascript">
<!--

var tucbook = new Array("tuc_1", "tuc_2", "tuc_3", "tuc_4", "tuc_5");
var numImages = tucbook.length;
var curImage = 1;

function p_fo(pages){
curImage = curImage + pages;
if (curImage > numImages)
{curImage = 1;}
if (curImage == 0)
{curImage = numImages;}
var objFrame = document.getElementById("blowup");
objFrame.src = tucbook[curImage-1] + ".html";
}

//-->
</script>

and in the body:

<div id="thumbholder">
<table width="875" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="83"><a href="tuc_1.html" target="blowup"><img src="images/thumbs/thTUC Head Cover-01.jpg" width="142" height="110" alt="page 1" /></a></td>
<td width="725" colspan="2" rowspan="5"><div id="frameholder"><iframe id="blowup" name="blowup" width="725" height="560" src="tuc_1.html" frameborder="1" marginheight="0" scrolling="no"></iframe>
</div></td><!-- end frameholder div -->
</tr>
<tr>
<td height="83"><a href="tuc_2.html" target="blowup"><img src="images/thumbs/thTUC Head Cover-02.jpg" width="142" height="110" alt="page 2" /></a></td>

this continues for 3 more thumbnails for a total of 5 images, then:

<td><a href="#" onclick="p_fo(-1)">previous</a></td>
<td colspan="2"><a href="#" onclick="p_fo(1)">next</a></td>

end table, end div, etc...

So is there some way I can get my p_fo function to start by checking which image is currently shown in the iFrame and then go to the next image from there? Or is there some better way of achieving this effect?

[Fotiman]

Welcome to WebmasterWorld
First, a few things to avoid in general:

1. There is no "language" attribute on script elements. Don't use it, it's invalid.

2. Don't include HTML style comments within script tags. For example, instead of this:

<script type="text/javascript">
<!--
...
//-->
</script>

just do this:

<script type="text/javascript">
...
</script>

This is a remnant from Netscape 1 that hasn't been needed for many, many years, yet continues to proliferate in new code for some reason.

3. Instead of this:

var tucbook = new Array("tuc_1", "tuc_2", "tuc_3", "tuc_4", "tuc_5"); 

Use the literal notation to avoid the call to new:

var tucbook = ["tuc_1", "tuc_2", "tuc_3", "tuc_4", "tuc_5"]; 

It also takes up less space.

4. You've defined several global variables. In general it's best to avoid that because you could conflict with some other third party script. Research "javascript namespaces" for better alternatives, but to summarize: you can create a single global variable (instead of multiple), which holds an object that contains all of your actual variables. For example:

var BEEZER172 = {
  tucbook: ["tuc_1", "tuc_2", "tuc_3", "tuc_4", "tuc_5"],
  numImages: BEEZER172.tucbook.length,
  curImage: 1,
  p_fo: function (pages) { ... }
}

5. Don't use tables for layout. You're controlling the presentation layer by adding a bunch of extra markup. Instead, learn how to achieve better layouts with CSS.

6. Look into attaching event listeners instead of defining inline event handlers like onclick="...".

Now, on to your main question. Perhaps you could just attach an event listener to each of the image thumbnails as well. For example:

<a href="tuc_1.html" onclick="setCurrent(this.href);" target="blowup">

function setCurrent(uri) {
  var filename = uri.substring(uri.lastIndexOf('\/') + 1, uri.lastIndexOf('.html')),
    i,
    n;
  // Find this one in the tucbook array
  for (i = 0, n = tucbook.length; i < n; i++) {
    if (tucbook[i] === filename) {
      curImage = i;
      return;
    }
  }
}