Question

是否可以自动为每个嵌入的图像添加灯箱效果

<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安装上启用此功能。提前谢谢！

Answer 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);
});

http://jsfiddle.net/ak74A/1/

您需要添加自己的自定义属性，但您明白了。

Answer 2

除了杰森（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);
            }
        });

自动为图像添加灯箱效果

2 个答案: