人力検索はてな
ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら
i-mobile
以下のｻｲﾄを参考にｽﾗｲﾄﾞｼｮｰを作製したのですが､画像のようになってしまいます｡
http://myisland.jp/template/tips/gallery/gallery04/index.html
そのまま､ｺｰﾄﾞをｺﾋﾟﾍﾟしたのですがうまくいきません｡
ｱﾄﾞﾊﾞｲｽ方お願いします<(_ _)>

1372698183
●拡大する
●質問者: kaji0245
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件
▽最新の回答へ
▽1 ● ぽけっとしすてむ
●50ﾎﾟｲﾝﾄ ﾍﾞｽﾄｱﾝｻｰ

うｰん
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.実際に表示させる(ｽｸﾘｰﾝｼｮｯﾄで写っている)部分は既に記述されていると思いますが､念のために確認してください｡

なお､ﾌﾞﾗｳｻﾞ機能の一つの｢開発者ﾂｰﾙ｣を利用すると､ﾘﾝｸのﾐｽやｽｸﾘﾌﾟﾄのｴﾗｰなど､何故表示されないのかが分かる場合があります｡

kaji0245さんのｺﾒﾝﾄ
index.htmlは以下の記述です｡ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ﾌｫﾄ ｷﾞｬﾗﾘｰ ｻﾝﾌﾟﾙ #04</title> <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> </head> <body> <div id="show" class="slideshow"> <img src="images/1.jpg" alt="写真画像のﾀｲﾄﾙ" /> </div> </body> </html>
ぽけっとしすてむさんのｺﾒﾝﾄ
動くｻﾝﾌﾟﾙと実際に紹介されているｻﾝﾌﾟﾙｺｰﾄﾞの記述が若干違いますね｡ >| <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> |< この部分を >| <script type="text/javascript" src="http://myisland.jp/template/gallery/gallery04/js/mootools-1.3.2-core.js"></script> <script type="text/javascript" src="http://myisland.jp/template/gallery/gallery04/js/mootools-1.3.2.1-more.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> |< このように書き換えると動きます｡ mootools.jsのﾊﾞｰｼﾞｮﾝ問題かと思われます｡ ※実際に使用する場合は､上記のようなﾘﾝｸではなく､手元にｺﾋﾟｰをする必要があります｡
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｣ﾌｫﾙﾀﾞに入れておくといいです｡
kaji0245さんのｺﾒﾝﾄ
動作しました､ありがとうございます｡ wordpressにて埋め込み作業をやってみます<(_ _)>
▽2 ● ｴﾈｺﾞﾘ
●50ﾎﾟｲﾝﾄ

いろいろと自分で試してみましたがどうも私もできませんでした
なので同じようなｽｸﾘﾌﾟﾄでほかｻｲﾄを調べてみました
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/

kaji0245さんのｺﾒﾝﾄ
動作しました､ありがとうございます｡ wordpressにて埋め込み作業をやってみます<(_ _)>
関連質問
●質問をもっと探す●

0.人力検索はてなﾄｯﾌﾟ
8.このﾍﾟｰｼﾞを友達に紹介
9.このﾍﾟｰｼﾞの先頭へ
□対応機種一覧
□お問い合わせ
□ﾍﾙﾌﾟ/お知らせ
□ﾛｸﾞｲﾝ
□無料ﾕｰｻﾞｰ登録
□はてなﾄｯﾌﾟ