AstroでLightboxを使いたい！本文で！：2025年12月25日追記

1
<script is:inline>
2
  document.addEventListener('astro:after-swap', () => {
3
    if (typeof window === 'undefined' || typeof document === 'undefined') {
4
      return; // サーバーサイドでは実行しない
5
    }
6

7
    if (typeof window.LuminousGallery === 'undefined') {
8
      return; // LuminousGalleryが利用できない場合は何もしない
9
    }
10

11
    const triggers = document.querySelectorAll('.luminous-trigger');
12
    if (triggers.length > 0) {
13
      new LuminousGallery(triggers);
14
    }
15
  });
16
</script>

1
<script is:inline>
2
  // まとめて一つの関数にする
3
  function setupLuminous() {
4
    if (typeof LuminousGallery === 'undefined') return;
5

6
    const triggers = document.querySelectorAll('.luminous-trigger');
7
    if (triggers.length > 0) {
8
      new LuminousGallery(triggers);
9
    }
10
  }
11

12
  // 「初回」と「遷移後」の両方に対応するイベント
13
  document.addEventListener('astro:page-load', setupLuminous);
14
</script>

1
<script is:inline data-astro-rerun>
2
    // Luminous本体のJSがロードされたことを確実に確認
3
    function getLuminousGallery() {
4
      if (typeof window.LuminousGallery !== 'undefined') {
5
        return window.LuminousGallery;
6
      }
7
      return undefined;
8
    }
9

10
    // Luminousが初期化済みかどうかを追跡するフラグ
11
    // このフラグは、data-astro-rerun でスクリプトが再実行されるたびにリセットされる
12
    // (スクリプトスコープなので、再実行ごとに初期状態に戻る)
13
    let luminousInitialized = false;
14

15
    function initializeLuminous() {
16
      // サーバーサイドでの実行を防ぐガード
17
      if (typeof window === 'undefined' || typeof document === 'undefined') {
18
        return; // サーバーサイドでは実行しない
19
      }
20

21
      const LuminousGalleryClass = getLuminousGallery();
22

23
      // LuminousGalleryがまだ利用できない場合、ログを出して処理を中断
24
      if (typeof LuminousGalleryClass === 'undefined') {
25
        // コンソールを埋め尽くさないよう、警告は最初の数回だけにするか、開発モードのみにする
26
        // console.warn('LuminousGallery not yet available. Retrying...');
27
        setTimeout(initializeLuminous, 50); // 短い間隔で再試行し、ロードを待つ
28
        return;
29
      }
30

31
      // もしこのスクリプトブロックが既にLuminousを初期化済みなら何もしない
32
      // ただし、data-astro-rerun の場合は、ページ遷移ごとにこのスクリプトブロックが
33
      // 再評価されるため、このフラグだけでは不十分な場合がある。
34
      // LuminousGallery自体が重複登録を避けるようになっているか、
35
      // あるいは要素から既存のリスナーを削除する必要がある。
36
      // LuminousGalleryは通常、既に初期化された要素に対しては重複登録しない。
37

38
      console.log('Attempting to initialize LuminousGallery.');
39
      try {
40
        const triggers = document.querySelectorAll('.luminous-trigger');
41

42
        if (triggers.length > 0) {
43
          // LuminousGallery のインスタンスを新規作成
44
          // 既存のインスタンスを破棄するロジックがあれば、ここで呼び出す
45
          // LuminousGalleryには直接的な破棄メソッドはないため、新しいインスタンスを作成する形になる
46
          new LuminousGallery(triggers);
47
          console.log('LuminousGallery initialized successfully.');
48
          luminousInitialized = true; // 初期化済みフラグを立てる
49
        } else {
50
          console.log('No elements with .luminous-trigger found to initialize Luminous.');
51
          luminousInitialized = false;
52
        }
53
      } catch (e) {
54
        console.error('Error initializing LuminousGallery:', e);
55
        luminousInitialized = false;
56
      }
57
    }
58

59
    // 初回ロード時に実行
60
  document.addEventListener('DOMContentLoaded', initializeLuminous);
61

62
  // View Transition後のページ遷移時に実行
63
  document.addEventListener('astro:after-swap', initializeLuminous);
64
  </script>

1
import { Image } from 'astro:assets';
2
import manga1 from './画像1.jpg';
3
import manga2 from './画像2.jpg';
4
...

1
<div class="flex justify-center gap-x-4">
2
<a class="luminous-trigger" href={manga1.src} data-caption="キャプション">
3
  <Image
4
    src={サムネ}
5
    alt="文章"
6
    width={225}
7
    height={400}
8
     />
9
</a>
10
二枚目用<a以下略
11
</div>