Instagram Feed

by andyjh07

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
	<div class="row d-flex justify-content-center no-gutters" id="instafeed"></div>
</div>

SCSS

.insta-image {
	position: relative;
	
	&:before {
		transition: all .3s ease-in;
		content: '';
		opacity: 0;
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		background-color: black;
		width: 100%;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	&:hover {
		&:before {
			width: calc(100% - 10%);
			height: calc(100% - 10%);
			opacity: 0.7;
		}
	}
}

JavaScript

var token = '14575144.42d8141.2e9dd731cf5a475a94cc006c0e8b08b0',
    num_photos = 6, // maximum 20
    container = document.getElementById( 'instafeed' ), // it is our <ul id="rudr_instafeed">
    scrElement = document.createElement( 'script' );
 
window.mishaProcessResult = function( data ) {
	for( x in data.data ){
		container.innerHTML += '<a class="insta-image col-md-4" href=""><img class="img-fluid" src="' + data.data[x].images.standard_resolution.url + '"></a>';
	}
}
 
scrElement.setAttribute( 'src', 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + token + '&count=' + num_photos + '&callback=mishaProcessResult' );
document.body.appendChild( scrElement );