前の記事 ≪:オンラインでサクサク画像編集可能な「Picnik」
次の記事 ≫:prototype.jsを使ったJavaScriptでグラフ描画ライブラリ「Plotr」

超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」

2007年02月07日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Programming and Designing for the Web FrogJS Javascript Gallery
FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries.

超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。
以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。



実装方法は、まずスクリプトを読み込みます。

  <script type="text/javascript" src="scripts/prototype.js"></script>
  <script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
  <script type="text/javascript" src="scripts/frog.js"></script>

そして、<div id="FrogJS"></div> の要素をおき、その中に画像タグを入れるだけ。
次に例を示します。

  <div id="FrogJS">
   <a href="images/1.jpg" title="John Doe / SXC.HU">
    <img src="images/1_thumb.jpg" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus. Curabitur a purus. Donec scelerisque, nunc in blandit egestas, justo nulla facilisis ipsum, eu rhoncus nisi sem vel sem. Proin suscipit nulla in nisl. In eget neque." />
   </a>
   <a href="images/2.jpg" title="John Doe / SXC.HU">
    <img src="images/2_thumb.jpg" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus. Curabitur a purus. Donec scelerisque, nunc in blandit egestas, justo nulla facilisis ipsum, eu rhoncus nisi sem vel sem. Proin suscipit nulla in nisl. In eget neque." />
   </a>
  </div>

frog.js がページ読み込み時に自動で初期化してくれるので独自にjavascriptのコードを書いたり埋め込んだりする必要はありません。
このように、実装も非常に簡単で、HTMLもクリーンになります。

prototype.jsを内部にて使っているようです。

関連エントリ

関連の記事検索:JavaScript, スライドショー, Ajax, ライブラリ, photo, 写真
スポンサード リンク

By.KJ : 2007年02月07日 07:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)