JavaScript LightBox JSの使い方画像の拡大表示－ Esprit's Style －エンジニアの足つぼ

LightBoxを使ってみよう！

〆おしゃれな画像表示JavaScript LightBox JS

右のサムネールをクリックしてみてください。
ウィンドウ上におしゃれな拡大画像を表示する Lightbox JS です。
設置方法は簡単。このURLからファイルをコピーして
HTMLのヘッダーに少し追記するだけ。

※LightBoxとまったく同じことができるツールにSlim Boxというのもあります。
使ってみましたが見た目は変わりませんでした。
SlimBox作者のページには以下の特徴があると書かれていました。
　・LigthtBoxは一回目の画像表示に時間がかかるが、SlimBoxはあらかじめロードしてるので表示が速い。
　・Slimboxは、矢印キーで移動が可能。(LightBoxはできない)
　・背景の黒い部分をクリックすると画面が閉じる(LightBoxもできるので同じ)
　・ファイルサイズが小さいようです。
SlimBoxではアニメーションのスピード設定できませんがバグの少なさ、CSSクラックを利用していない等を
考慮するるとSlimBoxもよさそうです。
※CSSでお手軽にやるのはこちらから。

@lightbox2.03.?\js\lightbox.js 65行目あたりをフルパスに変更！

//
//	Configuration
//
var fileLoadingImage = "lightbox2.03.?/img/loading.gif";
var fileBottomNavCloseImage = "lightbox2.03.?/img/closelabel.gif";

@lightboxsample.html

<head><title>....</title>
<link href="../lightbox2.03.?/css/lightbox.css" rel="stylesheet"
 type="text/css" media="screen" />
<script type="text/javascript" src="../lightbox2.03.?/js/prototype.js">
</script>
<script type="text/javascript" src="../lightbox2.03.?/js/scriptaculous.js?load=effects">
</script>
<script type="text/javascript" src="../lightbox2.03.?/js/lightbox.js">
</script>
</head>

<body>

･･･

<a href="big001.jpg" rel="lightbox" title="LightBox Title">
    <img src="thumbnail001.jpg" />
</a>

･･･

</body>

Animation.Cubeを使ってみよう！

〆おしゃれな３次元画像表示JavaScript Animation.Cube

オリジナルのJavascript提供元はこちら.

@animation_cube.html

<header>
<title></title>
･･･
  <script type="text/javascript" src="./Cube.js"></script>
  <script type="text/javascript" src="./cube-demo.js"></script>
</header>

<body>
･･･
  <img id="cube_area" src="./photo001.jpg">
  <form action="">
    <p>
      <input type="button" onClick="cube_retry();" value="開始" />
      <input type="button" onClick="cube_stop();" value="停止" />
    </p>
  </form>
･･･
</body>