Imageslider - Overlaying Text

I'm trying to extend Imageslider so I can overlay text on each image. Whilst I can get the text to appear over the image, I can't find a way for the text to change with the image (i.e. only the text for the first side is displayed each time).

I've tried a number of edits to the javascript, but they just seem to break the script completely.

The additional code in the template is as follows (the id counter was part of a bodge attempt that also didn't work, but might be useful);

Code:

---

<?php foreach ($this->elements as $k => $element): ?>
<?php if ($element['url']): ?><a <?php if ($element['url_fullsize']): ?> rel="lightbox"<?php endif; ?> href="<?php echo $element['url_link']; ?>"<?php if ($element['url_title']): ?> title="<?php echo $element['url_title']; ?>"<?php endif; ?><?php if ($element['url_window']): ?> onclick="this.blur(); window.open(this.href); return false;"<?php endif; ?>><?php endif; ?>
<div class="overlay" id="overlay<?php echo $k ?>"><h1><?php echo $element['description'];?></h1>

<?php echo $element['teaser'];?></p></div><?php if ($element['url']): ?></a>
<?php endif; ?>
<?php endforeach; ?>

---

Obviously the fields in the database have the same names as here.

Any ideas?