2024-07-22Lightboxの実装方法は多数ありますが、今回は「jquery.colorbox.js」というライブラリを使って、簡単にLightbox風の表示を実現する方法をご紹介します。このライブラリは、別URLページの表示だけでなく、画像や動画の表示にも対応しており、非常に便利です。必要なファイルの読み込みまず、以下の3つのファイルを読み込む必要があります。colorbox.cssjquery.min.jsjquery.colorbox.jsこれらのファイルを正しく読み込むことで、Lightbox風の表示が可能となります。次に、ページが読み込まれた際に実行されるJavaScriptのコードを記述します。このコードを用いることで、指定した要素(今回は.iframe)をクリックすると、Lightbox風の表示がされるようになります。/>});</script>HTMLの記述方法Lightboxの表示を行うためのHTMLの記述は非常にシンプルです。以下のようなaタグをページに追加するだけで、Lightbox風の表示が可能となります。aタグにcolorboxで表示させるタグ要素class=”iframe”を記述します。href="https://dad-union.com">このリンクをクリック</a>jquery.colorbox.jsでightbox風に別ページ(iframe)を表示するデモページ実際に「jquery.colorbox.js」を使ったLightbox風の表示がどのようになるのか、以下のデモページで確認することができます。lightbox「jquery.colorbox.js」の詳細なドキュメントや、他の実装方法などを知りたい方は、以下のサイトを参考にしてください。「jquery.colorbox.js」は、別URLページの表示だけでなく、画像やYouTube動画などのメディアコンテンツの表示にも対応しています。これにより、さまざまなコンテンツをLightbox風に表示することが可能となります。※流用される場合は自己責任でお願いします。デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。