利用JQuery给wordpress文章图片增加一个简单的放大效果

2020-09-10 视觉前端

在做wordpress模板时发现,由于文章宽度的不足,导致一些大图无法完整的查看。想用一些简单的方式来让图片最大化的展示出来,于是我动手做了个。

用JQuery给图片加一个超链接,点击图片后可以但新窗口打开完整的图片。虽说没那么美观,但也起到了需求的效果。

用wordpress写文章,在编辑图片时,默认的是会给图片增加一个<figure>>元素。我在文章和页面模板里增加了一段JQuery代码,通过figure IMG找到所有图片元素,然后给每个上面增加一个超链接。

$(document).ready(function() {
    $images = $('figure IMG');
    for (var i = $images.length - 1; i >= 0; i--) {
    	$imgUrl = $images.eq(i).attr('src');
    	$imgClass = $images.eq(i).attr('class');
    	$('.'+$imgClass).wrap('<a href="'+$imgUrl+'" target="_blank"></a>');
    }
})

这样,就可以达到简单的图片放大效果了!

称呼
邮箱
网站