Lightview の方が Thickbox よりかっこいいかも？

WEB制作 JavaScript

Lightview がかなりカッコいい感じ。

早速ためしに使ってみることにする。

Prototype.js と Scriptaculous.js の圧縮バージョンを使ってみる

Lightview.js の動作には、Prototype.js と Scriptaculous.js が必要なのだけど、そのままだとページロードが遅くなりそうなので、圧縮バージョンを使ってみることにする。

  • lightview1.1.0 をダウンロード
  • Protopacked をダウンロード（ protopacked_v2.18.zip というファイル）
  • 解凍したフォルダの中から protopacked_v2.18 Folder/files/compressed/protoculous/version (1.6.0.2 + 1.8.1) /protoculous-effects-packer.js を使ってみる

ヘッダーにスクリプトを追加

<script type='text/javascript' src='js/protoculous-effects-packer.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>

無事に動作した。

サンプル

BlueprintCSS と併用の際に不具合を発見

CSS フレームワークの BlueprintCSS との併用時にスタイル指定の衝突が起こるようだ。
調べたところ、BlueprintCSS の plugins/css-classes/css-classes.css 内の以下の２行が原因だとわかった。lightview.css の方では float を多用しているのでこれが問題になるようだ。

.left   { float:left; }
.right  { float:right; }

回避策として、plugins/css-classes/css-classes.css の方をコピーして plugins/css-classes/my_css-classes.css とした上で、以下の２行をファイルの最後に追加してみたところ、どうやら不具合を解消できた模様。

#lightview .left   { float:none; }
#lightview .right  { float:none; }