Lightbox 2の使い方
Lightbox 2のダウンロードからコーディングまで
ホームページを作成していると写真を掲載することが多いと思います。
画像をクリックするとおしゃれな感じでポップアップが起動し、画像が表示されるというものがLightbox2になります。
こんな感じです。
WordPressであれば結構いろいろプラグインが沢山ありますので、プラグインを導入すればいいと思いますが、
今回はWordpressではなくフルスクラッチなどのコーディングでの環境の導入方法になります。
まず公式サイトからファイルをダウンロードします。
ダウンロードし終わったら沢山ファイルが入ってますが、利用するのは
CSS、JS、画像の３つで十分です。
ダウンロードし解凍するとsrcというフォルダがあるのでそれをあけると
css、images、jsというフォルダがあるのでこれをごそっと抜き出します。
まずhead内に
jqueryを設置します。
<script type=”text/javascript” src=”./js/jquery-1.12.3.min.js”></script>
※jqueryは別途ダウンロードまたは公式サイトにリンクが必要です。
続いてCSSも読み込みます
<link href=”./css/lightbox.css” rel=”stylesheet” />
パスは適当に設置してください。
このパスはhtmlのファイルがある場所にcssとimagesとjsというフォルダがあり、
その中にダウンロードしてきたファイルを設置したという設定です。
htmlは
<a href=”images/sample.jpg” data-lightbox=”roadtrip” data-title=”My caption”<img src=”images/smple.jpg” ></a>
となります。
data-lightbox=”roadtrip”
のクラスをつけてやることでこのクラスをつけている画像をカルーセル(ポップアップ後の画像の左右についている矢印)でグループ化できます。
data-title=”My caption”
にテキストを入れることで画像の下にテキストを入れることができます。
クリック前に表示されるのが<img>の写真ですね。
</body>の直前に
<script src=”./js/lightbox.js” type=”text/javascript”></script>
を置きます。
head内に設置するとうまくいかないことがありますのでここに設置します。
以上です！簡単ですよね。
No Comments