1372698183 以下のサイトを参考にスライドショーを作製したのですが、画像のようになってしまいます。

http://myisland.jp/template/tips/gallery/gallery04/index.html
そのまま、コードをコピペしたのですがうまくいきません。
アドバイス方お願いします<(_ _)>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/02 02:03:03
  • 終了:2013/07/07 13:37:37

ベストアンサー

id:psne No.1

ぽけっとしすてむ回答回数465ベストアンサー獲得回数2512013/07/02 06:32:29

ポイント50pt

うーん
HTML側のコードは、どのように貼り付けましたか?
なんとなく

<div id="show" class="slideshow">
<img src="images/1.jpg" alt="写真画像のタイトル" />
</div>

のみ貼り付けただけの様にも見えます。

質問のスクリーンショットは、画像が読み込まれているがjavascriptは読み込まれていない様に見えます。

1.ファイルの配置(ディレクトリの位置、不足が無いか)を確認してください
2.HEAD部分に以下のコードが入っているか確認してください

<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: 'タイトル1' },
'2.jpg': { caption: 'タイトル2' },
'3.jpg': { caption: 'タイトル3' },
'4.jpg': { caption: 'タイトル4' },
'5.jpg': { caption: 'タイトル5' },
'6.jpg': { caption: 'タイトル6' },
'7.jpg': { caption: 'タイトル7' },
'8.jpg': { caption: 'タイトル8' },
'9.jpg': { caption: 'タイトル9' }
};
var myShow = new Slideshow('show', data, {controller: true, height: 450, hu: 'images/', thumbnails: true, width: 600});
});
//]]>
</script>

3.実際に表示させる(スクリーンショットで写っている)部分は既に記述されていると思いますが、念のために確認してください。

なお、ブラウザ機能の一つの「開発者ツール」を利用すると、リンクのミスやスクリプトのエラーなど、何故表示されないのかが分かる場合があります。

他2件のコメントを見る
id:rouge_2008

※まとめて投稿し直します。

参考ページで紹介(?)しているSlideshowの開発者のページは次のようです。
http://www.electricprism.com/aeron/
※上から4つ目のアイコンをクリックすると、「Slideshow」のページにアクセスできます。
http://www.electricprism.com/aeron/slideshow/

ダウンロードページで必要なファイル(※MooTools含む)をまとめてダウンロードできます。
https://code.google.com/p/slideshow/downloads/list
※どちらでも動作すると思いますので、新しい方をダウンロードするといいです。

動作する「mootools-1.3.2.1-more.js」を確認すると次の記述があります。

// MooTools: the javascript framework.
// Load this file's selection again by visiting: http://mootools.net/more/00aebfac925b03c956ebbcad8266ef49
// Or build this file again with packager using: packager build More/Fx.Elements More/Assets

※MooToolsの公式からダウンロードできる最新のバージョンで試した場合、「mootools-more-1.4.0.1.js」(※「Select All」ですべてにチェックし「Include Compatibility」にもチェック済み)でエラーが出たので確認しました。

http://mootools.net/more/

最新のMooToolsを使用する場合は、上記ページで「Or build this file again with packager using: packager build More/Fx.Elements More/Assets」に従って「More」「Fx.Elements」「Assets」にチェックを入れてダウンロードしてください。

※あるいは次のURLにアクセスしても同じ設定になっています。
http://mootools.net/more/20eb7ad5c24c817549a77df820f19305

最新版のCoreファイルは次のページからダウンロードできます。
http://mootools.net/download
※「with compatibility」で動作するはずです。(「without compatibility」は試していません。)

※画像でも404エラーが発生しているので、開発者が公開している「Slideshow-1.3.*.******.zip」をダウンロードして、「controller-controls.png」と「loader.png」を「css」フォルダに入れておくといいです。

2013/07/04 12:26:25
id:kaji0245

動作しました、ありがとうございます。
wordpressにて埋め込み作業をやってみます<(_ _)>

2013/07/07 13:37:01

その他の回答(1件)

id:psne No.1

ぽけっとしすてむ回答回数465ベストアンサー獲得回数2512013/07/02 06:32:29ここでベストアンサー

ポイント50pt

うーん
HTML側のコードは、どのように貼り付けましたか?
なんとなく

<div id="show" class="slideshow">
<img src="images/1.jpg" alt="写真画像のタイトル" />
</div>

のみ貼り付けただけの様にも見えます。

質問のスクリーンショットは、画像が読み込まれているがjavascriptは読み込まれていない様に見えます。

1.ファイルの配置(ディレクトリの位置、不足が無いか)を確認してください
2.HEAD部分に以下のコードが入っているか確認してください

<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: 'タイトル1' },
'2.jpg': { caption: 'タイトル2' },
'3.jpg': { caption: 'タイトル3' },
'4.jpg': { caption: 'タイトル4' },
'5.jpg': { caption: 'タイトル5' },
'6.jpg': { caption: 'タイトル6' },
'7.jpg': { caption: 'タイトル7' },
'8.jpg': { caption: 'タイトル8' },
'9.jpg': { caption: 'タイトル9' }
};
var myShow = new Slideshow('show', data, {controller: true, height: 450, hu: 'images/', thumbnails: true, width: 600});
});
//]]>
</script>

3.実際に表示させる(スクリーンショットで写っている)部分は既に記述されていると思いますが、念のために確認してください。

なお、ブラウザ機能の一つの「開発者ツール」を利用すると、リンクのミスやスクリプトのエラーなど、何故表示されないのかが分かる場合があります。

他2件のコメントを見る
id:rouge_2008

※まとめて投稿し直します。

参考ページで紹介(?)しているSlideshowの開発者のページは次のようです。
http://www.electricprism.com/aeron/
※上から4つ目のアイコンをクリックすると、「Slideshow」のページにアクセスできます。
http://www.electricprism.com/aeron/slideshow/

ダウンロードページで必要なファイル(※MooTools含む)をまとめてダウンロードできます。
https://code.google.com/p/slideshow/downloads/list
※どちらでも動作すると思いますので、新しい方をダウンロードするといいです。

動作する「mootools-1.3.2.1-more.js」を確認すると次の記述があります。

// MooTools: the javascript framework.
// Load this file's selection again by visiting: http://mootools.net/more/00aebfac925b03c956ebbcad8266ef49
// Or build this file again with packager using: packager build More/Fx.Elements More/Assets

※MooToolsの公式からダウンロードできる最新のバージョンで試した場合、「mootools-more-1.4.0.1.js」(※「Select All」ですべてにチェックし「Include Compatibility」にもチェック済み)でエラーが出たので確認しました。

http://mootools.net/more/

最新のMooToolsを使用する場合は、上記ページで「Or build this file again with packager using: packager build More/Fx.Elements More/Assets」に従って「More」「Fx.Elements」「Assets」にチェックを入れてダウンロードしてください。

※あるいは次のURLにアクセスしても同じ設定になっています。
http://mootools.net/more/20eb7ad5c24c817549a77df820f19305

最新版のCoreファイルは次のページからダウンロードできます。
http://mootools.net/download
※「with compatibility」で動作するはずです。(「without compatibility」は試していません。)

※画像でも404エラーが発生しているので、開発者が公開している「Slideshow-1.3.*.******.zip」をダウンロードして、「controller-controls.png」と「loader.png」を「css」フォルダに入れておくといいです。

2013/07/04 12:26:25
id:kaji0245

動作しました、ありがとうございます。
wordpressにて埋め込み作業をやってみます<(_ _)>

2013/07/07 13:37:01
id:Yacky No.2

エネゴリ回答回数1374ベストアンサー獲得回数1542013/07/02 13:26:15

ポイント50pt

いろいろと自分で試してみましたがどうも私もできませんでした
なので同じようなスクリプトでほかサイトを調べてみました
http://can-chan.com/hana-slide-menu.html
http://wowslider.com/?gclid=CJbmisnvj7gCFclXpQodczUAw
その他参考リンク
http://www16.big.or.jp/~ogura1/java_scr/int_img_show/int_img_show.html
あと、上記リンクで無理ならhtmlの宣言文を要素の位置など比較的甘い記述ができるTransitional DTDで変えてみてはいかがでしょう?
http://webiti.com/htmltag/html1/post_1/

id:kaji0245

動作しました、ありがとうございます。
wordpressにて埋め込み作業をやってみます<(_ _)>

2013/07/07 13:37:10

コメントはまだありません

この質問への反応(ブックマークコメント)

Twitterでのつぶやき (0)

Twitterでのつぶやきはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません