javascript - 自动为图像添加灯箱效果

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/

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