関連記事
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><div>[ESC]で閉じる</div><img src="' + this.getAttribute('href') + '"></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"></div>
インラインCSSを使っているのが気になる人は別途CSSに移してください。
画像の高さはwindow.innerHeightを使って現在の表示領域以上高くならないようにしています。
画像はESCキーで閉じるようにしていますが、閉じるボタンを実装した方が数行コードを短くできますね。
https://www.cssscript.com/image-lightbox-ovrly/
cssscript.comには上記URLのようなシンプルな実装もありましたが、行数を極力削りたかったので自分で書きました。
脱jQueryによるPageSpeed Insightsのスコアはほとんど変化なし
平均で2～3点良くなったような関係ないような…。
WordPressのテーマによってはjQueryと切り離すことがかなり困難だと思うので、ムリにやるようなものでもないですね。