制作実績よくあるご質問お電話でのお問い合わせ・ご相談06-4792-7678お問い合わせトピックスHOMEトピックスホームページ制作JavaScriptレスポンシブ対応のオシャレなLightboxプラグイン「Lightcase.js」レスポンシブ対応のオシャレなLightboxプラグイン「Lightcase.js」2019.08.02JavaScriptWEBサイトでよく使われるLightboxの表現ですが、プラグインによってはレスポンシブ対応されているものとされていないものがあります。本日は、レスポンシブサイトでも簡単に実装できて、かつオシャレで高機能なLightboxプラグイン「Lightcase.js」をご紹介いたします。目次Lightcase.jsについて実装方法(lightcase-2.5.0)読み込むデータ使用するための記述DEMOまとめLightcase.jsについて「Lightcase.js」は、美しくて柔軟かつ反応の良いLightboxプラグインです。画像の拡大表示だけでなく、Youtube、videoなどの動画、自由なコンテンツをLightbox表現にすることができます。実装方法(lightcase-2.5.0)実装方法は他のプラグインと同様で比較的簡単に実装ができますので、簡単な流れをご紹介します。この記事は、2017年7月29日時点で作成しており、Lightcase.jsのバージョンは「lightcase-2.5.0」になります。公式サイトからダウンロードしてください。公式サイト:https://cornel.bopp-art.com/lightcase/ダウンロードしたら、「lightcase-2.5.0/src」の階層をそのまま利用します。読み込むデータダウンロードしたデータの中から読み込むのはjs、cssの2ファイルのみです。それとは別にjQueryを読み込む必要がある点にはご注意ください。src="path/to/lightcase.js"></script>これが読み込めたら次はlightcaseを使うための記述をしてください。{$('a[data-rel^=lightcase]').lightcase();});</script>あとは拡大表示したいものを記述するたけです。data-rel="lightcase">画像もしくはテキストなど</a>その他にも他のLightboxプラグインにみられるものと同様に、拡大表示時にタイトルやキャプションもつけることができます。DEMOここをクリックしてください。まとめレスポンシブ対応されているLIghtboxプラグインの中でも、簡単に実装できてオシャレな「Lightcase.js」をご紹介させていただきました。今回紹介したのはLightcase.jsの基礎中の基礎です。他にもグループ表示、自動再生など様々な機能もありますので、ぜひ公式サイトものぞいてみてください。