jQueryを使わず20行以内でWordPressにLightbox機能を実装する

関連記事

バニラJSで極力短いコードでLightboxを実装

Vanilla JS Lightbox

FeatherLightで賄っていたLightbox機能をバニラJSで実装できたのでブログの脱jQuery化が完了しました。

コードは以下です。

WordPressのheaderまたはfooterに記述。

<script>
 document.addEventListener('DOMContentLoaded', function() {
     document.querySelectorAll('.entry-content img').forEach(function(img) {
         if (img.parentNode.tagName.toLowerCase() === 'a'
             && img.parentNode.getAttribute('href').match(/\.(?:jpe?g|png|gif)$/)) {
             img.parentNode.addEventListener('click', function(event) {
                 event.preventDefault();
                 document.getElementById('filter').style.display = 'block';
                 document.getElementById('filter').innerHTML = '<div style="margin-top: 10rem; color: #FFF"><div style="text-align: center">[ESC]で閉じる</div><img src="' + this.getAttribute('href') + '" style="display: block; margin: auto; max-height: ' + window.innerHeight + 'px;"></div>';
                 window.addEventListener('keydown', function(event) {
                     if (event.keyCode === 27) {
                         document.getElementById('filter').style.display = 'none';
                     }
                 });
             });
         }
     });
     document.getElementById('filter').addEventListener('click', function() {
         this.style.display = 'none';
     });
</script>

<div id="filter" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(0, 0, 0, 0.8);"></div>

インラインCSSを使っているのが気になる人は別途CSSに移してください。

画像の高さはwindow.innerHeightを使って現在の表示領域以上高くならないようにしています。

画像はESCキーで閉じるようにしていますが、閉じるボタンを実装した方が数行コードが短くなりますね。

https://www.cssscript.com/image-lightbox-ovrly/

cssscript.comには上記URLのようなシンプルな実装もありましたが、行数を極力削りたかったので自分で書きました。

脱jQueryによるPageSpeed Insightsのスコアはほとんど変化なし

平均で2~3点良くなったような関係ないような…。

WordPressのテーマによってはjQueryと切り離すことがかなり困難だと思うので、ムリにやるようなものでもないですね。

関連記事

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL