jSON Instagram Slider

Create a custom Instagram slider for your site using jSON and the following instructions…

Template:

<div class="feed">

    <?php
	      
	$IGAccessToken = "use.a.plugin.to.retrieve.your.token";
	
	$photo_count=32; // must be an even number
	     
	$json_link="https://api.instagram.com/v1/users/self/media/recent/?";
	$json_link.="access_token={$IGAccessToken}&count={$photo_count}";
	
	
	$json = file_get_contents($json_link);
	$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING); ?>

	      
		      
	<div class="feed-slide feed-0">
	
		      
	<?php
			      
	$photoCount = 1;	
		      
	foreach ($obj['data'] as $post) {
	     
	    $pic_text=$post['caption']['text'];
	    $pic_link=$post['link'];
	    $pic_like_count=$post['likes']['count'];
	    $pic_comment_count=$post['comments']['count'];
	    $pic_src=str_replace("http://", "https://", $post['images']['standard_resolution']['url']);
	    $pic_created_time=date("F j, Y", $post['caption']['created_time']);
	    $pic_created_time=date("F j, Y", strtotime($pic_created_time . " +1 days"));
	     	
			// if($photoCount & 1) {
				// its an odd number, need to start new div 
			if($photoCount & 1) { ?>
	</div>
	<div class="feed-slide feed-every">
	
				<?php
			}
	        echo "<a href='{$pic_link}' target='_blank' class='slide_link'>";
			
			            echo "<img class='img-responsive photo-thumb' src='{$pic_src}' alt='{$pic_text}'>";
	        echo "</a>";
	
			$photoCount ++;
			
	} ?>
		      
	</div>


jQuery:

jQuery('.feed').slick({
draggable: true,
lazyLoad: 'progressive',
swipe: true,
autoplay: true,
autoplaySpeed: 2000,
slidesToShow: 4,
dots: false,
arrows: false,
responsive: [{
		breakpoint: 1600,
		settings: {
			slidesToShow: 3,
			slidesToScroll: 1,
		}
	},
	{
		breakpoint: 1200,
		settings: {
			slidesToShow: 3,
			slidesToScroll: 1,
		}
	},
	{
		breakpoint: 900,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 1,
		}
	}]
});


// set instagram slider image container to half height of instagram parent div
jQuery('.slide_link').height( jQuery('#instagram_block').height() / 2 );

CSS:

.slide_link {
	position: relative;
	display: block;
	height: 250px; /* overwritten by jQuery */
	overflow: hidden;
}

.feed-slide.feed-every {
	position: relative;
}

.photo-thumb {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	right: 0;
	margin: auto;
	min-height: 100%;
	min-width: 100%;
}


Display:

json instagram slider using slick

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.