맛집 여행 캠핑 일상 생활

인스타그램 iframe 에 사진 표시하기 본문

jQuery

인스타그램 iframe 에 사진 표시하기

영은파더♥ 2020. 1. 7. 09:51
728x90

인스타그램 iframe 에 표시하는 예제 소스코드입니다.

insta_urls 배열에 미리 주소값을 넣어놓으면 사진이 바로 보입니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="no-cache"/> 
	<meta http-equiv="Expires" content="0"/> 
	<meta http-equiv="Pragma" content="no-cache"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style>
		div.instagram_div { width:900px;height:1200px;padding:50px 0 50px 0;text-align:center;letter-spacing:3px;line-height:0px; }
		div.instagram_div > div { float:left;width:293px;height:293px;overflow:hidden;border:1px solid #cecece;margin:0 2px 5px 3px;line-height:293px; }
		div.instagram_div > div > iframe { width:293px;height:347px;overflow:hidden;margin-top:-54px; }
		div.instagram_div > div > input[type=text] { width:75%;text-align:center; }
	</style>
	<script>
		function SetCookie(cKey, cValue, cExpires) {
			var date = new Date();
			date.setDate(date.getDate() + cExpires);
			document.cookie = cKey + '=' + escape(cValue) + ';expires=' + date.toGMTString();
		}
		function GetCookie(cKey) {
			var allcookies = document.cookie;
			var cookies = allcookies.split("; ");
			for (var i = 0; i < cookies.length; i++) {
				var keyValues = cookies[i].split("=");
				if (keyValues[0] == cKey) {
					return unescape(keyValues[1]);
				}
			}
			return "";
		}
		function instagram_div_update(n) {
			var insta_urls = new Array(n); // 디폴트 인스타그램 사진주소
			var instagram_div = $('<div class="instagram_div"></div>').appendTo($('div.instagram_list_item'));
			var instagram_title = $('<h3>INSTAGRAM</h3><br>').appendTo($('div.instagram_div'));
			for(var i=0; i<insta_urls.length; i++) {
				var insta_img = $('<div><input class="instagram-url" type="text" value="" placeholder="인스타그램 사진주소를 입력하세요" /></div>')
							.appendTo($('div.instagram_div'));
				insta_urls[i] = GetCookie(i);
				if(insta_urls[i] && ~insta_urls[i].indexOf('https://www.instagram.com/p/')) {
					//console.log('url : ' + insta_urls[i]);
					instagram_load($('input.instagram-url:eq('+i+')'), insta_urls[i]);
				}
			}
			$('input.instagram-url').change(function(){
				var i = $('input.instagram-url').index(this);
				if(this.value.indexOf('https://www.instagram.com/p/')) {
					alert('올바른 주소가 아닙니다.\nhttps://www.instagram.com/p/xxxxxxxxxxx/ 형식의 주소입니다.');
				} else {
					SetCookie(i, this.value, 1);
					instagram_load(this, this.value);
				}
			});
		}
		function instagram_load(obj, url) {
			$(obj).hide();
			var ifrm = $('<iframe src="'+url+'embed" frameborder="0" scrolling="no" allowtransparency="true"></iframe>').appendTo($(obj).parent());
		}
		$(document).ready(function(){
			instagram_div_update(9);
		});
	</script>
</head>
<body>
	<div class="instagram_list_item"></div>
</body>
</html>

응용해서 사용하시면 됩니다.

 

728x90
반응형
저작자표시 비영리

'jQuery' 카테고리의 다른 글

[jQuery] 달력 picker API  (0) 2020.04.24
[jQuery] onkeyup 이 안먹히는 경우  (0) 2020.02.11
[jQuery] SELECT Change event by name  (0) 2019.11.07
[jQuery] img Not Found 처리 및 function 파라메터 값 전달 방법  (0) 2019.10.31
[jQuery] AJAX 외부도메인 PHP 호출 예제  (0) 2019.06.21
공유하기 링크
'jQuery' Related Articles more
Trackback : | Comments :