通过编写代码实现Wordpress文章图片预览

为什么要手写，现成的预览插件不香么？

网上找了几个图片预览组件，发现几个问题：

部分插件启用成功后无法使用。

无法兼容已发布的文章中的图片。

我想在图片预览的时候，替换图片的地址为原图地址，直接使用插件无法实现。

大部分图片预览插件无法满足更高的自定义需求。

基于以上几个原因，决定自己写一个图片预览功能，实现以上需求。

第一步：添加文章中的图片点击事件

代码如下：

Shell

let wpBlockImgs = document.querySelectorAll('.wp-block-image img'); if (wpBlockImgs) { let srcList = []; for (let i = 0; i < wpBlockImgs.length; i++) { srcList[i] = wpBlockImgs[i].getAttribute('src').replace(/normal\.view/, 'preview'); } for (let i = 0; i < wpBlockImgs.length; i++) { wpBlockImgs[i].addEventListener('click', function () { createImagePreview(srcList, i); }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let wpBlockImgs = document.querySelectorAll('.wp-block-image img');
if (wpBlockImgs)
{
    let srcList = [];
    for (let i = 0; i < wpBlockImgs.length; i++)
    {
        srcList[i] = wpBlockImgs[i].getAttribute('src').replace(/normal\.view/, 'preview');
    }
    for (let i = 0; i < wpBlockImgs.length; i++)
    {
        wpBlockImgs[i].addEventListener('click', function () {
            createImagePreview(srcList, i);
        });
    }
}

第二步：点击图片，显示对应的预览图片

代码如下：

Shell

/** * 图片预览 * @param srcList src数组 * @param index 当前需要展示的图片索引值 */ const createImagePreview = (srcList, index) => { let container = document.createElement('div'), // 最外层container imgBox = document.createElement('div'), // 装载img的盒子 img = document.createElement('img'), // img对象 src = srcList[index]; // 当前需要展示的img的src container.setAttribute('id', 'img-preview'); imgBox.setAttribute('id', 'imgBx'); img.setAttribute('src', src); imgBox.appendChild(img); container.appendChild(imgBox); document.body.appendChild(container); // 禁止滚动 disableBodyScroll(); // 防止图片加载缓慢，增加一个提示 let loadingText = document.createElement('span'); loadingText.innerHTML = '图片加载中 ...'; imgBox.appendChild(loadingText); // 图片加载完成事件 img.onload = () => { document.querySelector('#imgBx span').remove(); img.style.display = 'flex'; img.style.animation = '0.3s imgPreview ease-out forwards'; } // 绑定关闭事件 container.addEventListener('click', () => { removeImagePreview(); }) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/**
* 图片预览
* @param srcList src数组
* @param index 当前需要展示的图片索引值
*/
const createImagePreview = (srcList, index) => {

    let container = document.createElement('div'), // 最外层container
        imgBox = document.createElement('div'), // 装载img的盒子
        img = document.createElement('img'), // img对象
        src = srcList[index]; // 当前需要展示的img的src

    container.setAttribute('id', 'img-preview');
    imgBox.setAttribute('id', 'imgBx');
    img.setAttribute('src', src);
    imgBox.appendChild(img);
    container.appendChild(imgBox);
    document.body.appendChild(container);
    // 禁止滚动
    disableBodyScroll();

    // 防止图片加载缓慢，增加一个提示
    let loadingText = document.createElement('span');
        loadingText.innerHTML = '图片加载中 ...';
    imgBox.appendChild(loadingText);

    // 图片加载完成事件
    img.onload = () => {
        document.querySelector('#imgBx span').remove();
        img.style.display = 'flex';
        img.style.animation = '0.3s imgPreview ease-out forwards';
    }

    // 绑定关闭事件
    container.addEventListener('click', () => {
        removeImagePreview();
    })
}

禁止滚动查看这篇文章：使用原生JS实现禁止/允许页面滚动（兼容移动端）

第三步：点击可关闭当前的预览图片

代码如下：

Shell

/** * 移除图片预览 */ const removeImagePreview = () => { // 图片消失动画 document.querySelector('#img-preview #imgBx img').style.animation = '0.2s imgPreviewHidden ease-in forwards'; setTimeout(() => { document.querySelector('#img-preview').remove(); enableBodyScroll(); }, 200) }

1
2
3
4
5
6
7
8
9
10
11
12
13

/**
* 移除图片预览
*/
const removeImagePreview = () => {

    // 图片消失动画
    document.querySelector('#img-preview #imgBx img').style.animation = '0.2s imgPreviewHidden ease-in forwards';
    setTimeout(() => {
        document.querySelector('#img-preview').remove();
        enableBodyScroll();
    }, 200)
}

相关的CSS代码

Shell

#img-preview { position: fixed; width: 100vw; height: 100vh; top: 0; z-index: 999999; display: flex; justify-content: center; align-items: center; cursor: zoom-out; box-sizing: border-box; } #img-preview #imgBx { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; box-sizing: border-box; padding: 50px; } #img-preview div#imgBx span { position: absolute; text-align: center; font-size: 36px; display: inline-block; line-height: 68px; font-weight: 100; letter-spacing: 1px; transition: all 0.8s ease-in; /*z-index: -1;*/ color: transparent; } #img-preview div#imgBx span::before { content: '图片加载中 ...'; height: 100%; width: 0; left: 0; display: block; position: absolute; animation: previewImageLoadingNotice 0.6s linear forwards; /*z-index: -1;*/ overflow: hidden; white-space: pre; } @keyframes previewImageLoadingNotice { from { width: 0;} 100% { width: 100%; } } #img-preview #imgBx img { /*display: flex;*/ display: none; /*默认none，加载完成显示*/ margin: 0; padding: 0; border: none; object-fit: cover; max-width: 100%; max-height: 100%; border-radius: 4px 2px 1px 2px; transform: scale(0.5); } @keyframes imgPreview { from { transform: scale(0.5); } to { transform: scale(1); } } @keyframes imgPreviewHidden { from { transform: scale(1); } to { transform: scale(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

#img-preview
{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    box-sizing: border-box;
}
#img-preview #imgBx
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 50px;
}
#img-preview div#imgBx span {
    position: absolute;
    text-align: center;
    font-size: 36px;
    display: inline-block;
    line-height: 68px;
    font-weight: 100;
    letter-spacing: 1px;
    transition: all 0.8s ease-in;
    /*z-index: -1;*/
    color: transparent;
}
#img-preview div#imgBx span::before {
    content: '图片加载中 ...';
    height: 100%;
    width: 0;
    left: 0;
    display: block;
    position: absolute;
    animation: previewImageLoadingNotice 0.6s linear forwards;
    /*z-index: -1;*/
    overflow: hidden;
    white-space: pre;
}
@keyframes previewImageLoadingNotice {
    from { width: 0;}
    100% { width: 100%; }
}
#img-preview #imgBx img
{
    /*display: flex;*/
    display: none; /*默认none，加载完成显示*/
    margin: 0;
    padding: 0;
    border: none;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px 2px 1px 2px;
    transform: scale(0.5);
}
@keyframes imgPreview {
    from
    {
        transform: scale(0.5);
    }
    to
    {
        transform: scale(1);
    }
}
@keyframes imgPreviewHidden {
    from
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(0);
    }
}

浅色主题模式对应的样式：

Shell

@media (prefers-color-scheme: light) { #img-preview { background: rgba(255,255,255,0.98); } #img-preview #imgBx span { color: #CCC; } #img-preview div#imgBx span::before { color: #000; } #img-preview #imgBx img { background-color: #FFF; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@media (prefers-color-scheme: light) {
    #img-preview
    {
        background: rgba(255,255,255,0.98);
    }
    #img-preview #imgBx span
    {
        color: #CCC;
    }
    #img-preview div#imgBx span::before
    {
        color: #000;
    }
    #img-preview #imgBx img
    {
        background-color: #FFF;
    }
}

深色主题模式对应的样式：

Shell

@media (prefers-color-scheme: dark) { #img-preview { background: rgba(23,21,20,0.98); } #img-preview #imgBx span { color: #AAA; } #img-preview div#imgBx span::before { color: #FFF; /*text-shadow: -1px -1px 1px #FFF;*/ } #img-preview #imgBx img { background-color: #000; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@media (prefers-color-scheme: dark) {
    #img-preview
    {
        background: rgba(23,21,20,0.98);
    }
    #img-preview #imgBx span
    {
        color: #AAA;
    }
    #img-preview div#imgBx span::before
    {
        color: #FFF;
        /*text-shadow: -1px -1px 1px #FFF;*/
    }
    #img-preview #imgBx img
    {
        background-color: #000;
    }
}

本着互联网开源、开放的精神和宗旨，本站所有内容可以随便传播。如需转载或分享无需说明来源。

有任何疑问或烦恼，欢迎评论区讨论。

450

CSSHTMLJavaScriptWordpress

搜索

分类

色彩模式

通过编写代码实现WordPress文章图片预览

为什么要手写，现成的预览插件不香么？

第一步：添加文章中的图片点击事件

第二步：点击图片，显示对应的预览图片

第三步：点击可关闭当前的预览图片

相关的CSS代码

相关推荐

快捷导航

暂无回复数据

发表回复取消回复

为什么要手写，现成的预览插件不香么？

第一步：添加文章中的图片点击事件

第二步：点击图片，显示对应的预览图片

第三步：点击可关闭当前的预览图片

相关的CSS代码

相关推荐

JS循环定义变量

CSS 文本垂直居中

写了两个后台登录页面，需要的尽管拿去吧

快捷导航

暂无回复数据

发表回复 取消回复

发表回复取消回复