jQuery(AnythingSlider)を動かすには?
-
質問です。
wordpressにAnythingSliderを設置しようと考えてますが、上手く動作しません。
各所で調べた通りにはやっているのですが、細かいところが解らず、そこが原因かも知れないので質問させてもらうことになりました。
どなたか解りましたらよろしくお願いします。テーマはデフォルトを弄っています。
まず
jquery.anythingslider.js と jquery.easing.1.2.js
を使用テーマの内にjsフォルダを作って置きました。
cssも同様です。header.php
<?php wp_head(); ?>の上に<?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.2.js', array('jquery')); ?> <?php wp_enqueue_script('anythingSlider', get_bloginfo('template_url') . '/js/jquery.anythingslider.js'); ?> <?php wp_enqueue_style('slider-css', get_bloginfo('template_url') . '/css/slider.css'); ?>
と記述。
それからhead内に
<script type="text/javascript"> function formatText(index, panel) { return index + ""; }; jQuery(function () { jQuery('.anythingSlider').anythingSlider({ easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not. delay: 3000, // How long between slide transitions in AutoPlay mode startStopped: true, // If autoPlay is on, this can force it to start stopped animationTime: 400, // How long the slide transition takes hashTags: false, // Should links change the hashtag in the URL? buildNavigation: false, // If true, builds and list of anchor links to link to each slide pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover startText: "Go", // Start text stopText: "Stop", // Stop text navigationFormatter: formatText // Details at the top of the file on this use (advanced use) }); jQuery("#slide-jump").click(function(){ jQuery('.anythingSlider').anythingSlider(6); }); }); </script>
と記述しました。
<?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.2.js', array('jquery')); ?>
に倣って、外部読み込みも試してみましたが、その場合の’easing’にあたる部分をどう記述していいか解りませんでした。それから使用テンプレートのcontents部分に
<div class="anythingSlider"> <div class="wrapper"> <ul> <li> <img src="<?php bloginfo('template_url'); ?>/images/01.jpg" alt="" /> </li> <li> <img src="<?php bloginfo('template_url'); ?>/images/02.jpg" alt="" /> </li> </ul> </div> </div> <!-- END AnythingSlider -->
を記述。
としましたが、画像が縦に並ぶだけになってしまっています。
使用テンプレートをデフォルトに戻してpage.php内に記述をしても同じ結果でした。またスクリプトでは $をjqueryと記述するとの説明も見たのですが、
jquery.anythingslider内の全ての表記を変えるのでしょうか?
一括置き換えなどもしてみたのですが、結果は同じでした。ブラウザはfirefox、chromeで確認済みです。
3件の返信を表示中 - 1 - 3件目 (全3件中)
3件の返信を表示中 - 1 - 3件目 (全3件中)
- トピック「jQuery(AnythingSlider)を動かすには?」には新たに返信することはできません。