サポート » プラグイン » 自動スライドショーが表示されない

  • 解決済 rintax

    (@rinchan2119)


    サイトのTOPページに下記の自動スライドショーを設置したいと考えています。

    モーションアニメ付きスライドショー

    設置方法等を拝読し、試行錯誤を重ねましたが上手く表示されません。

    現在の環境は
    サーバ:Xserver
    使用テーマ:photo clip
    使用しているブラウザ:FireFox3.6.8, IE8
    です。

    ——————————————————————————————————————————————

    行った手順
    必要なファイルをDL

    ②解凍後jsフォルダ内のmootools.js, slideshow.js, slideshow.kenburns.js
    テーマディレクトリ/scripts/js/にコピー

    ③imagesフォルダ内のslideshow.cssをテーマディレクトリ/scripts/js/css/にコピー

    ④テーマディレクトリ/scripts/js/images/の下に画像を4枚配置(ファイル名は1~4.jpg)

    ⑤スクリプトの読み込みコードをテーマの(header.php)内の<?php wp_head(); ?>のすぐ上に記述

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/scripts/js/css/slideshow.css" media="screen" />
    	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/scripts/js/mootools.js"></script>
    	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/scripts/js/slideshow.js"></script>
    	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/scripts/js/slideshow.kenburns.js"></script>

    ⑥上記に続き設定コードを記述

    <script type="text/javascript">
          //<![CDATA[
          window.addEvent('domready', function(){
            var data = {
              '1.jpg': { caption: 'caption1' },
              '2.jpg': { caption: 'caption2' },
              '3.jpg': { caption: 'caption3' },
              '4.jpg': { caption: 'caption4' }
            };
            var myShow = new Slideshow.KenBurns('show', data, { captions: true, delay: 5000, duration: 2000, height: 400, hu: '<?php bloginfo('template_url') ?>/scripts/js/images/', width: 666 });
            });
        //]]>
    	</script>

    ⑦設置コードをテーマの(index.php)内の<?php if (have_posts()) : ?>のすぐ上に記述

    <div id="show" class="slideshow"></div>

    ——————————————————————————————————————————————

    参考サイトのセッティング通りに導入したつもりなのですが画像が表示されません。
    slideshow.css内で指定したheightやwidthは反映されています。

    コードの記述場所やパスの指定方法の変更などはしてみましたが解決できずに困っています。

    どうぞよろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • 上記手順のとおりに試して画像が表示される事を確認しました(FF3.6.8)。
    img タグの src は
    http://example.com/wp-content/themes/my-theme/scripts/js/images/1.jpg
    とかになってて直接アクセスして画像が表示されますでしょうか?

    そんな風な src だけども直接じゃ画像が表示されないのなら、
    画像がソコにアップロードされていないかもです。

    直接で画像が表示されるならご利用中のテーマのCSSが何かしてるかもです。

    rintax

    (@rinchan2119)

    kz様

    返信ありがとうございます。

    img タグの src とのことですが、
    これはソースのどこかに記述されているのでしょうか?

    TOPページを開いてソースを確認ところ設置コードの部分は
    そのまま<div id="show" class="slideshow"></div>と表示されています。

    下記のURLに直接アクセスしたところ画像が表示されましたので
    アップロードはされていると思います。
    http://example.com/wordpress/wp-content/themes/my-theme/scripts/js/images/1.jpg

    また、上で書き忘れていたのですが、参考サイトを参考にして、一般設定で

    WordPress のアドレス:http://example.com/wordpress
    サイトのアドレス:http://example.com

    に変更しています。(WordPressはサブディレクトリにインストールしています)

    よろしくお願いいたします。

    これはソースのどこかに記述されて

    Firefoxを お使いなので Firebug ってゆーアドオンを入れますと
    javascript で追加された要素やら何やらが全部丸見えになってとっても便利です◎

    rintax

    (@rinchan2119)

    kz様

    返信ありがとうございます。早速Firebugを導入しました。
    その場で設定を変更して表示の確認ができるとは!これは便利ですね。

    未だに原因はわかりませんが、おっしゃる通りテーマのcssが何かしてる気がしてきました。
    今更ですが、URLはhttp://mople-street.jp/です。

    また何かお気づきの点がございましたら、どんな小さなことでも結構ですので教えていただければ幸いです。

    よろしくお願いいたします。

    ずっと画像ローディング中ですね。
    とりあえず現在の画像が大きいので
    SlideShow 2!/images/ 以下にあるサンプルの 1.jpg〜4.jpg で
    試してみるとどうでしょう。

    rintax

    (@rinchan2119)

    kz様
    何度もありがとうございます。
    画像をサンプルに変更しました。

    ローカル環境で色々と試してみましたが、やはりcssの記述に問題がありそうです。
    消去法で確認してみます。

    また何か新しい事がわかりましたら報告させていただきます。
    よろしくお願いいたします。

    rintax

    (@rinchan2119)

    解決しました。
    テーマに最初から組み込まれているjsvascriptが原因でした。
    アコーディオンメニューを作成するためのmoo.fx.js, prototype.lite.jsです。

    サイトに表示させていなかったので気づくのに時間がかかりました。

    ありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「自動スライドショーが表示されない」には新たに返信することはできません。