Lightboxで矢印を常に表示するにはどうすればいいですか？

Lightboxで矢印を常に表示するにはどうすればいいですか？

Lightboxは、ウェブサイトで画像やギャラリーを美しく表示するための、人気のあるJavaScriptライブラリです。画像を拡大表示したり、スライドショーのように閲覧したりすることができます。しかし、デフォルト設定では、マウスカーソルを画像に重ねたときにのみナビゲーション矢印が表示されます。今回は、Lightboxの矢印を常に表示する方法について解説します。

主なオプションの紹介

Lightboxで矢印を常に表示するには、初期化時に `alwaysShowNavOnTouchDevices` オプションを使用します。

スマートフォンなどマウスホバーがないデバイスでナビゲーションを使用したいときには、この値を”true”にしておくとタッチ操作がサポートされたデバイスでは常に左右の矢印が表示されるようになります。

<script>
  lightbox.option({
    'alwaysShowNavOnTouchDevices': true
  });
</script>

オプションの詳細

`alwaysShowNavOnTouchDevices` オプションの詳細を以下の表にまとめます。

オプション名 説明 デフォルト値
alwaysShowNavOnTouchDevices タッチデバイスで常にナビゲーション矢印を表示するかどうか。 false

コード例

以下は、 `alwaysShowNavOnTouchDevices` オプションを使用して、Lightboxの矢印を常に表示する例です。

<!DOCTYPE html>
<html>
<head>
  <title>Lightboxの矢印を常に表示する</title>
  <link rel="stylesheet" href="lightbox.css">
</head>
<body>

<a href="image1.jpg" data-lightbox="gallery">
  <img src="image1_thumb.jpg" alt="画像1">
</a>
<a href="image2.jpg" data-lightbox="gallery">
  <img src="image2_thumb.jpg" alt="画像2">
</a>

<script src="lightbox.js"></script>
<script>
  lightbox.option({
    'alwaysShowNavOnTouchDevices': true
  });
</script>

</body>
</html>

参考資料

  • <a href="https://lokeshdhakar.com/projects/lightbox2/">Lightbox公式サイト</a>

関連QA

Q1: `alwaysShowNavOnTouchDevices` オプションを設定しても矢印が表示されません。

A1: JavaScriptコードが正しく読み込まれているか、`