maxImage Scaling Pluginをwordpressで使用し、トップ画面にのみ使いたいです。
現状:
ローダー画像は動いています。
ですがスライドショーが動いてないです。
ソース:
header.php
html
1 <?php wp_head(); /* Template Name: WP */ ?> 2 <?php wp_enqueue_script( 'maximage', get_template_directory_uri() .'/js/jquery.maximage.min.js', array( 'jquery'),'1.8.3' ); ?> 3 <?php wp_enqueue_script( 'slicknav', get_template_directory_uri() .'/js/jquery.slicknav.min.js', array( 'jquery'),'1.10.2' ); ?> 4</head> 5<body <?php body_class(); ?>> 6 <header> 7 <div id="header"> 8 <img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" class="loader" /> 9 <img src="<?php echo get_template_directory_uri(); ?>/images/background01.jpg" alt="" class="bgmaximage" alt="" /> 10 <img src="<?php echo get_template_directory_uri(); ?>/images/background02.jpg" alt="" class="bgmaximage" alt="" /> 11 <img src="<?php echo get_template_directory_uri(); ?>/images/background03.jpg" alt="" class="bgmaximage" alt="" /> 12 <div id="maincontent"> 13 <h1>テストテスト</h1> 14 </div> 15 </div> 16 </header>
footer.php
<?php /* Template Name: WP */ wp_footer(); ?€> <script> (function($){ $(document).ready(function(){ $('img.bgmaximage').maxImage({ isBackground: true, slideShow: true, slideShowTitle: false, slideDelay: 5, overflow: 'auto', verticalAlign:'top' }); }) })(jQuery); </script>
css
css
1/* maximage__________________________________ */ 2.bgmaximage{ 3 position:fixed !important; 4 display:none; 5} 6#maincontent { 7 position: absolute; 8 top: 40px; 9 text-align: center; 10 z-index: 50; 11 width: 100%; 12} 13.loader { 14 position:absolute; 15 z-index:9999; 16 width:39px; 17 height:39px; 18 top:40%; 19 left:49% 20}
funstions.phpにはjQueryに関する設定はしていません。
スライドショーを使いたいのですがうまくいきません。
読み込み方に問題があるでしょうか?
画像のパスは問題ないようです。
追記
これはどうすればいいかわかりますか?
自分のテーマに組み込んで試しています。
ちなみにスライドショーはまだ動いていません。
画像表示はなしです。
html
1 <script> 2 jQuery(function($){ 3 $('.bgmaximage').maximage({ 4 isBackground: true, 5 slideShow: true, 6 slideShowTitle: false, 7 slideDelay: 1, 8 overflow: 'auto', 9 verticalAlign:'top' 10 }); 11 }); 12 </script>
さらに追記します。
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="UTF-8"> 6<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3'></script> 7<style> 8.bgmaximage{ 9 display:none; 10}</style> 11<script> 12jQuery(function(){ 13 jQuery('img.bgmaximage').maxImage({ 14 isBackground: true, 15 slideShow: true, 16 slideShowTitle: false, 17 slideDelay: 3, 18 overflow: 'auto', 19 verticalAlign:'top' 20 }); 21});</script> 22</head> 23<body id="top"> 24 <article> 25 <p><img alt="" src="http://webdesignrecipes.com/MdN-Samples/max-image/images/ajax-loader.gif" class="loader" width="66" height="66" /><br /> 26<img src="http://webdesignrecipes.com/wp-content/uploads/2012/04/DSC03597.jpg" alt="" title="" width="1000" height="666" class="bgmaximage size-full" /><br /> 27<img src="http://webdesignrecipes.com/wp-content/uploads/2012/04/DSC03310.jpg" alt="" title="" width="940" height="626" class="bgmaximage size-ful" /><br /> 28 </article> 29<script type='text/javascript' src='http://webdesignrecipes.com/wp-content/themes/WebDesignRecipes/js/jquery.maximage.min.js?ver=1416354398'></script> 30</body> 31</html>
webデザインレシピさんで紹介されていたソースを出来得る限り省略させていただきました。
このソースを拡張子html
で表示するとスライドショーが発生するんですね。
この原理がわかりません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/06 10:52
2016/06/06 11:28
退会済みユーザー
2016/06/07 13:26 編集
退会済みユーザー
2016/06/07 06:09
2016/06/07 07:12
退会済みユーザー
2016/06/07 07:20 編集
2016/06/07 13:00
退会済みユーザー
2016/06/07 13:53 編集
2016/06/07 22:43
2016/06/08 11:56
退会済みユーザー
2016/06/08 13:53 編集
2016/06/08 14:16
退会済みユーザー
2016/06/08 23:03
2016/06/09 13:00
2016/06/10 21:44