Javascript 自动向图像添加灯箱效果

有没有可能自动为每个像这样嵌入的图像添加灯箱效果

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

---

提前谢谢

您可以在页面中的每个图像上使用Javascript，然后根据需要更改属性。不一定是最好的方法（最好是在服务器端完成），但它可以工作。在浏览图像后，您还可能需要重新实例化lightbox插件以重新分析页面

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

var img=jQuery（“img”）；
img.each（函数（）{
var元素=jQuery（this）；
var a=jQuery（“

您需要添加您自己的自定义属性，但您得到了这个想法。
除了Jason idea，如果您想在没有锚定标记父项的图像中添加lightbox，我们可以添加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);
            }
        });

var img=jQuery（“img”）；
img.each（函数（）{
var元素=jQuery（this）；
if（this.parentElement.tagName！=“A”）{
var a=jQuery（“，{href:element.attr（“src”），'data lightbox'：'Article image'}）；
元素。包装（a）；
}
});
非常感谢您的帮助！