サーバ機を購入したはいいが、何をしたらいいのかアイディアが無いときに参照するページ
現在使っている、または今後使えそうなJavaScript一覧です。
The Lightbox Clones Matrixから、テストしたことがあるやつだけ並べています。
| スクリプト名 | 画像 | HTML | SWF | ムービー | ライブラリ | JS | CSS |
|---|---|---|---|---|---|---|---|
| jQuery lightBox plugin | X | – | – | – | jQuery | 2 | 1 |
| Lightbox | X | – | – | – | Scriptaculous, prototype.js | 3 | 1 |
| Slimbox | X | – | – | – | mootools | 2 | 1 |
| Slimbox2 | X | – | – | – | jQuery | 2 | 1 |
| ThickBox | X | inline,iframe | X | – | jQuery | 2 | 1 |
| Fancybox | X | inline,iframe | – | – | jQuery | 2 | 1 |
| Lightwindow | X | inline,iframe,form,外部URL | X | X | Scriptaculous, prototype.js | 3 | 1 |
| Shadowbox | X | inline,iframe,form,外部URL | X | X | Scriptaculous, prototype.js | 2 or 3 | 1 |
| Fancy Zoom | X | inline | X | – | jQuery | 2 | 1 |
| VideoBox | – | – | X | – | mootools | 3 | 1 |
| MopBox | X | DIV | X | X | jQuery | 6 | 1 |
| jQuery lightBox plugin | LightboxをjQuery化したもの。オリジナルより軽快に動作し、読み込みファイルも少なくできている。 |
|---|---|
| Lightbox | ここが全ての始まり。JSライブラリを2つも読み込むため、使い勝手はいいが、この中では一番動作が重い。ブログなどのシステムに導入するにはちょっと考える。 |
| Slimbox | Lightboxと同じ外観を保ちつつ、軽いmotoolsライブラリをベースにしたものです。 WordPressプラグイン |
| Slimbox2 | Slimboxの改良版、ライブラリもjQueryに最適化されている。 |
| ThickBox 1) | 余計なエフェクトは全部カット、一瞬で画像が表示されます。ウィンドウ外側の太い枠が特徴でThick(=太い), Box(=ボックス)と呼ばれる。別途HTMLファイルを読み込んで表示させることができる。WordPressなどの管理画面に導入されている。 |
| Lightwindow | ロードエフェクトは最初のみ。最初から多種多様なメディア形式に対応しているので、画像とそれ以外のものをポップアップウィンドウで表示しているサイトに最適といえる。 |
| Shadowbox | Lightwindowに似ているが、外観のカスタマイズが容易。FLVムービープレーヤーも標準で付属。ボックスの外も中身も真っ黒なので「シャドウボックス」と呼ばれる。WordPressプラグインも提供されており、ブログにも便利。 |
| Fancy Zoom (jQuery) | アップルのWebサイトで使われているようなズームウィンドウを、jQueryで再現したものだそうです。画像のほか、テキストやFLASHも表示できます。 |
| VideoBox | SWFファイルのみの埋め込みが可能な、ある意味特殊な奴。外観はLightbox, Slimboxと変わらない。 （レイヤーがSWFの下に隠れる現象の解決策） |
共通ライブラリを利用する
例えば、SlimBoxとVideoBoxはそれぞれ画像とSWFしか表示できない。が、両方ともmootoolsライブラリを使用しているので同時にインストールするのに2倍の容量はかからない。それぞれ使用しているmootoolsライブラリのバージョンが違っていればダブルで入れるしかないのだが。
結果、画像とSWFを表示できるようになり、Lightwindowに対抗できる。mootoolsは元から軽いライブラリなので、読み込みも楽だ。動画は全部flvにすれば対応できるだろう。
| スクリプト名 | ライブラリ | 埋め込み | URL |
|---|---|---|---|
| Gallerific | jQuery | Javascript x2, CSS x1 | 公式サイト |
| Featured Content Slider v2.4 | 独自 | Javascript x1, CSS x1 | 公式サイト |
| SmoothGallery 2.1dev | MooTools | Javascript x2, CSS x1 | 公式サイト |
| Easy Slider 1.5 | jQuery | Javascript x2, CSS x1 | 公式サイト |
| A Simple jQuery Slideshow | jQuery | Javascript x1, CSS x1 | 公式サイト |
jQuery Flash Plugin (→URL)
<embed>タグとjQueryを組み合わせた埋め込み。どういうメリットがあるのかが分からない。
グーグルマップがAPI制限を発表したので、他のマップも検討してみようと思う。（参照リンク）
<code php><?php echo "Hello, World!"; ?>
<pre class="brush:php">echo "Hello, World!";</pre>
<pre><?php echo 'Hello, World!'; ?></pre>