调用后解析图像
我通过 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>
I'm pulling images into a document via json/ajax. After they get pulled in, I'd like to create a slideshow using the plugin "PhotoSwipe". All of the code is in my document and I can see that the images get pulled but I think it's after PhotoSwipe tries to call them. I get the following error:
Code.PhotoSwipe.createInstance: No images to passed.
Then right after that is all the images that have been logged by my function. Here is my code, if anyone can help, it would be much appreciated!
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可能想检查事情是如何被触发的...从看起来您的图像正在加载到就绪功能上，但是滑动也是如此，因此滑动功能不知道那里有图像，因为从技术上讲它是与图像同时调用。
尝试添加一个函数，在照片加载后调用滑动来启动...
you might want to check how things are getting fired... from what it looks like your images are loading on an on ready function, but so is the swipe, so the swipe function doesn't know there are images there since technically its being called at the same time as the images.
try adding a function that calls the swipe to initiate after your photos have been loaded...