3DCGやってたからよくわかるんですが、
CGってアップして単に見せるのって、なんかチョット。。。
と思いがちなんですよね。
別にふとしたことからこんなライブラリを見つけたのですが、
ひさしぶりに3DCGやってみたくなったんでついでに書いてみよう。
Smoothy Gallery
http://smoothgallery.jondesign.net/what/
GPLライセンスです。
使い方
１：とりあえず落としてきてください
２：全部解凍して 適当なところに全部アップする。
３：表示したい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>画像のタイトル２</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に飛ぶ
これでできるはずです。
