Home › Forums › JavaScript › global var outside of each loop help
- This topic is empty.
-
AuthorPosts
-
January 28, 2014 at 2:41 pm #161309clayton47Participant
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, 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 – I completed the codeacademy lesson on it. And I am about 35% complete with the javascript lesson. So I am a noob. 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'); }); }
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.