代码之家 › 专栏 › 技术社区 › paul cappucci

jquery循环寻呼机#nav在第二张幻灯片上消失

jquery-cycle drupal jquery

0

paul cappucci · 技术社区 · 11 年前

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

当下面的代码位于静态html网站中时,它可以正常工作。但当我在Drupal页面模板中添加这个时。我的第二张幻灯片出现了,寻呼机#导航消失了。这是DOM/Cache/Drupal问题吗?导航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>

2 回复 | 直到 11 年前

1

Kisiou 11 年前

我认为你的标价是错误的。试试这样的方法:

<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在第二张幻灯片上消失了,因为你把它放在了第一张幻灯片的包装上。

2

1

paul cappucci 11 年前

经过更多的测试,我发现标题不是循环的。如果您使用具有多个项的嵌套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>