ライトボックス（LIGHTBOX）最新版（v2.8.2）の設置方法
1年以上前の記事です。内容が古い可能性があります。
先日、ライトボックス（Lightbox）の記事を書いた際にちゃんとした設置手順をまとめておきますといったので書きました。
ライトボックス最新版（v2.8.2）の設置方法です。
- 何はともあれまずは必要ファイルのダウンロードからです。
以下のサイトの「DOWNLOAD」をクリックしてZIPファイルをダウンロードして解凍します。
□ Lightbox - 解凍すると結構なファイルの数になるのですが必要なファイルはdist内の以下のファイルのみです。
css/lightbox.min.css
js/lightbox.min.js
img/close.png
img/loading.png
img/next.png
img/prev.png画像が4つ、CSSが1つ、JSが1つ。つまりは使用するJSは一つだけなんです。
これを、LIGHTBOXを導入するHTMLとファイルと同じディレクトリに展開したとして以下、説明続けます。 - JS埋め込みのタグをHTMLに書き込みます。
JSは一つと書きましが、実際はJQueryのライブラリを使うので厳密には二つになります。
が、これはGoogleなどにあるフリーのもので賄ってしまいましょう。
注意点は<head>内と<body>内とで分けて記述しなければならないところです。- <haed></head>内に
<link rel=”stylesheet” href=”css/lightbox.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script> - <body></body>内に←ここが変わった！
<script src=”js/lightbox.min.js”></script>
自分の場合は閉じタグ</body>の直前に書いています。
- <haed></head>内に
- 対象の画像をLIGHTBOXの対象にします。ページ内に表示させる小さな画像に大きな画像をリンクさせ、その<a>タグに「data-lightbox」という属性を与えるだけで使えるようになります。
例）<a href=”img/oyoyo_l.png” data-lightbox=”output”><img src=”img/oyoyo_s.png” ></a> - data-lightbox属性を共通にするとグループ化。LIGHTBOXで開いたウインドウを閉じずにまとめて画像を閲覧することができます。
また、<a>タグに「data-title」という属性を加えると、その属性値がキャプションとなり、LIGHTBOXが開いた時に写真の下に表示されるようになります。
以上、非常に簡単です。
以前のバージョンではLIGHTBOXのJSファイルの読み込みタグ<script>を<head>内に書いても動いていましたが、最新バージョンではそれでは動かないので注意しましょう。
アドセンス広告メイン
関連記事
-
-
ワードプレス（WordPress）の記事に簡単に地図や動画を貼り付ける「ショートコード」 #wp
1年以上前の記事です。内容が古い可能性があります。ショートコードって知ってますか …
-
-
カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 3 – テンプレート編集の巻 【ワードプレス】 #wp
1年以上前の記事です。内容が古い可能性があります。1. Custom Field …
-
-
mixiを上回るコンテンツを。
1年以上前の記事です。内容が古い可能性があります。昨日の東京での打ち合わせの一コ …
-
-
台風接近!!
1年以上前の記事です。内容が古い可能性があります。台風直撃の中、都内まで打ち合わ …
-
-
検索エンジンを作ろう
1年以上前の記事です。内容が古い可能性があります。そろそろ限界が見えてきた。
-
-
バトンで集客
1年以上前の記事です。内容が古い可能性があります。一歩間違えればスパムとさほど変 …
-
-
一度見たFlashを見せない方法 2
1年以上前の記事です。内容が古い可能性があります。□一度見たFlashを見せない …
-
-
ごぶさた
1年以上前の記事です。内容が古い可能性があります。打ち合わせで二日ほど飛び回って …
-
-
WordPressでテーマカスタマイズ、ヘッダー（header.php）、フッター（footer.php）で消してはいけないプログラム #wp
1年以上前の記事です。内容が古い可能性があります。自分でカスタマイズしたWord …
-
-
クラスは自作できる（ActionScript3.0勉強中! #4）
1年以上前の記事です。内容が古い可能性があります。「オブジェクト指向プログラミン …
Comment
ブランドコピー時計N級品
ブランドコピー※ブランドコピー専門店、ロレックス、ルイ・ヴィトン、ウブロ、カルティエ
フランク・ミュラーなどの新品
、商品は100％の品質保証。専門ショップ・時計一」
「お客様第一」という信念を持ち、弊社は商品の値段を安く提供することに成功したため、
皆様を楽しくお買い物いただけるよう、心を込めて最高なブランドコピー品をご提供
海外ブランドコピーのブランドコピー
ブランドコピー時計、貴金属の（リサイクル品）のブランドコピー販売・買取
ホームページ上でのご注文は24時間受け付けております