EVaRMR

EVaRMR.markdown

EVaRMR

Forked from Roadside Multimedia's Pen NGWdOL.

A Pen by Braunson on CodePen.

License.

index.html

<div id="instagram" class="makeMeScrollable">

</div>

script.js

////////////////////////////////
//
// CONFIGURATION VARIABLES http://stuffthatspins.com/2014/03/11/display-instagram-hashtag-and-user-picture-stream-really-easy-with-jquery-and-json/
//
////////////////////////////////

var access_token = "205065065.91a8be2.238555d34265492faa72cedffa2794ba"; //*** YOU NEED TO GET YOUR OWN ACCESS TOKEN FROM INSTAGRAM
//http://instagram.com/developer/authentication/
//http://dmolsen.com/2013/04/05/generating-access-tokens-for-instagram/

var resolution = "thumbnail"; // resolution: low_resolution, thumbnail, standard_resolution
var user_id = "205065065"; //userid
// var hashtag = "racehungry"; // #hashtag
var last_url = "";

//HASHTAG URL - USE THIS URL FOR HASHTAG PICS
//var start_url = "https://api.instagram.com/v1/tags/"+hashtag+"/media/recent/?access_token="+access_token;
//USER URL - USE THIS URL FOR USER PICS
var start_url = "https://api.instagram.com/v1/users/"+user_id+"/media/recent/?access_token="+access_token;

//https://api.instagram.com/v1/tags/racehungry/media/recent?access_token=1836…6303057241113856435_1395676110362&_=1395676128688&max_tag_id=1343521624608

function loadEmUp(next_url){
  
	//console.log("loadEmUp url:" + next_url);
	url = next_url;
	
	$(function() {
	    var instagram_feed = $.ajax({
		    	type: "GET",
		        dataType: "jsonp",
		        cache: false,
		        url: url ,
		        success: function(data) {
		        
		  		next_url = data.pagination.next_url;
		  		//count = data.data.length;
		  		//three rows of four
		  		count = 20; 
		
		  		//uncommment to see da codez
		        //console.log("count: " + count );
		        //console.log("next_url: " + next_url );
				//console.log("data: " + JSON.stringify(data) );
				
	            for (var i = 0; i < count; i++) {
						if (typeof data.data[i] !== 'undefined' ) {
						//console.log("id: " + data.data[i].id);
							$("#instagram").append("<div class='instagram-wrap' id='pic-"+ data.data[i].id +"' ><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></a></div>"
						);  
						}  
	      		}     
		  			  	
		  		console.log("next_url: " + next_url);
		  		$("#showMore").hide();
		  		if (typeof next_url === 'undefined' || next_url.length < 10 ) {
			  		console.log("NO MORE");
			  		$("#showMore").hide();
			  		$( "#more" ).attr( "next_url", "");
		  		}
		  		
		  		
	      		else {
			        //set button value
			        console.log("displaying more");
			        $("#showMore").show();
			        $( "#more" ).attr( "next_url", next_url);
			        last_url = next_url;
		      		
	      		}
	        }
	    });

			instagram_feed.done(function() {
		    $(".makeMeScrollable").smoothDivScroll({
          autoScrollingMode: "onStart"
        });
		  });
	});
}

//CALL THE SCRIPT TO START...
$(document).ready(function() {
	//start your engines
  loadEmUp(start_url);
});

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88150/jquery-ui-1.10.3.custom.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88150/jquery.kinetic.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88150/jquery.smoothdivscroll-1.3-min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88150/jquery.mousewheel.min.js"></script>

style.css

body {
  margin: 0;
}

div.scrollingHotSpotLeft
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	position: absolute;
	z-index: 200;
	left: 0;
  &:hover {
  	background: rgba(255,255,255,.7);
  }
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background: rgba(255,255,255,0);
	position: absolute;
	z-index: 200;
	right: 0;
  &:hover {
    background: rgba(255,255,255,.7);
  }
}
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
.makeMeScrollable
		{
			width:100%;
			height: 330px;
			position: relative;
		}
		
		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		.makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
    }
.instagram-wrap {
  display: inline-block;
}