The feed

In the use ofMkdocsWhen writing static document web pages, the display of some large pictures is compressed, and when you want to refer to the content, you should browse by opening the website where the picture is located. Intuitive documents can also give customers a better experience.

So this blog post is mainly to realize the click on the picture, view the picture details.

implementation

After the page is loaded, attach the onclick attribute to all IMG tags:

window.onload = function () {
    for (let item of document.getElementsByTagName('img')) {
        if (item.classList.contains('pass') = = =false) {
            item.setAttribute('onclick'.'clickAction(this)'); }}}Copy the code

Click the image execution function mainly includes background rendering and image loading, and set related styles:

function clickAction(img) {
    let medusa = document.createElement('div');
    medusa.setAttribute('id'.'imgBaseDiv');
    medusa.setAttribute('onclick'.'closeImg()');
    let image = document.createElement('img');
    image.setAttribute('src', img.src);
    medusa.appendChild(image);
    document.body.appendChild(medusa);
}
Copy the code

The listener added to the background DIV tag only deletes the current DIV and closes the function:

function closeImg() {
    document.getElementById('imgBaseDiv').remove();
}
Copy the code

CSS styles:

#imgBaseDiv > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 99%;
    max-height: 99%;
}

#imgBaseDiv {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0.0.0.0.9);
    top: 0;
    left: 0;
    z-index: 1050;
}
Copy the code

Note that there are configuration options for importing custom.css files in Mkdocs, but there are no configuration options for importing custom.js files, so when you need to implement the import of custom.js files, you need to add the following lines to your.md. Of course, You need to replace the SRC attribute value with your path:

<script src="static/doc.js"></script>
Copy the code

Or when you use Mkdocs, use your own build template file and import it directly into the template file.




The ultimate value of life lies in awareness and the ability to think, not merely in survival. — Aristotle