jquery获取instagram图片并添加fancybox效果

JQuery提供了$.ajax、$.getJSON方法，在我们获取ins官方提供的图片获取链接之后，我们可以很轻易的通过解析json数据拿到图片的相关信息。

获取ins提供的链接方法在此，当然由于最近instagram更换了部分代码，若想使用最新的获取方法，戳这里，当然你懂得，可能需要梯子辅助。

拿到的链接类似如下: https://api.instagram.com/v1/users/{user-id}/media/recent?access_token={your token}&count=100,这也是你ajax需要访问的连接地址，成功的话他会返回json数据文件。

{"pagination":{},
"meta":{"code":200},
"data":[
{"attribution":null,"tags":[],
"type":"image",
"location":null,
"comments":{"count":0,"data":[]}
,"filter":"Normal",
"created_time":"1449312299",
"link":"https:\/\/www.instagram.com\/p\/-6EEjVPZ6l\/",
"likes":{"count":0,"data":[]},
"images":{"low_resolution":{"url":"https:\/\/scontent.cdninstagram.com\/hphotos-xft1\/t51.2885-15\/s320x320\/e35\/12338611_734357206694842_230757882_n.jpg",
"width":320,"height":320},
"thumbnail":{"url":"https:\/\/scontent.cdninstagram.com\/hphotos-xft1\/t51.2885-15\/s150x150\/e35\/12338611_734357206694842_230757882_n.jpg",
"width":150,"height":150},
"standard_resolution":{"url":"https:\/\/scontent.cdninstagram.com\/hphotos-xft1\/t51.2885-15\/s320x320\/e35\/12338611_734357206694842_230757882_n.jpg",
"width":320,"height":320}},
"users_in_photo":[],

这是其中的一部分内容，其中我们需要的就是images-url内容，url可能需要经过一些小处理，其他的有caption-text是instagram上你对照片的描述，也可以取出来使用。

<script src="jquery.js"></script>
<script src="jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" />
<script type="text/javascript">
	$(document).ready(function(){  
    $("button").click(function(){  
    	$("button").hide();
	var dataobj;
        $.ajax({
        	url:'https://api.instagram.com/v1/users/{user_id}/media/recent?access_token={token}&count=100',

<span style="white-space:pre">		</span>//这里不提供本人的user_id以及toekn，需要替换你们自己的数据
        	async:false,
        	dataType:"jsonp",
        	type:"GET",
        	success:function(re){
        		dataobj=re.data;

        		for(var i=0;i<dataobj.length;i++){
        			var img1=parsetohtml(dataobj[i]["images"]["standard_resolution"]["url"]);
        			var text=dataobj[i]["caption"]["text"];

        			var str="<img  height=300 width=300 src='"+img1+"' alt='"+text+"'></img>";

        			var fancyboxdata="<a class='fancybox' href='"+img1+"' data-fancybox-group='gallery' title="+text+">"+str+"</a>";
        			$(fancyboxdata).appendTo("#diiv");
        		}

        	}
        });

        $(".fancybox").fancybox();//实现fancybox功能,在这之前必须引入 jquery.fancybox.js以及jquery.fancybox.css样式
    }); 

    function parsetohtml(url){//图片url处理函数
    	if(url.indexOf("outbound-distilleryimage")>=0){
    		var cdnNum = str.match(/outbound-distilleryimage([\s\S]*?)\//)[1];
			var arr = str.split("/");
			return "http://distilleryimage"+cdnNum+".ak.instagram.com/"+arr[arr.length-1];
    	}else{
    		var url1 = "http://photos-g.ak.instagram.com/hphotos-ak-xpf1/";
    		var arr=url.split("/");
    		return url1+arr[arr.length-1];
    	}
    }
}); 
</script>

类似的结果如下，点击图片呼出fancybox功能，实现fancybox的gallery形式。