jquery cycle pager #nav disappears on second slide

Question

I want to overlay a pager #nav like its done here: http://jquery.malsup.com/cycle/pager-over.html

When the code below is in a static html site it works fine. But when I add this in Drupal page template. My second slide appears and the pager #nav disappears. Is this a DOM/Cache/Drupal problem? The nav div only needs to be added once and it should appear over top all child div slides. Here is my mockup code:

head section

<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx:'fade',
pager:'#nav'
});
});
</script>

html

<div id="slideshow"> 
<div id="slide">
<div id="nav"></div> 
<?php print $node->field_test1_image[0]['view']; ?>
</div> 
<div id="slide">
<?php print $node->field_test2_image[0]['view']; ?>
</div>
</div>

Answer 1

I think your markup is wrong. Try something like this:

<div id="slideshow"> 
    <div id="nav"></div> 
    <div class="slide">
        <?php print $node->field_test1_image[0]['view']; ?>
    </div> 
    <div class="slide">
        <?php print $node->field_test2_image[0]['view']; ?>
    </div>
</div>

Note that id="slide" is changed to class="slide" - there should be only one element with unique ID ;)

EDIT: I forgot to mention that the #nav was dissapearing on second slide, because you put it to the first slide wrapper.

Answer 2

After more testing I found that the title was not cycling. Below is what worked if you are using nested divs with multiple items and you want each nested div to cycle. The trick was to change #nav to .nav and place .nav inside each nested div.

head

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#slideshow').cycle({
fx:     'fade',
pager:  '.nav'
});
});
</script>

body

<div id="slideshow"> 
<div class="slide">
<div class="nav"></div>
<?php print $node->field_test1_imagetitle[0]['view']; ?>
<?php print $node->field_test1_image[0]['view']; ?>
<a href="<?php print $node->field_test1_read[0]['value']; ?>">read more</a>
</div> 


<div class="slide">
<div class="nav"></div>
<?php print $node->field_test2_imagetitle[0]['view']; ?>
<?php print $node->field_test2_image[0]['view']; ?>
<a href="<?php print $node->field_test2_read[0]['value']; ?>">read more</a>
</div>
</div>