Я загружаю изображения в документ через 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>