트위터 인스타그램 등 sns 와 이미지 동영상 주소로 미리보기 자동 변환 토글 버튼 출처포함

트위터 인스타 유튜브 자동전환 수정

 

우선은 xe 댓글에서 사용되어지려는 것에서 시작되었습니다.

 

기준은

1. xe 댓글에서 이미지,동영상,sns,등을 주소만 입력해도 미리 보여지는 기능

2. 바로 보여지는 게 아니라 해당 미리보기 위에 클릭하면 토글되어지는 여닫기 기능

3. 2에서 각각의 이미지/영상/SNS등에 여닫기 버튼이 달리는 형태

 

 

 

 

우선 그누보드에서 자동으로 트위터 인스타그램 유튜브 데일리모션 카카오티비 등을 현재 페이지에서 출력해주는 

코드를 보았는데

 

이미지와 동영상은 기존에 comment.item.php 에서 직접 출력전에 정규식으로전환해서 뿌렸기 때문에

스크립트는 위에 말한 트위터 등에서만 작동하는데 이것을

sir.kr/g5_plugin/5184

트위터, 유튜브, 인스타그램 자동변환(1.15 비메오, 데일리모션 추가) > SIR

위에 말한 기능을 짬뽕시켰다-_-

 

1. 이미지/동영상/SNS등 미리보기

2. 그리고 약간의 수정

스크립트들이 중복으로 불려지는 부분이 있어서 앞으로 빼내고 

오토링크 지우는것은 이미지/동영상일때 만 처리했다.

 

트위터/인스타만 우선 여닫기클릭 할 수 있게 출력시키고 css를 따로 빼면 어딘가에 붙여넣기가 복잡해지니

스크립트 안에서 최대한 집어넣었다.

 

 

 

setting에서

적용할 클래스

그리고 그담 클래스는 그냥 적당히 2개.

1개는 버튼이 위치할 큰박스

그안에 박스는 아이템 담는 박스

그리고 출력될 문구..정도

css는 코드 맨 뒤에 붙어있다.

녹색으로 했다.

 

/*2019-01-15 Version 0.2 Mady by Vorfeed */
//setting
var zejeClass="xe_content";
var zeje="warn_media";
var zejechild="warn_item";
var zejeclick="x-click-x";

function zejemedia(t){var e=/http[s]?:\/\/(.*\.)(jpeg|jpg|png|gif|mp4)/gi;auto_link_del(t,/<a href="(http[s]?:\/\/.*?\.)(jpeg|jpg|png|gif|mp4)"[^>]*>(http[s]?:\/\/.*?\.)(jpeg|jpg|png|gif|mp4)<\/a>/gi,true);for (e,i=(t.$element.html().match(e)||[]).length,a=t.$element.html(),r='<div class="'+zeje+'"><img class="warn_item" width="'+t.settings.width+'" height="'+t.settings.height+'" src="//[URL]" ></div></div>',s='<div class="'+zeje+'"><video class="'+zejechild+'" width="'+t.settings.width+'" height="'+t.settings.height+'" src="//[URL]" '+t.settings.controls+'></video></div>',n=0;n<i;n++){var l=e.exec(a),o=l[1]+l[2];if(l[2]=="mp4")a=a.replace(l[0],s.replace("[URL]",o));else a=a.replace(l[0],r.replace("[URL]",o));}console.log(r);t.$element.html(a);}function youtube(t){var e=[/<a href="(https?:\/\/youtu.be\/([a-zA-Z0-9\-_]+))"[^>]*>/gi,/<a href="(https?:\/\/www.youtube.com\/watch\?v=([a-zA-Z0-9\-_]+))"[^>]*>/gi];for(var i in e){for(var a=t.$element.html();;){if(null==(o=e[i].exec(a)))break;var r=o[1];a=a.replace(o[0],"")}t.$element.html(a)}var n=[/https?:\/\/youtu.be\/([a-zA-Z0-9\-_]+)/gi,/https?:\/\/www.youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)/gi],l='<iframe title="YouTube video player" width="'+t.settings.width+'" height="'+t.settings.height+'" src="//www.youtube.com/embed/#[CODE]" frameborder="0" allowfullscreen></iframe>';for(var i in n){for(a=t.$element.html();;){var o;if(null==(o=n[i].exec(a)))break;r=o[1];a=a.replace(o[0],l.replace("#[CODE]",r))}t.$element.html(a)}}function instargram(t){auto_link_del(t,/<a href="(https?:\/\/www\.)?instagram\.com(\/p\/\w+\/?)"[^>]*>/gi);for(var e=/(https?:\/\/www\.)?instagram\.com(\/p\/\w+\/?)/gi,i=(t.$element.html().match(e)||[]).length,a=t.$element.html(),r='<div class="'+zeje+'"><div class="'+zejechild+'"><blockquote width="'+t.settings.width+'" height="'+t.settings.height+'" class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com#[CODE]" data-instgrm-version="8"></blockquote><\/div><\/div>',n=0;n<i;n++){var l=e.exec(a);if(null==l)break;var o=l[2];a=a.replace(l[0],r.replace("#[CODE]",o)),t.$element.html(a)}}function KakaoPot(t){auto_link_del(t,/<a href="(https?:\/\/|www\.)play-tv.kakao.com\/channel\/[0-9]+\/(livelink|cliplink)\/([A-Za-z0-9]+)"[^>]*>/gi);for(var e=/(https?:\/\/|www\.)play-tv.kakao.com\/channel\/[0-9]+\/(livelink|cliplink)\/([A-Za-z0-9]+)/gi,i=(t.$element.html().match(e)||[]).length,a=t.$element.html(),r='<div class="videowrapper"><iframe width="'+t.settings.width+'" height="'+t.settings.height+'" src="https://tv.kakao.com/embed/player/#[CODE]?width=640&height=360&service=kakao_tv" frameborder="0" scrolling="no" ></iframe></div>',n=0;n<i;n++){var l=e.exec(a);if(null==l)break;var o=l[2]+"/"+l[3];a=a.replace(l[0],r.replace("#[CODE]",o)),t.$element.html(a)}}function Twitter(t){auto_link_del(t,/<a href="http(s)?:\/\/(.*\.)?twitter\.com\/(\w+)\/?status\/(\w+)"[^>]*>/gi);for(var e=/http(s)?:\/\/(.*\.)?twitter\.com\/(\w+)\/?status\/(\w+)/gi,i=(t.$element.html().match(e)||[]).length,a=t.$element.html(),r=0;r<i;r++){var n=e.exec(a),l=n[3]+"/status/"+n[4];a=a.replace(n[0],"<div class='"+zeje+"'><div class='"+zejechild+"'><blockquote class='twitter-tweet' data-lang='ko'> <a href='//twitter.com/#[CODE]' style='text-decoration:none;'><span style='font-size:15px;text-decoration:none;'></blockquote><\/div><\/div>".replace("#[CODE]",l))}t.$element.html(a)}function Vimeo(t){auto_link_del(t,/<a href="(https?:\/\/|www\.)vimeo.com\/([A-Za-z0-9]+)"[^>]*>/gi);for(var e=/(https?:\/\/|www\.)vimeo.com\/([A-Za-z0-9]+)/gi,i=(t.$element.html().match(e)||[]).length,a=t.$element.html(),r='<iframe src="https://player.vimeo.com/video/#[CODE]" width="'+t.settings.width+'" height="'+t.settings.height+'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',n=0;n<i;n++){var l=e.exec(a),o=l[2];a=a.replace(l[0],r.replace("#[CODE]",o))}t.$element.html(a)}function Dailymotion(t){auto_link_del(t,/<a href="(https?:\/\/www\.)dailymotion.com\/video\/([A-Za-z0-9]+)"[^>]*>/gi);for(var e=/(https?:\/\/www\.)dailymotion.com\/video\/([A-Za-z0-9]+)/gi,i=(t.$element.html().match(e)||[]).length,a=t.$element.html(),r='<iframe frameborder="0" width="'+t.settings.width+'" height="'+t.settings.height+'" src="//www.dailymotion.com/embed/video/#[CODE]" allowfullscreen="" allow="autoplay"></iframe>',n=0;n<i;n++){var l=e.exec(a),o=l[2];a=a.replace(l[0],r.replace("#[CODE]",o))}t.$element.html(a)}function auto_link_del(t,e,c){var x=c;for(var i=t.$element.html(),a=(i.match(e)||[]).length,r=0;r<a;r++){var n=e.exec(i);if(x)i=i.replace(n[0],n[1]+n[2]);else i=i.replace(n[0],"");}t.$element.html(i)}!function(i){var e="zejeView",a={width:480,height:315,controls:'controls',zejemedia:!0,youtube:!0,instargram:!0,kakao:!0,twitter:!0,vimeo:!0,dailymotion:!0};function r(t,e){this.element=t,this.$element=i(t),this.settings=i.extend({},a,e),this.init()}i.extend(r.prototype,{init:function(){this.settings.zejemedia&&zejemedia(this),this.settings.youtube&&youtube(this),this.settings.instargram&&instargram(this),this.settings.kakao&&KakaoPot(this),this.settings.twitter&&Twitter(this),this.settings.vimeo&&Vimeo(this),this.settings.dailymotion&&Dailymotion(this)}}),i[e]=i.fn[e]=function(t){return this.each(function(){i.data(this,"plugin_"+e)||i.data(this,"plugin_"+e,new r(this,t))})},i.fn[e].defaults=a}(jQuery,window,document),$(function(){$("."+zejeClass).zejeView({width:480,height:315,controls:'controls',zejemedia:!0,youtube:!0,instargram:!0,kakao:!0,twitter:!0,vimeo:!0,dailymotion:!0});$('.'+zejechild).css({display:'none'});$('.'+zejechild).before('<span>'+zejeclick+'</span>');$('.'+zeje+' span').css({color:'green',float:'left'});});jQuery(function($){$("."+zeje).click(function(){$(this).children('.'+zejechild).toggle();});});

 

작동은 보잘것없다.-_-

걍 토글이다.

 

 

닫혀있는 상태

펼쳐진 상태

기능 자체는 단순한데

autolink 생성 때문에 버벅거리고

그다음에 이미지/동영상에서에서 src에 바로 이미지 주소 넣을때 변환이 현재 url이 앞에 자꾸 붙어서 어쩔수없지 좀 지저분하게 넘겨줬다

 

작동은 하는데

 

자꾸 https://이미지주소.jpg 라고 하면 이것이 src에 들어갈때는 ex) src="hoai.tistory.com/module/board/skin/sketchup5/http://이미지주소.jpg" 이런 형태로 들어가버린다...

 

이현상은 왜 생기는지 아직 모르겠으나 작동은 되게 적당히 커팅해서 넣었다.

티스토리야 이런 기능들 참 많지만...@_@

xe 에서 사용하려는 기능들은 하나하나 다 손이 가야된다.

 

* 이미지 여러개 인경우에 문제 생기네 autolink 처리를 잘해야하겠다. 아님 끄던가;;;해야할듯

 

힘내게 bts 영상보기

youtu.be/gdZLi9oWNZg