ブログを書く際に欠かせない機能の一つは、画像のライトボックス機能です。つまり、クリックして拡大表示することです。ただし、異なるプログラムのブログでは使用されるプラグインも異なりますが、ここではほとんどのプログラムに対応できるライトボックスプラグインを研究しました。hexo、hugo、typecho でのテストも問題ありませんでした。
ファイルのインポート#
まず、 zoom.css と zoom.js の 2 つの重要なファイルをインポートします。
<!-- 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>
このファイルは私自身のサーバーに保存されているため、将来のパスが保証できないため、ブラウザで開いてコードをコピーしてローカルで使用することをお勧めします。
JavaScript の呼び出し#
次に、画像にクラス名と親要素ボックスを付ける必要があります。同様に、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();
})
ページに戻り、本文の画像をクリックすると、正常に拡大表示されます。
終わりに#
適当な画像を試してみましょう！
本文以外の場所にも画像があるため、本文内でのみ拡大表示できるように制限しています。すべての場所でクリックして拡大表示できると、合理的ではありません。
使用中に他の問題がある場合は、コメントを残してください。