Blog スタッフブログ

WEB制作

【WORDPRESS】jQueryを使わない画像のポップアップをコピペですぐにできる！「Luminous」導入方法

WEB制作担当のTYです。

今回は画像などをクリックした際に拡大表示されるポップアップが簡単に導入できる「Luminous」についてお話します。

ポップアップのやり方はJqueryやプラグインでも導入が可能ですが導入するのに時間がかかるのとプラグインの相性次第で動かなかったりと試行錯誤した時間があり、今回紹介する「Luminous」の導入があまりにも簡単だったため紹介いたします。

ますはheaderかfooterにこちらを記入します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous-basic.min.css">
<script src="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous.min.js"></script>

そしてポップアップしたい画像のaタグにclass=”luminous”を付けます。

<a class="luminous" href="/images/template.jpg" >
   <img class="img-responsive " src="https://mixltd.jp/cms/wp-content/themes/mix_theme/images/template.jpg" >
</a>

これでポップアップができるようになります。

カスタム投稿やACFでも使えることができます！

戻る一覧へ戻る