画像をクリックしたら、拡大画像がポップアップで表示される方法

画像をクリックしたら、拡大画像が「ポップアップ」で表示される方法をお伝えします。

この方法は、拡大画像を別ウィンドウで立ち上げるのではなく、その場で、拡大画像が表示される方法です。

たとえば、下記の画像をクリックすると、その場で拡大画像が表示されます。

この方法は、フォトギャラリーのように、小さい画像をホームページ上に表示させて、その画像を大きくして見せたいときなどに、とても有効な方法ですよね！

現在、とても流行っていて、見た目と使い勝手が良いため、良かったら活用してくださいね。

■ 画像をクリックしたら、拡大画像がポップアップで表示される方法

手順１：拡大される画像を表示したいページのヘッダー
（</head>の真上）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。

【注意】

ソースを入れるページは、拡大される画像を表示したいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。

ソースを入れる場所については、十分、注意してください。
（ヘッダーの中に入れないと、動かないです）

手順２：拡大される画像を表示したい箇所に、下記のソースを入れる。

上記のソースを使うときは、「画像のファイル名」を２ヵ所、変更してください。

現在は、「gazou1.jpg」にしていますけど、この画像のファイル名を、表示させたいファイル名に変更する、という形ですね。

なお、ホームページ上に表示する画像の大きさ（横幅）は、「width="300"」と指定していますが、この数字も、自由に変更することができます。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル（index.htmlファイルなど）と同じ場所に、画像を保存するようにしてください。

手順３：実際に画像をクリックして、確かめてみよう。

画像をクリックして、その場で拡大画像がポップアップで表示されることを確認してみてください。拡大画像が表示されたら、作業は完了です。

■ ちょっとしたカスタマイズ方法

この方法は、写真をたくさん並べたギャラリーページを作るときにも、役に立ちます。たとえば、下記のように、サムネイル（小さな写真）を並べたようなページですね。

　　　　

そして、この場合、「data-lightbox="group"」という形で、「data-lightbox」で指定する名前（ここでは group）を一緒にすることで、画像をグルーピングすることができます。

たとえば、上記のサムネイルをクリックすると、画像を横に移動しながら、見ていくことができますよね？

「data-lightbox」で指定する名前を一緒にすることで、このような「画像のグルーピング」ができます。これについては、必要に応じて、試してみてくださいね。