自动为图像添加灯箱效果

时间:2014-07-31 20:56:43

标签: javascript jquery

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

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

2 个答案:

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

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

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

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