ブログに欠かせない機能の一つは画像ライトボックス機能、つまりクリックして拡大表示することです。しかし、異なるプログラムのブログで使用されるプラグインはそれぞれ異なります。ここでは、ほとんどのプログラムに対応できるライトボックスプラグインの一式を研究しました。hexo、hugo、typecho で問題なくテスト済みです。
ファイルの導入#
まず、私たちの重要な 2 つのファイル zoom.css と zoom.js を導入します。
<!-- headヘッダー -->
<link rel="stylesheet" href="https://cdn.imhan.cn/list/zoom.css">
<!-- bodyフッター -->
<!-- すでにjqファイルがある場合は、jqueryを再導入しないでください -->
<script src="https://cdn.imhan.cn/list/jquery3.6.0.js"></script>
<!--画像ライトボックス-->
<img src="" alt="" class="bigimg">
<div class="mask"></div>
<script src="https://cdn.imhan.cn/list/zoom.js"></script>
このファイルは私のサーバーに置いてあるため、将来的にこのパスが変わるかもしれないので、ブラウザで開いて、コードをローカルにコピーして使用することをお勧めします。
js の呼び出し#
次に、画像にクラス名を付け、親要素のボックスを作成する必要があります。同様に jq を使用して実行できます。
ここでの .post-content は本文のクラス名です。他のクラス名を使用している場合は、直接 .post-content を置き換えてください。
$(function(){
$('.post-content img').addClass('smallimg')
$('.post-content img').wrap('<div class="imgbox"></div>')
})
次に、プラグインを初期化する必要があります。先ほどのコードの下に直接書き込みます。
$(function(){
$('.post-content img').addClass('smallimg')
$('.post-content img').wrap('<div class="imgbox"></div>')
/*
smallimg // 小さい画像
bigimg // クリックして拡大する画像
mask // 黒いマスク
*/
var obj = new zoom('mask', 'bigimg', 'smallimg');
obj.init();
})
ページに戻ると、本文の画像をクリックすることで正常に拡大表示されます。
終了#
適当に画像を置いて試してみてください！
本文中のみ拡大できるように制限した理由は、ウェブサイトの他の場所にも画像があり、すべてがクリックして拡大できるのは不合理だからです。
使用中に他の問題があれば、コメントを歓迎します。