新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ライトボックス(LIGHTBOX)最新版(v2.8.2)の設置方法

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

先日、ライトボックス(Lightbox)の記事を書いた際にちゃんとした設置手順をまとめておきますといったので書きました。
ライトボックス最新版(v2.8.2)の設置方法です。

標準モードと互換モードについて:HTMLタグ辞典 - HTMLタグボード

スポンサーリンク
 

  1. 何はともあれまずは必要ファイルのダウンロードからです。
    以下のサイトの「DOWNLOAD」をクリックしてZIPファイルをダウンロードして解凍します。
    Lightbox
  2. 解凍すると結構なファイルの数になるのですが必要なファイルは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とファイルと同じディレクトリに展開したとして以下、説明続けます。

  3. 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>の直前に書いています。

  4. 対象の画像をLIGHTBOXの対象にします。ページ内に表示させる小さな画像に大きな画像をリンクさせ、その<a>タグに「data-lightbox」という属性を与えるだけで使えるようになります。
    例)

    <a href=”img/oyoyo_l.png” data-lightbox=”output”><img src=”img/oyoyo_s.png” ></a>
  5. data-lightbox属性を共通にするとグループ化。LIGHTBOXで開いたウインドウを閉じずにまとめて画像を閲覧することができます。
    また、<a>タグに「data-title」という属性を加えると、その属性値がキャプションとなり、LIGHTBOXが開いた時に写真の下に表示されるようになります。

以上、非常に簡単です。

以前のバージョンではLIGHTBOXのJSファイルの読み込みタグ<script>を<head>内に書いても動いていましたが、最新バージョンではそれでは動かないので注意しましょう。

 - Webデザイン, プログラミング , , ,

アドセンス広告メイン

Comment

  1. ブランドコピー時計N級品

    ブランドコピー※ブランドコピー専門店、ロレックス、ルイ・ヴィトン、ウブロ、カルティエ
    フランク・ミュラーなどの新品
    、商品は100%の品質保証。専門ショップ・時計一」
    「お客様第一」という信念を持ち、弊社は商品の値段を安く提供することに成功したため、
    皆様を楽しくお買い物いただけるよう、心を込めて最高なブランドコピー品をご提供
    海外ブランドコピーのブランドコピー
    ブランドコピー時計、貴金属の(リサイクル品)のブランドコピー販売・買取

    ホームページ上でのご注文は24時間受け付けております

Message

メールアドレスが公開されることはありません。

  関連記事

「HTML5」「CSS3」「ActionScript3.0」

1年以上前の記事です。内容が古い可能性があります。近頃はディレクション業にかまけ …

no image
Flash漬け

1年以上前の記事です。内容が古い可能性があります。ここ数日、WebというよりもF …

no image
自社のHP

1年以上前の記事です。内容が古い可能性があります。自社のホームページを現在作成中 …

WordPressをhttps(SSL)化、さくらインターネットのレンタルサーバーでリダイレクトループさせない「.htaccess」の書き方【後編】

1年以上前の記事です。内容が古い可能性があります。以下の続きとなります。 Wor …

WordPressでプレビューが見れなくなったらプラグイン「WP File Cache」「WP Super Cache」を無効化→有効化

1年以上前の記事です。内容が古い可能性があります。当ブログ、WordPressで …

no image
うちわ祭とインターネット

1年以上前の記事です。内容が古い可能性があります。その他の「うちわ祭」関連記事& …

CSS2.1まとめ書き-border編(HTML・CSSリファレンス)

1年以上前の記事です。内容が古い可能性があります。CSS2.1まとめ書きとしてい …

no image
「簡易BBS2000」にファイル情報漏えいの脆弱性

1年以上前の記事です。内容が古い可能性があります。マジですか? これベースの簡易 …

ライブドアブログで公式ツイートボタンを完全対応

1年以上前の記事です。内容が古い可能性があります。昨日の記事の続きとして読んでく …

Yahoo!ジオプラスで送信フォームが動かない

1年以上前の記事です。内容が古い可能性があります。ずいぶん前にplot-fact …

血液型オヤジ