Question

我正在使用PhoneGap Camera插件，并为我选择的每张图片添加图像。我遇到的问题是，当我尝试在这些图像上实现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

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

在页面加载时初始化'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
        },
    });
}

Lightbox插件无法使用PhoneGap图像

1 个答案: