HOME > >

Lightbox JS

Lightboxとは?

画像をレイヤー表示のようにカッチョよく開いてくれるスクリプト。チュートリアルとかに使うといいカンジ。色々とバージョンがあってスライドショーにできるものやrel属性無しでもOKなものなど色々と出回ってます。

Lightbox JS

恐らくコレが一番最初に世に出たもの?一番シンプルで使いやすいです。

lightbox JS サンプル

使い方

使い方はいたって簡単。javascriptファイルとcssファイルを読み込んで 表示画像へのリンクを作成。aタグに rel="lightbox"を追加するだけ。

HTML
  1.  
  2.  /* head 内でjavascriptファイルとCSSファイルの読み込み */
  3.  
  4.  <script type="text/javascript" src="lightbox.js"></script>
  5.  <link href="lightbox.css" rel="stylesheet" type="text/css" />
  6.  
  7.  /* aタグにrel="lightbox"属性の追加 */
  8.  
  9.  <a href="lightbox_01.jpg" rel="lightbox"><img src="lightbox_01.jpg" width="150" height="199" /></a>
Lightbox JS関連サイト

Lightbox JS v2.0

複数の画像をスライドショー形式で開くことができます。

参照サイト

MySQL全機能バイブル ~現場で役立つAtoZ~

作者:鈴木 啓修 | 価格:¥ 3,675

PAGE RANK
TIME LINE
2012
05.16

XMLHttpRequestってUserAgentを変更できないのかorz

セキュリティ的に禁止してるんだろうけどChromeでは出来ないのか、そもそもJavascriptの仕様として禁止されてるのかは不明。

2012
05.10

[PHP]文字列を1文字ごとタグで囲む

PHPで文字列を1文字ごとタグで囲みたいとき。

2012
04.25

WebフォントとJavascript

WebフォントとjQueryのテキストエフェクトプラグインを試してて気がついたんだけど API経由でWebフォント取得、設定してるとJavascriptの実行が早すぎて困るw

2012
04.12

[Ubuntu11.10]インストール直後にやっておけばよかったこと

Ubuntu 11.10 Desktop 日本語 Remixの場合、ユーザーのホームディレクトリにあるディレクトリ名が 日本語なのでターミナルでディレクトリ移動する場合、非常に扱いづらい。

2012
04.11

シンプルでカスタマイズしやすそうなコンテンツスライダー jQuery Slider2

シンプルでカスタマイズしやすそうなコンテンツスライダー jQuery Slider2

2012
04.06

CORESERVERからロリポのチカッパプランに移転してFTPとおさらばした。

CakePHP2系はPHPのバージョンがシビアなので、CORESERVERからロリポの チカッパプランに移転したんだけど、gitが利用できてなんだか得した気分です。

2012
04.04

[CakePHP2.0.x]FormHelper::input()の出力メモ

FormHelper::input()の出力がどのくらい変更できるかのテスト。

2012
03.28

[CSS]WindowsでLESS更新時に自動でコンパイルする設定方法

Windowsで.lessファイル更新と同時にコンパイルしてCSSを書き出す方法を2つほど。 簡単に開発環境を構築するためUbuntu入れたのに、Windowsの方が簡単だったりするから困るw

2012
03.27

[CSS3/HTML5]ページタイトルとかに使えそうな3Dっぽいテキストエフェクト

Code Padよりタイトルとかに使えそうなテキストエフェクト。それほどゴテゴテしてなくていい感じ。