Добавить в существующий старый скрипт слайд-шоу, чтобы добавить подпись к изображениям

Question

Мне интересно, есть ли небольшое изменение или дополнение, которое я мог бы сделать к существующему сценарию, чтобы добавить подписи к изображениям в моем слайд-шоу, или я действительно должен просто отказаться от этого старого сценария и начать все сначала. Я очень новичок в javascript, поэтому, пожалуйста, держитесь со мной. Таким образом, есть две страницы - вводная страница и страница слайд-шоу. На начальной странице есть маленькие миниатюрные изображения, которые при нажатии переводят посетителя на страницу слайд-шоу, чтобы увидеть большую версию миниатюры, и оттуда посетитель может щелкнуть по всем большим изображениям, представляющим уменьшенные изображения, или вернуться на начальную страницу.

Вот вступительная страница (соответствующая часть):

<table>
   <tr>
    <td><a href="arbor-viewer-test-files.html?img=0">
     <img src="images/thumbnails/arbor_0.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=1">
     <img src="images/thumbnails/arbor_1.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=2">
     <img src="images/thumbnails/arbor_2.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=3">
     <img src="images/thumbnails/arbor_3.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=4">
     <img src="images/thumbnails/arbor_4.jpg" alt="DFW Patio Cover Arbors" border="0" width="100" />
     </a></td>
   </tr>
  </table>

А вот страница слайд-шоу (соответствующая часть):

<table border="0">
          <tr>
            <td align="center">
              <p class="center largeP bold"> <a href="javascript:chgImg(-1)">Previous</a> | <a href="javascript:auto()">Auto/Stop</a> | <a href="javascript:chgImg(1)">Next</a> <br />
                <a href="/arbors.htm">Return to the Arbor Gallery</a> </p>
              <br />
            </td>
          </tr>
          <tr>
            <td align="center"> <br />
              <img src="images/arbor_0.jpg" name="slideshow" />
              <br />
            </td>
          </tr>
        </table>
<script type="text/javascript">
showImg(queryString.img);
</script>
</body>

А вот и сценарий:

var newimg = new Array();
newimg[0] = "images/arbor_0.jpg";
newimg[1] = "images/arbor_1.jpg";
newimg[2] = "images/arbor_2.jpg";
newimg[3] = "images/arbor_3.jpg";
newimg[4] = "images/arbor_4.jpg";

function obj_queryString(){
qs = document.URL.substring(document.URL.indexOf('?')+1,document.URL.length);
queries = qs.split(/\&/);
for(i=0;i<queries.length;i++){ 
    query = queries[i].split(/\=/);
    this[query[0]] = unescape(query[1]);}
 }

queryString = new obj_queryString();
var imgnum = 0;
var imglength = newimg.length - 1;
//delay betwn slides in millisecs
var delay = 3000;
var lock = false;
var run;

function showImg(imgnum){
document.slideshow.src = newimg[imgnum];
}

function chgImg(direction) {
if (document.images){
    imgnum = imgnum + direction;
    if (imgnum > imglength) 
        imgnum = 0;
    if (imgnum < 0) 
        imgnum = imglength;
    document.slideshow.src = newimg[imgnum];}
}

function auto(){
if (lock == true) {
    lock = false;
    window.clearInterval(run);}
else if (lock == false) {
    lock = true;
    run = setInterval("chgImg(1)", delay);}
 }

Лучшее, что я мог придумать, это добавить это в скрипт:

//under the newimg Array:
var caption = new Array();  
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image"; 
caption[3] = "Caption for the fourth image"; 
caption[4] = "Caption for the fifth image";

И добавление фрагмента вместе с функцией внизу страницы слайд-шоу (все остальное так же, как указано выше):

<p id="captionDiv><br /></p>
<script type="text/javascript">
showImg(queryString.img);
document.getElementById("captionDiv").innerHTML=caption[imgnum];
</script>

… Который просто показывает заголовок [0] и не меняется вместе с изображениями. Я уверен, что решение не составляет труда для тех, кто знает больше JavaScript, чем я. Я исследовал и изучал онлайн более недели и до сих пор не понимаю, что делать. Мне нужен интерпретатор JavaScript! В любом случае, большое спасибо, если вы прочитали это далеко и за любую помощь, которую вы можете предложить. -Amanda

Answer 1

Вы можете положить document.getElementById("captionDiv").innerHTML=caption[imgnum]; внутри function showImg(imgnum) так что вы можете получить соответствующую подпись к изображению.