I have been working on a script with an api. I am trying to return the image in a bootstrap modal when the “a” element is clicked. Its breaking my each loop and only returning 1 image on the page when 20 is the default. And its not displaying in the modal when clicked. However I can see the img url in my console so its kind of right I think. At first I had the click function inside the loop and when you would click one image it would return all of the images on the page in the modal. So I started looking into creating a variable that I could access outside of the each loop. I am very novice with jQuery. Here is the chunk of code of the function containing the loop and click function. What am I missing?
Thanks, Clayton -
function success (instagramData) {
// This is run if the ajax call is successful
// The "instagramData" being passed to this function is the returned data from the url
if (instagramData.meta.code !== 200) {
// If we don't get a 200 that means instagram threw an error.
// Instead of adding the html for images to .results div, we will put the error in there so
// we know what happend
$('.results').html('<h1>An Error Occured</h1><p>' + instagramData.meta.error_message + '</p>');
return;
}
var gramimgData = 'gramimgData';
$.each(instagramData.data, function(index, gram) {
// instagramData.data is the "data" inside the returned json. There is "meta" and "data".
// index is just an incremental number for each gram. we don't need it yet.
// gram is the information for EACH gram. this $.each loops over all of them.
if (gram.type === 'image') {
// for this example we only care about images
$('.results').append('<div class="col-md-3">' +
'<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
'<a href="#myModal" data-toggle="modal" data-img-url="' + gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' + gram.images.low_resolution.url + '"/></a>' +
'</div>');
}
if (gram.type === 'video') {
// for this example we only care about videos
$('.results').append('<div class="col-md-3">' +
'<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
'<a href="#myModal" data-toggle="modal" data-img-url="' + gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' + gram.videos.low_resolution.url + '"/></a>' +
'</div>');
}
gramimgData = $(gram.images.standard_resolution.url);
});
//click function for returning images in modal.
$('a').click(function(){
$('.modal-body').append('<img src="' + gramimgData + '">');
console.log('click');
});
}