【WP】自动为WordPress所有<img>添加媒体文件Link<a>包围

最近和WP里面各种LightBox插件较劲,发现这些插件都需要<img>Tag之外要<a 媒体文件>来包围,不然没有Light-Box效果。少量的话可以手动修改,但如果几百个文章,图片再多一些就是灾难。只能考虑自动方法了。


  自己尝试写了一些基础的JS代码,为WordPress中<img>添加<a>,大概效果为:

before:<img ...> 
==>
after:<a href='img.src'><img ...></a>

  下面为JS代码wrapTagImgWithA函数,当<img>中有data-LightBoxExclude属性,则该<img>跳过不追加<a>,利用HTML加载完毕时(DOMContentLoaded)加载这个函数。

/**
 * wrap Tag<Img> with Tag<a href=img.src> for LightBox
 * but exclude like <img data-LightBoxExclude=''> mark by 
 *     custom attribute data-LightBoxExclude
 * ------------------------------------------------------------------
 * @param {string} galleryAreaID gallery-area's ID
 * @return void
 * @author mkland.net
 */
function wrapTagImgWithA(galleryAreaID)
{
    // get gallery area object, in wordpress is (id='content') area
    var oGalleryArea = document.getElementById(galleryAreaID);

    // get array include <img>(without parentNode<a>)
    var oImgAry = [];
    if (oGalleryArea){
        var imgs = oGalleryArea.getElementsByTagName('img');
        for(var i=0; i < imgs.length; i++){
            // exclude <img data-LightBoxExclude=''>
            if (imgs[i].dataset.lightboxexclude !== undefined) continue; 

            if (!imgs[i].parentNode.href) oImgAry.push(imgs[i]);
        }
    }

    // wrap <a> to <img>'s parentNode, set a.href=img.src
    oImgAry.forEach(function(oImg){
        var oImgWithA = document.createElement('a');
        oImgWithA.href = oImg.src;
        oImg.parentNode.replaceChild(oImgWithA, oImg);
        oImgWithA.appendChild(oImg);
    });
}
window.addEventListener("DOMContentLoaded", wrapTagImgWithA('content'));

  同时,为了视觉上的效果,为<img>图片加了mouseover时style为zoom-in(IE以外都支持)。

before:<img ...> 
==>
after:<img ... style="cursor:zoom-in">

  以下为JS代码chgTagImgCursorToZoomIn函数,一样在HTML加载完毕时(DOMContentLoaded)加载这个函数 。<img>中有data-LightBoxExclude属性,则该<img>跳过不追加光标样式。

/**
 * change cursor style to zoom-in in galleryArea's <img> 
 * but exclude like <img data-LightBoxExclude=''> mark by 
 *     custom attribute data-LightBoxExclude
 * ------------------------------------------------------------------
 * @param {string} galleryAreaID gallery-area's ID
 * @return void
 * @author mkland.net
 */
function chgTagImgCursorToZoomIn(galleryAreaID)
{
    // get gallery area object, in wordpress is (id='content') area
    var oGalleryArea = document.getElementById(galleryAreaID);

    // change cursor style to zoom-in
    var imgs = oGalleryArea.getElementsByTagName('img');
    for(var i=0; i < imgs.length; i++){
        // exclude <img data-LightBoxExclude=''>
        if (imgs[i].dataset.lightboxexclude !== undefined) continue; 

        imgs[i].style.cursor = 'zoom-in';
    }
}
window.addEventListener("DOMContentLoaded", chgTagImgCursorToZoomIn('content'));

  有想使用的朋友尽管拿去用:)一般以上函数可以直接添加到你引用的Light-Box插件的js代码头部。另外本站使用“SimpLy Gallery Block & Lightbox”这个插件,效果很棒。

–mkland.net原创

发表评论