画像をかっこよく魅せる?ライブラリ


3DCGやってたからよくわかるんですが、
CGってアップして単に見せるのって、なんかチョット。。。
と思いがちなんですよね。

別にふとしたことからこんなライブラリを見つけたのですが、
ひさしぶりに3DCGやってみたくなったんでついでに書いてみよう。

Smoothy Gallery

http://smoothgallery.jondesign.net/what/

GPLライセンスです。

使い方
1:とりあえず落としてきてください
2:全部解凍して 適当なところに全部アップする。
3:表示したいHTML部分にこんなかんじで記載

・まずはインクルード
<head></head>のとこに下記を追加

<script src=”scripts/mootools.js” type=”text/javascript”></script>
<script src=”scripts/jd.gallery.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”css/jd.gallery.css” type=”text/css” media=”screen” />

パスはインストールフォルダにあわせてください。

・画像部分

  <div id=”myGallery”>
    <div class=”imageElement”>
      <h3>画像のタイトル</h3>
        <p>画像の説明</p>
        <a href=”URL” title=”open image” class=”open”></a>  //クリックしたとき表示する画像(HTMLでも)のリンク
        <img src=”images/brugges2006/1.jpg” class=”full” />  //画像本体のURL
        <img src=”” class=”thumbnail” />  //サムネイルがあるならそれを使う(なくてもブランクのまま書いておく)
    </div>

    //ここから
    <div class=”imageElement”>
      <h3>画像のタイトル2</h3>
        <p>画像の説明</p>
        <a href=”URL” title=”open image” class=”open”></a>  //クリックしたとき表示する画像(HTMLでも)のリンク
        <img src=”images/brugges2006/1.jpg” class=”full” />  //画像本体のURL
        <img src=”” class=”thumbnail” />  //サムネイルがあるならそれを使う(なくてもブランクのまま書いておく)
    </div>
    //ここまで

      ・以下 ここから~ここまでの間をコピーして画像をペタペタ
  </div>

・画像制御部分

  <head></head>のとこに下記を追加
  <script type=”text/javascript”>
     function startGallery() {
        var myGallery = new gallery($(‘myGallery’), {
                     timed: true,
                     showArrows: true,
                     showCarousel: false,
                     embedLinks: false
        });
     }

  window.onload=function(){
     startGallery();
  }
  </script>

以下説明

(true か false で設定する)
  timed: true  //trueの場合時間で自動的に画像がつぎにいくようになる
  showArrows: true  //trueの場合画像の横にマウスを宛てると矢印がでて、次の画像に進むボタンが表示される
  showCarousel: false  //trueの場合画面上に一覧表示バーが表示される
  embedLinks: false  //trueの場合画像をクリックすると指定のURLに飛ぶ

これでできるはずです。


Leave a Reply