不使用PhoneGap映像的Lightbox插件

Question

我正在使用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>

Answer 1

我发现我的问题与在页面加载后添加的照片有关，而不是任何与图像路径有关的事情。我用下面的脚本初始化页面加载中的“Magni显弹出式”

$('.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()中添加镁基弹出代码。我的最后代码如下所示：

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