Zenn
🚚

ミニカーコレクションSNSサービス開発⑧▶️開発89日目 - 画像の拡大表示とスライダー表示 -

に公開
Laravel
Tailwind CSS
livewire
Alpine.js
tall
tech

Lightbox2を使った画像拡大機能の搭載


詳細画面で任意の画面を一つクリックすると…、


拡大表示され、左右の矢印で画像のスライド表示機能を搭載しているLightbox2ライブラリ。

これまでは画像の一覧表示まではできていたものの、画像を拡大表示できる仕様ではなかったため、拡大表示＋スライド表示（左右の矢印操作）にて、さらに詳細に画像を見れる様にしたいと思っていました。

そこで今回は、Lightboxライブラリを使って、画像を選択し拡大表示を可能にするため、jQueryのプラグインLightboxがより進化した「Lightbox２」を実装しました。


Lightboxの公式サイト

npmでLightbox2をインストール

まず、Laravelプロジェクトのルートディレクトリで以下のコマンドを実行します。

https://lokeshdhakar.com/projects/lightbox2/#getting-started

npm install lightbox2

これにより、node_modulesフォルダ内にLightbox2がインストールされます。

CSSとJSをインポート

Lightbox2のCSSとJSをLaravelプロジェクトに取り込むには、resources/js/app.jsファイルとresources/css/app.cssに下記import文を追記する必要があります。

resources/js/app.js

import 'lightbox2/dist/js/lightbox.js';

resources/css/app.css

@import 'lightbox2/dist/css/lightbox.css';

jQueryをインストールする　（※今はLivewireとAlpine.jsを使っています。）

jQueryがインストールされていなかったのでインストールしました。

以下のコマンドを実行します。

npm install jquery

jQueryをプロジェクトで使用できるように設定

vite.config.js（またはvite.config.ts）を編集して、jQueryを外部モジュールとして指定します。以下を追加します。

export default defineConfig({
    plugins: [laravel()],
    resolve: {
        alias: {
            jquery: 'jquery/dist/jquery.js',
        },
    },
});

これにより、ViteがjQueryを正しく解決できるようになります。

アプリケーションにjQueryを読み込む

resources/js/app.jsでjQueryとlightbox.jsをインポートします。lightbox2はjQueryを使っているので先にjQueryをインポートさせる必要があります。

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

import './bootstrap';
import 'lightbox2/dist/js/lightbox.js';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

またresources/css/app.cssでlightbox.cssをインポートします。tailwindを使用している場合は、tailwindのインポートを記述する前にlightbox.cssをインポートさせる記述を書かないとエラーになり正しく機能しないので注意が必要です。

@import 'lightbox2/dist/css/lightbox.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

再度ビルドする

以下のコマンドを実行して、ビルドをやり直します。

npm run dev

上記のビルド完了後、Bladeファイル内でLightboxを使いたい場所に以下を追加します。data-lightbox="gallery"となっている箇所でギャラリー形式に表示してくれる要素（画像）を認識します。

<div>
    <a href="{{ asset('storage/images/sample1.jpg') }}" data-lightbox="gallery" data-title="Sample Image 1">
        <img src="{{ asset('storage/images/sample1_thumb.jpg') }}" alt="Thumbnail 1" style="width: 150px;">
    </a>
    <a href="{{ asset('storage/images/sample2.jpg') }}" data-lightbox="gallery" data-title="Sample Image 2">
        <img src="{{ asset('storage/images/sample2_thumb.jpg') }}" alt="Thumbnail 2" style="width: 150px;">
    </a>
</div>

こちらの設定で実装できるかと思います。

また、レンタルサーバー内などの本番環境内でjQueryとLightbox2がまだインストールされていない場合はインストール後、再度サーバー内でnpm run buildして本番環境でもビルドファイルを生成しましょう。

実装まで少し手間がかかるかなと思っていましたが、意外とスムーズに実装できたので良かったです。

2025/5/27時点のサービス内容

ミニカーやプラモデルなどのクルマ模型特化型のオンラインディスプレイサービス" The Garage "の開発に関する記事の発信を行っています。

⬇️The GarageはこちらのURL先よりご利用いただけます。
https://thegaragejp.com/news

今後も開発記事について記事を更新していけたらと思っています。

今後ともよろしくお願いします🚘

Discussion