My expertise lies primarily in HTML/CSS, with limited knowledge of using APIs and JavaScript.
I have been assigned the task of utilizing an API to retrieve Instagram pictures posted by users with a specific hashtag.
Here is the demo shared via JSFiddle: http://jsfiddle.net/j9ynxvox/10/
$(function() {
// When "Display" button is clicked, images will be retrieved
var endpoint = 'https://tagplus.jp/demo/api/json/medias';
// Function for displaying popup
var popup = function(item) {
var $container = $('<div>', {'class': 'popup-container'});
$('<div>', {'class': 'popup-overlay'}).appendTo($container);
var $template = $($('#popup-template').html());
$template.find('.popup-image').attr('src', item.images.standard_resolution);
var userLink = 'https://instagram.com/' + item.media_user.username;
$template.find('.user-link').attr('href', userLink);
$template.find('.profile-picture')
.attr('src', item.media_user.profile_picture);
$template.find('.media-user-name').text(item.media_user.username);
$template.appendTo($container);
$('body').append($container);
$container.fadeIn();
};
$(document).on(
'click',
'.popup-overlay',
function(e) {
e.preventDefault();
$('.popup-container').fadeOut(
'fast',
function() {
$(this).remove();
}
);
}
);
$('button').click(function() {
$('#thumbnail').text('');
$.get(
endpoint,
{count: 12},
function(res) {
res.data.forEach(function(item) {
var $thumb = $('<img>', {
'class': 'insta-thumb',
src: item.images.thumbnail
});
$thumb.appendTo($('#thumbnails'));
$thumb.click(function(e) {
e.preventDefault();
popup(item);
});
});
},
'jsonp'
);
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$('.popup-container').fadeOut(
'fast',
function() {
$(this).remove();
}
);
}
});
});
I have been instructed to use this specific API address: (referred to as )
Initially, I copied and pasted the JSFiddle code into my local files, but encountered issues when attempting to load Instagram pictures by clicking the button.
Here is my demo: (ID: test, Password: ny2016)
I am seeking assistance in understanding why it is not functioning and how I can resolve this issue.
Thank you for your time!