質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

maxImage Scaling Pluginをwordpressに実装させる方法を教えてください。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,352

makoto-n

score 384

maxImage Scaling Pluginwordpressで使用し、トップ画面にのみ使いたいです。

現状:
ローダー画像は動いています。
ですがスライドショーが動いてないです。

ソース:
header.php

<?php wp_head(); /* Template Name: WP */ ?>
  <?php wp_enqueue_script( 'maximage', get_template_directory_uri() .'/js/jquery.maximage.min.js', array( 'jquery'),'1.8.3' ); ?>
  <?php wp_enqueue_script( 'slicknav', get_template_directory_uri() .'/js/jquery.slicknav.min.js', array( 'jquery'),'1.10.2' ); ?>
</head>
<body <?php body_class(); ?>>
  <header>
    <div id="header">
      <img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" class="loader" />
      <img src="<?php echo get_template_directory_uri(); ?>/images/background01.jpg" alt="" class="bgmaximage" alt="" />
      <img src="<?php echo get_template_directory_uri(); ?>/images/background02.jpg" alt="" class="bgmaximage" alt="" />
      <img src="<?php echo get_template_directory_uri(); ?>/images/background03.jpg" alt="" class="bgmaximage" alt="" />
      <div id="maincontent">
        <h1>テストテスト</h1>
      </div>
    </div>
  </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

/* maximage__________________________________ */
.bgmaximage{
  position:fixed !important;
  display:none;
}
#maincontent {
  position: absolute;
  top: 40px;
  text-align: center;
  z-index: 50;
  width: 100%;
}
.loader {
  position:absolute;
  z-index:9999;
  width:39px;
  height:39px;
  top:40%;
  left:49%
}


funstions.phpにはjQueryに関する設定はしていません。
スライドショーを使いたいのですがうまくいきません。
読み込み方に問題があるでしょうか?
画像のパスは問題ないようです。

追記

コンソール
これはどうすればいいかわかりますか?
自分のテーマに組み込んで試しています。
ちなみにスライドショーはまだ動いていません。
画像表示はなしです。

<script>
    jQuery(function($){
      $('.bgmaximage').maximage({
        isBackground: true,
        slideShow: true,
        slideShowTitle: false,
        slideDelay: 1,
        overflow: 'auto',
        verticalAlign:'top'
      });
    });
  </script>

さらに追記します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3'></script>
<style>
.bgmaximage{
  display:none;
}</style>
<script>
jQuery(function(){
  jQuery('img.bgmaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: false,
    slideDelay: 3,
    overflow: 'auto',
    verticalAlign:'top'
  });
});</script>
</head>
<body id="top">
        <article>
    <p><img alt="" src="http://webdesignrecipes.com/MdN-Samples/max-image/images/ajax-loader.gif" class="loader" width="66" height="66" /><br />
<img src="http://webdesignrecipes.com/wp-content/uploads/2012/04/DSC03597.jpg" alt="" title="" width="1000" height="666" class="bgmaximage size-full" /><br />
<img src="http://webdesignrecipes.com/wp-content/uploads/2012/04/DSC03310.jpg" alt="" title="" width="940" height="626" class="bgmaximage size-ful" /><br />
    </article>
<script type='text/javascript' src='http://webdesignrecipes.com/wp-content/themes/WebDesignRecipes/js/jquery.maximage.min.js?ver=1416354398'></script>
</body>
</html>


webデザインレシピさんで紹介されていたソースを出来得る限り省略させていただきました。
このソースを拡張子htmlで表示するとスライドショーが発生するんですね。
この原理がわかりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

まず、ライブラリのドキュメントを読むことをオススメします。サンプルコードも掲載されていますし必読です。ドキュメント読んでも分からない場合は、デモページの HTML ソースをブラウザで表示して、真似てみるのがいいです。

また、動かない時は何かしらのエラーがでています。エラーの内容は、ブラウザのデベロッパーツールのコンソールで確認できます。エラー文をみることで、意外とあっさり解決することもあるので、デベロッパーツールと仲良くなるとよいと思います。

MaxImage 2.0
http://www.aaronvanderzwan.com/maximage/

取り急ぎ試してみましたが、正常に表示されました。本日時点で公開されているバージョンで試しています。私が、試した手順を以下に示します。

 1. Twenty Fifteen の子テーマを作成

  1. wp-content/themes 以下に twentyfifteen-child という名のディレクトリを作成
  2. twentyfifteen-child 直下に style.css を作成
  3. twentyfifteen-child 直下に functions.php を作成
  4. twentyfifteen-child 直下に front-page.php を作成
  5. twentyfifteen-child 直下に header-front-page.php を作成
  6. twentyfifteen-child 直下に header-front-page.php を作成

 2. 各ファイルに記述したソースコード

あくまでもサンプルですので、お好みにと環境に合わせ変えてみてください。

 2-1 style.css

/*
Theme Name: Twenty Fifteen Child
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: KUCKLU
Author URI: https://www.visualive.jp/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.0
Template: twentyfifteen
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

body.home:before {
    content: none;
}

#cycle-loader {
    height: 32px;
    left: 50%;
    margin: -8px 0 0 -8px;
    position: absolute;
    top: 50%;
    width: 32px;
    z-index: 999;
}

#maximage {
    display: none;
    position: fixed !important;
}

 2-2 functions.php

<?php
function twentyfifteen_child_enqueue_styles() {
    // Style of the Twenty Fifteen
    wp_enqueue_style( 'twentyfifteen', get_template_directory_uri() . '/style.css' );
    // Style of the Twenty Fifteen Child
    wp_enqueue_style( 'twentyfifteen-child', get_stylesheet_directory_uri() . '/style.css', array( 'twentyfifteen' ) );
    // Style of the MaxImage 2.0
    wp_enqueue_style( 'jquery-maximage', get_stylesheet_directory_uri() . '/assets/css/jquery.maximage.min.css', array( 'twentyfifteen-child' ) );

    // Script of the MaxImage 2.0
    wp_enqueue_script( 'jquery-cycle-all', get_stylesheet_directory_uri() . '/assets/js/jquery.cycle.all.min.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'jquery-maximage', get_stylesheet_directory_uri() . '/assets/js/jquery.maximage.min.js', array( 'jquery', 'jquery-cycle-all' ), false, true );
    // Script of the Twenty Fifteen Child
    wp_enqueue_script( 'twentyfifteen-child', get_stylesheet_directory_uri() . '/assets/js/apps.js', array( 'jquery', 'jquery-cycle-all', 'jquery-maximage' ), false, true );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_child_enqueue_styles' );

 2-3 apps.js

jQuery(function ($) {
    // Trigger maximage
    $('#maximage').maximage({
        onFirstImageLoaded: function(){
            jQuery('#cycle-loader').hide();
            jQuery('#maximage').fadeIn('fast');
        }
    });
});

 2-4 header-front-page.php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

 2-5 footer-front-page.php

<?php wp_footer(); ?>

</body>
</html>

 2-6 front-page.php

<?php get_header( 'front-page' ); ?>

<img id="cycle-loader" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/ajax-loader.gif" />
<div id="maximage">
    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/wall_portrait.jpg" alt="" width="1400" height="1050" />
    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/coalesse.jpg" alt="Coalesse" width="1400" height="1050" />
    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/laughing.jpg" alt="" width="1400" height="1050" />
    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/roof_shooting.jpg" alt="" width="2048" height="1536" />
    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/man.jpg" alt="" width="2048" height="1536" />
    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/coffee_shop.jpg" alt="" width="2048" height="1536" />
    <img src="https://raw.githubusercontent.com/akv2/MaxImage/master/lib/images/demo/gas_station.jpg" alt="" width="2048" height="1536" />
</div>

<?php get_footer( 'front-page' ); ?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/09 08:03

    > kuck1uさんが大変丁寧に教えてくださったソースも試しました。
    ということは、twentyfifteen-child という twentyfifteen の子テーマを作成して、私が回答したソースコードをそのまま記述して、twentyfifteen-child というテーマを動かしてみた!ということですか?

    > Web デザインレシピさんのソースを参照したところ
    Web デザインレシピさんのサンプルでは MaxImage のバージョンが古いのではないでしょうか?いま、組み込みたいのは、MaxImage 2.0 ですよね? Web デザインレシピさんのソースで動かしたいのであれば、 Web デザインレシピさんが読み込んでいる MaxImage をダウンロードして、自分の WordPress に組み込む必要があります。

    ライブラリは基本的に、ライブラリのバージョンが変われば、仕様も変わり、いままでのやり方で動かないということは当たり前です。仕様が変わっているのだから当然です。
    他のところで動いていて、同じようになってるのになんで動かないの?!と悩む前に、ご自身が利用しようとしているライブラリのバージョンがいくつで、現在の仕様はどのようになっているのかを、よく確認してみてください。

    それに、Web デザインレシピさんの記事は何年も前の記事ですよね。それだけ古い記事を参考にしても、最新バージョンの MaxImage は動かないと思いますよ。

    また、動くからといって、過去のバージョンを使用することはオススメしません。バージョンアップしているということは、バグの修正やセキュリティー上修正などが含まれている為です。

    キャンセル

  • 2016/06/09 22:00

    うーん、試したは良いのですが、画像とかを設定する前にコンソールでエラーを発見しましたので、実際にwordpressのテーマとして動いている様を見たことないです。

    webデザインレシピさんで紹介されているものにはそういった背景があるのですね。
    うまく理解せず失礼しました。

    はい、以降は最新バージョンを扱っていくことにします。


    ところで、cycle.jsのイベントハンドラ的なものは何でしょうか?
    私はfunctions.phpに記載する方法がいまいちわかっていないため、
    header.phpやfooter.phpに記述したいのですが、イベントハンドラがわかりません。

    キャンセル

  • 2016/06/11 06:44

    jquery-cycle-allみたいですね。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる