iTunes風のイメージギャラリーが作れるJavaScriptライブラリー「ContentFlow」
マウスウィール（トラックパッド）でスクロールすると前後の画像が見れるギャラリー。一目見て「おっ、iTunesだ！」と思いました！JavaScriptとCSSをカスタマイズすればサイトにあった表現の仕方ができます。デフォルトでも充分かっこいいので「JavaScriptはよくわからない..」という人でも簡単に実装できると思います！
↑私が10年以上利用している会計ソフト！
サンプルを用意したので見てみてください。
See the Pen Photo Gallery – ContentFlow by Mana (@manabox) on CodePen.
ダウンロードする
ContentFlowのサイトからファイル一式をダウンロードします
コーディング
外部ファイル
<head>内にダウンロードしたファイルを読み込ませます
<script language="JavaScript" type="text/javascript" src="/sample/js/contentflow.js"></script> <link rel="stylesheet" href="/sample/css/contentflow.css" type="text/css" media="screen" />
JavaScript
オプションはここに追加していきます。デフォルトでも充分かっこいいです！
var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"});
HTML
<div class="loadIndicator"><div class="indicator"></div></div>の中にはギャラリーを読み込むまでのローディング画面が表示されます。<div class="item">の中に画像とキャプションを入れて表示させたいだけ追加していきましょう。
<div id="contentFlow" class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item">
<img class="content" src="/sample/images/contentflow1.jpg"/>
<div class="caption">かわいいお花</div>
</div>
<div class="item">
<img class="content" src="/sample/images/contentflow2.jpg"/>
<div class="caption">チョコレートケーキ</div>
</div>
・
・
・
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider"><div class="position"></div></div>
</div>
</div>
Lightboxと併用するとより動きがでて楽しめると思います！
上記のドキュメントをコピーしてHTMLに記載しても上手く作動しません。
簡単にcontentflowが自作HPに反映されるものなのでしょうか。教えてください。
上記サンプルはうまく動作していますか？画像・ファイルのパスはあっていますか？
[…] → iTunes風のイメージギャラリーが作れるJavaScriptライブラリー「ContentFlow」 | W… Filed under: Rie タグ: どう, ライヴ, 背景 charlie432 03:02 […]
お世話になります。
ContentFlow素晴らしいです。もの凄く欲しく思いますが、java?ってなに？
敷居が高すぎて見えないです。でも、何とかして使いたくて勉強せずに使用する方法をあれこれ考えています。JavaScriptを素人が入力できるソフトは、、ございませんでしょうか？
失礼をお許しください。
free motionでフラッシュをマウス１つで書いた事はあります。
業者に頼むべきでしょうか？ 勇気を出してここに書きます。HPに貼ったらメチャカッコ良いです。よろしくお願いします。
@足立 さん
JavaScriptはHTMLと同様、メモ帳でも記述することができます。
HTMLを書いたことはありますか？
まずは一式をダウンロードして、どのような構造になっているか見てみてください。
その後上記手順で設置できるはず…。
JavaScriptとはなんぞや→ http://piyo-js.com/01.html
ご返事ありがとうございました。htlmは知りませんでした。ご紹介の入門ページから横に広がり複数のページを平行して勉強中で、少し見えてきた気分です。
貴方の力強い言葉
「簡単に実装できると思います！」「設置できるはず…」
勉強嫌いをその気にさせる。感謝です。
泣きの一手、
持前の勘のよさで、単体ではアッサりと動きました。
感動もの。でも自分のHPに書くと動きません。
「外部ファイル
内にダウンロードしたファイルを読み込ませます」
具体的にファイルって何？
表記の文をコピーペースト？ ごめん。おしえて～。
お騒がせしました。
ブラウザーの種類により動いたり見えなかったり警告が出たり、、でした。
既定のレベルで本家ContentFlowも上手く表示されないパソコンもありました。
動けば素晴らしいので業者を探します。