是否可以自动为每个嵌入的图像添加灯箱效果
<img class="full-img" src="/blog/content/images/2014/Jun/biking_hwy1.jpg" alt="">
到这个
<a href="/blog/content/images/2014/Jun/biking_hwy1.jpg" data-lightbox="how-to-enable-lightbox-in-ghost" data-title="This is my caption"><img class="full-img" src="/blog/content/images/2014/Jun/biking_hwy1.jpg" alt="" title=""></a>
页面加载成功后?
我想在支持JQuery的Ghost CMS安装上启用此功能。 提前谢谢!
答案 0 :(得分:1)
您可以在页面中的每个图像上使用Javascript,然后根据需要更改属性。不一定是最好的方法(首选服务器端),但它可以工作。在您浏览图像后,您也很可能需要重新实例化灯箱插件以重新解析页面。
var img = jQuery("img");
img.each(function() {
var element = jQuery(this);
var a = jQuery("<a />", {href: element.attr("src"), "data-lightbox": "test"});
element.wrap(a);
});
您需要添加自己的自定义属性,但您明白了。
答案 1 :(得分:0)
除了杰森(Jason)的想法之外,如果您想向没有锚定标记父级的图像添加灯箱,我们可以添加一个if语句来检查img父级是否是锚定标记。
var img = jQuery("img");
img.each(function() {
var element = jQuery(this);
if( this.parentElement.tagName != "A" ){
var a = jQuery("<a />", {href: element.attr("src"), 'data-lightbox': 'Article image'});
element.wrap(a);
}
});