[jQuery]Lightbox2の導入メモ

今更感はある。

ざっくり作例
装飾について
まとめ的なもの

ざっくり作例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css">
</head>
<body>
    <a href="https://placehold.jp/1280x1280.png?text=01" data-lightbox="simple-group01" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=01" alt=""></a>
    <a href="https://placehold.jp/1280x1280.png?text=02" data-lightbox="simple-group01" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=02" alt=""></a>
    <a href="https://placehold.jp/1280x1280.png?text=03" data-lightbox="simple-group01" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=03" alt=""></a>
    <a href="https://placehold.jp/1280x1280.png?text=04" data-lightbox="simple-group01" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=04" alt=""></a>
<br>
    <a href="https://placehold.jp/1280x1280.png?text=05" data-lightbox="simple-group02" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=05" alt=""></a>
    <a href="https://placehold.jp/1280x1280.png?text=06" data-lightbox="simple-group02" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=06" alt=""></a>
    <a href="https://placehold.jp/1280x1280.png?text=07" data-lightbox="simple-group02" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=07" alt=""></a>
    <a href="https://placehold.jp/1280x1280.png?text=08" data-lightbox="simple-group02" data-title="" data-alt=""><img src="https://placehold.jp/40x30.png?text=08" alt=""></a>
</body>
</html>

オプション的なものは不要で、jsとcssを読み込めば済む。

data-lightboxの値でグループ分け。
data-titleの値でタイトル挿入。
data-altは視覚的に影響なし。

装飾について

デザイン関係の設定は各自でやっていくことになる。既存のcssを上書きする感じ。

cdnだったら元ファイルはいじれないので、親要素ごと指定するとか!importとかを使う。

そのままでもいいっちゃいいけど黒背景が嫌だとか、白枠が嫌だとか、まあ、何かしらあったりするでしょう。

まとめ的なもの

導入が楽だから使う程度で留めておいた方がいい。

色々やりたかったら他のものを使った方がいい。

そんなかんじで。