为wordpress文章中的图片添加a标签 Auto Highslide插件的应用

为wordpress文章中的图片添加a标签 Auto Highslide插件的应用

为wordpress文章中的图片添加a标签 Auto Highslide插件的应用

导语:先介绍一下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类名。此代码也可以用作其他元素添加标签。

结束

你学会了吗?

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

留下一条回复

关闭