导语：先介绍一下Auto Highslide插件，它是一个可以把wordpress文章中的所有图片转换为灯箱方式展示的插件。你点击文章中的图片，会弹出一个图片灯箱，你可以使用左右箭头对图片翻页。
使用原因
有一个客户希望将图片分类中的文章图片以灯箱幻灯片的方式展现，于是叶子找到了Auto Highslide插件。
Auto Highslide插件的使用方式它需要你在插入文章图片的时候，为图片添加A标签，标签的href属性为图片本身的地址，然后它指定class和onclick属性。代码如下：
<a href="http://static.estory365.com/wp-content/uploads/2016/07/logo.png" class="highslide-image" onclick="return hs.expand(this);"> <img src="http://static.estory365.com/wp-content/uploads/2016/07/logo.png" alt="The-location-map-of-Dongchuan" > </a>
插件本身会对图片的a标签添加class和onclick。
自动插入A标签
但是由于有些图片没有A标签，那么插件就不能起作用。于是就有了下面的代码，可以自动为图片添加a标签的容器，这段代码放置在header.php里面：
<script type="text/javascript">
jQuery(document).ready(function($){
$('.entry-content img,.entry-featured img').each(function(i){
if (! this.parentNode.href) {
$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
}
});
});
</script>
客户的特殊要求
客户要求文章中先只能看见第一张图片，其他的图片要点击第一张后出现。然后叶子发现，有些图片原来已经有了A标签，但插件自动添加class和onclick不成功，于是叶子把原来有a标签的图片也在此添加了class和onclick。叶子还发现图片A标签的链接地址有问题，也对href属性进行了修改。最后改出来的代码为：
<script type="text/javascript">
jQuery(document).ready(function($){
var imgcnt=0;
$('.entry-content img,.entry-featured img').each(function(i){
if (! this.parentNode.href) {
if (imgcnt==0) {
$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
}else{
$(this).wrap("<a href='"+this.src+"' style='display:none;' class='highslide-image' onclick='return hs.expand(this);'></a>");
}
}else{
if (imgcnt==0) {
$(this).parent('a').addClass("highslide-image");
$(this).parent('a').attr("onclick","return hs.expand(this);");
$(this).parent('a').attr("href",this.src);
}else{
$(this).parent('a').addClass("highslide-image");
$(this).parent('a').attr("onclick","return hs.expand(this);");
$(this).parent('a').hide();
$(this).parent('a').attr("href",this.src);
}
}
imgcnt++;
});
$('.entry-content').prepend("<p>There are "+imgcnt+" Photos here,please click the photos to play.</p>");
});
</script>
或者用这个也是可以的代码也是可以的，如果有a标签，先删除图片的a标签，然后再添加a标签。
<script type="text/javascript">
jQuery(document).ready(function($){
var imgcnt=0;
$('.entry-content img,.entry-featured img').each(function(i){
if (! this.parentNode.href) {
if (imgcnt==0) {
$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
}else{
$(this).wrap("<a href='"+this.src+"' style='display:none;' class='highslide-image' onclick='return hs.expand(this);'></a>");
}
}else{
if (imgcnt==0) {
$(this).unwrap();
$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
}else{
$(this).unwrap();
$(this).wrap("<a href='"+this.src+"' style='display:none;' class='highslide-image' onclick='return hs.expand(this);'></a>");
}
}
imgcnt++;
});
$('.entry-content').prepend("<p>There are "+imgcnt+" Photos here,please click the photos to play.</p>");
});
</script>
注意
.entry-content img .entry-featured img，这里要换成你自己的CSS类名。此代码也可以用作其他元素添加标签。
结束
你学会了吗？
