我正在通过 json/ajax 将图像提取到文档中。他们被吸引后，我想使用插件“PhotoSwipe”创建幻灯片。所有代码都在我的文档中，我可以看到图像已被拉取，但我认为这是在 PhotoSwipe 尝试调用它们之后。我收到以下错误:
Code.PhotoSwipe.createInstance:没有要传递的图像。
紧接着是我的函数记录的所有图像。这是我的代码，如果有人可以提供帮助，将不胜感激!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link type="text/css" rel="stylesheet" href="styles/slideshow.css" />
<meta name = "viewport" content = "width = 320, user-scalable = no">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
Util.Events.domReady(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</head>
<body>
<div class="wrapper">
<img src="img/Welcome.png" width="280" height="57" class="retina welcome" />
<div id="PhotoSwipeTarget"></div>
<div id="slider">
</div>
<p>
LCBC is a group of people on a journey with Jesus. We don’t claim to have it all figured out and recognize that each of us is in a different spot on that journey. From those just exploring Jesus, to those starting to figure out how to walk with Him, to those fully engaged in that pursuit— everyone is welcome here!
</p>
</div>
</body>
</html>
最佳答案
您可能想检查事情是如何被触发的...从您的图像看起来像是在准备就绪的功能上加载，但是滑动也是如此，因此滑动功能不知道那里有图像，因为从技术上讲，它与图像同时被调用。
尝试添加一个函数，在您的照片加载后调用滑动来启动...
关于javascript - 图像在调用后得到解析，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9334099/