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>
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...