0

ここで行われたようにページャー #nav をオーバーレイしたい: http://jquery.malsup.com/cycle/pager-over.html

以下のコードが静的な html サイトにある場合、正常に動作します。しかし、これを Drupal ページ テンプレートに追加すると。2 番目のスライドが表示され、ページャーの #nav が消えます。これは DOM/キャッシュ/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>
4

2 に答える 2

1

さらにテストした結果、タイトルが循環していないことがわかりました。以下は、複数のアイテムでネストされた div を使用していて、ネストされた各 div を循環させたい場合に機能するものです。トリックは、#nav を .nav に変更し、ネストされた各 div 内に .nav を配置することでした。

頭

<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 に答える