0

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

当下面的代码位于静态 html 站点中时，它可以正常工作。但是当我在 Drupal 页面模板中添加它时。我的第二张幻灯片出现了，寻呼机#nav 消失了。这是 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>
4

2 回答 2

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

于 2013-09-04T13:36:53.653 回答
1

经过更多测试，我发现标题没有循环。如果您使用具有多个项目的嵌套 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>
于 2013-09-05T02:19:47.910 回答