Lightboxを使う

Lightboxを使う場合のヘッダー追加(共通)

実は、ご提供するホームページのベースシステムの一つ【Luxeritas】には、PCの画像ビューアのように、画面全体で画像拡大&スライドショーを実現する「Tosrus」というJSが実装されており、選択することが出来ます。

下記のどの画像でもクリックしてみて下さい。

その結果表示されるものが「Tosrus」の動作です。

おじゃみ
おじゃみ
だるま
だるま
柴犬
柴犬

この動作自体がLightboxと言えるのですが、そうではなくて、従来のようにはっきりとした一定サイズのBoxに拡大画像を表示し、スライドもできるという本来のLightboxを置きたい場合にお使いください。

使いたいページの投稿画面の「追加ヘッダー」欄(投稿欄のすぐ下)に下記コードを追加してください。

header.phpをいじる必要はありませんから便利ですね。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" integrity="sha256-iU/Wh1HMAs/NgpurDAu14e7S3FkllcJ5aPnpPDdnO6c=" crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js" integrity="sha256-9r7DHolfe5aoH+bUj4FEqRBq2tmaIXBxOYUZFalCjSE=" crossorigin="anonymous"></script>

Lightboxを使ったhtml記載例

<div id="card-3">
<div class="al-c aqua toc clearfix">
<a href="https://e-littlefield.com/trinity/images/gallery/001ojami_tr.jpg" data-lightbox="group01" data-title=" おじゃみ "><img src="https://e-littlefield.com/trinity/images/gallery/001ojami_tr-200.jpg" width="200" height="150" alt="おじゃみ"></a><br>おじゃみ
</div>
<div class="al-c aqua toc clearfix">
<a href="https://e-littlefield.com/trinity/images/gallery/002daruma_tr.jpg" data-lightbox="group01" data-title=" だるま "><img src="https://e-littlefield.com/trinity/images/gallery/002daruma_tr-200.jpg" width="200" height="150" alt="だるま"></a><br>だるま
</div>
<div class="al-c aqua toc clearfix">
<a href="https://e-littlefield.com/trinity/images/gallery/003shibainu_tr.jpg" data-lightbox="group01" data-title=" だるま "><img src="https://e-littlefield.com/trinity/images/gallery/003shibainu_tr-200.jpg" width="200" height="150" alt="柴犬"></a><br>柴犬
</div>
</div>

3段組の画像の例ですが、どの画像をクリックしても拡大表示枠に表示され、そこを起点にして前後にスライドショーで見ることが出来ます。

「Tosrus」との違いがお分かりいただけると思います。

おじゃみ
おじゃみ
だるま
だるま
柴犬
柴犬

画像部の記述の仕方

<a href="拡大画像のURL" data-lightbox="グループ名" data-title="画像のタイトル"><img src="通常表示画像のURL" width="画像幅" height="画像高さ" alt="代替テキスト"></a>

単に拡大画像にリンクする場合と構成は同じですが、リンクタグに【data-lightbox=”グループ名” data-title=”画像のタイトル”】を付け加えるだけと覚えておけば便利です。

グループ名
同じスライドショーで表示される参加者のグループで、グループ名が違えば、同じスライドショーでは表示されません。
画像のタイトル
拡大表示枠の左下部にテキストで表示されます。