灯箱插件不适用于 PhoneGap 图像答案

【问题标题】：Lightbox plugin not working with PhoneGap images灯箱插件不适用于 PhoneGap 图像
【发布时间】：2014-12-05 23:56:22
【问题描述】：

我正在使用 PhoneGap 相机插件，并为我选择的每张图片添加一张图片到我的页面。我遇到的问题是，当我尝试在这些图像上实现 Lightbox 时，我没有得到想要的结果。如果我在不是通过 PhoneGap 插件添加的图像上使用相同的确切代码，那么一切都会完美运行。两个图像之间代码的唯一区别是 src 属性。以下是每个代码：

普通图像：

<a class="photo" href="img/server.png"><img src="server.png" alt="server" /></a>

PhoneGap 所选图片：

<a class="photo" href="file:///storage/emulated/0/Android/data/com.hdl.inspector/cache/1417822999785.jpg">
    <img src="file:///storage/emulated/0/Android/data/com.hdl.inspector/cache/1417822999785.jpg" alt="" />
</a>

【问题讨论】：

标签： jquery image cordova phonegap-plugins

【解决方案1】：

我发现我的问题与页面加载后添加的照片有关，而不是与图像路径有关。我正在使用以下脚本在页面加载时初始化“Magnific Popup”

$('.photo').magnificPopup({
      type: 'image',
      gallery:{
        enabled:true
    },
});

这是我用来从设备将图像添加到我的页面的代码：

function onSuccess(imageURI) {                                        
    var holder = document.getElementById('myImage');
    var image = '<div class="edit-img" ><img class="remove" src="images/remove.png" />&nbsp;<a class="photo" href="' + imageURI + '"><span class="img-name">' + imageURI.lastIndexOf("/") + 1 + '</span>&nbsp;<img class="img-thumb" src="' + imageURI + '" /></a></div>'
    $(holder).after(image);
}

解决方案是在 onSuccess() 函数中添加 Magnific Popup 代码。我的最终代码如下所示：

function onSuccess(imageURI) {                                        
    var holder = document.getElementById('myImage');
    var image = '<div class="edit-img" ><img class="remove" src="images/remove.png" />&nbsp;<a class="photo" href="' + imageURI + '"><span class="img-name">' + imageURI.lastIndexOf("/") + 1 + '</span>&nbsp;<img class="img-thumb" src="' + imageURI + '" /></a></div>'
    $(holder).after(image);

    $('.photo').magnificPopup({
        type: 'image',
        gallery:{
          enabled:true
        },
    });
}

【讨论】：