みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

contentflowとlightboxについて。

宜しくお願いします。

この度「iquery」というものに手を出すことを決め、「contentflow」を使ってみようと思いました。

最終的にはアドオンである「lightbox」を導入することを目指しています。


ですが、自分はHTMLをかじった程度の知識しかなく、ソースの構成(<head>~</head>など)がなんとなくわかるくらいでしかありません。

ですが、ネットの情報をもとに、なんとかしてソースコードを書いてみました。

が、結果として表示されたのは、黒い帯(背景?)に「Loading」と延々に表示され続けるだけのものでした。

ソースコードはこれです↓

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>試作 </title>

<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
<script tyle="text/javascript">
var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});
</script>

</head>
<body>

<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
      
      <div class="item">
<img class="content" src="pics/pic0.png"/>
<div class="caption">pic0: some stripes</div>
</div>
<div class="item">
<img class="content" src="pics/pic1.png"/>
<div class="caption">pic1: some stripes</div>
</div>

      </div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>


</body>
</html>

ネットで公式とされたcontentflowのサイトからダウンロードしてきたものを解凍し、その中にあったフォルダの「index.html」のソースを参考に↑まで書いてみたのです。

自分としてはこれで正しく表示されるのではないかと思っているのですが、やはり表示されません。


そこで質問なのですが

(1)  上記のソースコードについて、先ほど述べた「Loading」という表示のまま延々とロードし続けてしまうのはどのような原因があると考えられますか?
もしも思い当たる点がありましたら、どうかお手本となるソースコードを書いて頂けないでしょうか?
もしくは、間違っているところや追加した方がよいところを教えて頂けるとありがたいです。


最後に、最終目標である「lightbox」についてです。

ネットで探している限りでは、アドオンを導入する際に具体的にしなくてはならないことが詳しく書かれているところは公式以外にありませんでした。

加えて、公式は英語であり、なんとなくの翻訳でhead内に示されていたソースを書きこむということはわかりましたが、その後具体的な操作は理解できませんでした。

なので、もしも詳しい方がいらっしゃったならば、(1)の質問に加えて、アドオンを導入する際の手順を教えて頂けないでしょうか?



初心者が手を出すには早すぎるものであることは重々承知しているのですが、以前に一度成功したこともあり、なんとかその構造を理解したいと考えています。

どうかご教示のほどよろしくお願い致しますm(_ _)m

投稿日時 - 2013-06-06 22:48:43

QNo.8122679

困ってます

質問者が選んだベストアンサー

提示のソースを使ってローカルで以下のようにテストしたところ動作しました。

ファイル配置
------------
├─test.html(掲載されているソース)
├─ContentFlow(解凍したもの)
│ ├─img
│ └─pics
└pics
  ├pic0.png
  └pic1.png
-------------

変更部抜粋
------------
<script type="text/javascript" src="./ContentFlow/contentflow.js"></script>
<script tyle="text/javascript">
var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});
</script>

</head>
<body>

<div id="contentFlow" class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>

<div class="flow">
      
<div class="item">
<img class="content" src="./pics/pic0.png"/>
<div class="caption">pic0: some stripes</div>
</div>

<div class="item">
<img class="content" src="./pics/pic1.png"/>
<div class="caption">pic1: some stripes</div>
</div>
------

解説:
1行目:
 srcの部分を当方のローカル環境に合わせました。
9行目:(重要)
 「id="contentFlow"」を追加しています。
  このIDが無かったり、4行目の部分と同じにしない場合ローディング状態で止まることを確認しました。
14,19行目:
 srcの部分を当方のローカル環境に合わせました。

投稿日時 - 2013-06-07 19:41:02

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問