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

在做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>');
    }
})

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

留言评论