未熟な甲虫の呟き

創作小説サイト「あわいを往く者」附属ブログ。(サイト掲載小説一覧書籍のご案内
   

Lightbox2 覚え書き

 サイトで使用している Lightbox2 の覚え書きです。
 以前、同系統のスクリプトを見よう見まねで導入していたのですが、私があまりにもヘッポコなために上手く使いこなすことができず、スマホでの挙動が怪しかったり、画像表示サイズの調整が上手くいかなかったり、と困ってたんですよね……。

 今回、本家本元の Lightbox2 に挑戦し無事成功したのでメモを残しておきます。例えば何らかの原因で一からサイトを構築しなければならなくなったとして、その時にスムーズに設置し直せるように。いかんせん私、見事なトリアタマなので……恐るべき物覚えの悪さ。

◆Lightbox2 の配布サイト
https://lokeshdhakar.com/projects/lightbox2/

(1) Getting started にあるとおり、Github Releases page から ZIPファイルをダウンロード、解凍します。
 「.github」「dist」「examples」「src」の4つのフォルダと10余りのファイルが出てきますが、使用するのは「dist」フォルダにあるファイルです。

(2) 「dist」フォルダの中、「images」フォルダ内の4つの画像ファイル「close.png」「loading.gif」「next.png」「prev.png」を自サイトの任意の場所にコピーします。

(3) 「dist」フォルダの中、「js」フォルダ内のスクリプトファイル「lightbox-plus-jquery.js」を自サイトの任意の場所にコピーします。

(4) 「dist」フォルダの中、「css」フォルダ内のスタイルシート「lightbox.css」を自サイトの任意の場所にコピーし、テキストエディタで (2)の画像ファイルのパスを自サイトのものに変更します。
 (close.png:189行目、loading.gif:76行目、next.png:125行目、prev.png:107行目)

(5) Lightbox機能を使用したいHTMLファイルのヘッダに
<link rel="stylesheet" type="text/css" href="【(4)のlightbox.cssのパス】" />
<script type="text/javascript" src="【(3)のlightbox-plus-jquery.jsのパス】"></script>
を追加し、画像のサムネイルを表示させる場所に
<a href="【サムネイルをクリックした時に表示する画像のパス】" data-lightbox="【画像をグループ化するためのラベル】" data-title="【画像の下に表示させるタイトル】">
  <img src="【サムネイル画像のパス】" alt="【サムネイル画像の代替テキスト】" width="【サムネイル画像の横幅】" height="【サムネイル画像の高さ】">
</a>
と記します。

 これで作業は終わりです。
拍手
 

同じカテゴリの記事

 

コメント

コメントの投稿

※スパムコメント対策実施中。メールアドレス及び「@」は入力しないでください。
 ブログ管理者以外には秘密にする

トラックバック

TrackbackUrl:https://greenbeetle.blog.fc2.com/tb.php/1059-8d620978
この記事にトラックバックする(FC2ブログユーザー)
 
 

新着

■コメント
2021/01/14:GB(那識あきら)
2021/01/12:へい
2018/09/07:GB
2018/09/07:冬木洋子
2017/11/30:GB
■トラックバック
2010/09/05:はやぶさが来るよ!

書籍

『リケジョの法則』表紙
『リケジョの法則』
¥647+税
発行:マイナビ出版

電子書籍近刊

『工作研究部の推理ノート 七不思議を探せ』表紙
『工作研究部の推理ノート 七不思議を探せ』
¥550
発行:パブリッシングリンク

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします