jQueryプラグインの使い方
-
公式テーマ「nirvana」を使用中です。
固定ページの1ページにjQueryプラグインの「Slippry」を使用したいと思います。
初心者なのでいろいろ調べましたが、ページに表示されません。
そこで質問があります。
行ったことは
子テーマとして「child」をつくりそのフォルダ内のcssフォルダにslippry.css、jsフォルダ内にslippry.jsを置きました。
1.header.phpの<?php cryout_header_hook();wp_head(); ?>の上段に
<?php wp_enqueue_style(‘plirray-css’, get_bloginfo(‘template_url’) . ‘/wp-content/themes/child/css/slippry.css’); ?>
<?php wp_enqueue_script(‘plirray’, get_bloginfo(‘template_url’) . ‘/wp-content/themes/child/js/slippry.js’,array(jquery)); ?>
と記入。
2.固定ページにテキストエディタで
<ul id=”pictures-demo”>
<li title=”slippryデモキャプション1”>
<img src=”/wp-content/uploads/2014/09/n_eye.png” alt=”デモ1″><li title=”slippryデモキャプション2”>
<img src=”/wp-content/uploads/2014/09/e_eye.png” alt=”デモ2″><li title=”slippryデモキャプション3”>
<img src=”/wp-content/uploads/2014/09/i_eye.png” alt=”デモ3″><li title=”slippryデモキャプション4”>
<img src=”/wp-content/uploads/2014/09/n_eye.png” alt=”デモ4″>
<li>←実際は半角です
<ul>←実際は半角です
と記入。
3.footer.phpに
<script>
jQuery(‘#pictures-demo’).slippry({
// general elements & wrapper
slippryWrapper: ‘<div class=”sy-box pictures-slider” />’, // 画像を囲む要素を指定できる// options
adaptiveHeight: false, // 画像の高さが違う時に自動的にスクロールさせるか
captions: false, // Position: overlay, below, custom, false | altキャプションの表示方法を指定できる// pager
pager: false, // ページャーを表示するか// controls
controls: false, // 画像左右のコントローラーを表示するか
autoHover: false,// transitions
transition: ‘kenburns’, // fade, horizontal, kenburns, false | 今回の肝!この指定で写真画像を動かす
kenZoom: 140, // 拡大幅を指定できる
speed: 3000 // 表示切り替え速度 ミリ秒
});
</script>
を、<?php wp_footer(); ?>の上段に記入しました。固定ページには4枚の写真が縦に並んでいるだけです。
どうしたら動くのでしょうか?
こちらのエフェクトの「kenburns」が使いたいのです。
宜しくお願いします。
- トピック「jQueryプラグインの使い方」には新たに返信することはできません。