Question

我想覆盖一个寻呼机#nav，就像它在这里完成的那样：http://jquery.malsup.com/cycle/pager-over.html

当下面的代码在静态html网站中时，它可以正常工作。但是当我在Drupal页面模板中添加它时。我的第二张幻灯片出现，寻呼机#nav消失了。这是一个DOM / Cache / Drupal问题吗？ nav div只需要添加一次，它应该显示在所有子div幻灯片的顶部。这是我的模型代码：

头部

<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

我认为你的标记错了。尝试这样的事情：

<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>

请注意，id =“slide”更改为class =“slide” - 应该只有一个元素具有唯一ID;）

编辑：我忘了提到#nav在第二张幻灯片上消失了，因为你把它放到了第一张幻灯片包装上。

Answer 2

经过更多测试，我发现标题不是骑自行车。下面是如果您使用具有多个项目的嵌套div并且您希望每个嵌套div循环的方法。诀窍是将#nav更改为.nav并将.nav放在每个嵌套的div中。

头

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

体

<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>

jquery cycle pager #nav在第二张幻灯片上消失了

2 个答案: