백.전.백.승.

배경에 나오는 유튜브는 [범죄도시] 입니다. 그리고 이전은 [댓글부대] 이었습니다. 참고로 유튜브 배경 멈춤, 소리, 재생 등은 오른쪽 상단 플레이바를 사용하면 됩니다.

Made with Bootstrap 3 And Powered by Tistory

젠틀맨 뮤비와 가사,싸이 유튜브채널,싸이 트위터 - jquery fancybox

홈 IT.인터넷.생활 관련/스크립트.HTML.CSS 2013. 4. 17. 07:30

지금 이 글을 쓰는 화요일 시간이 오후 10시 56분인데 조회수가 아래와 같이 9천 2백을 넘었으니 수요일에 오전에 1억건이 넘을 것 같다. 확인은 아래 싸이 유튜브 채널에서 확인해보기 바란다. 나는 거의 모든 글을 예약 발행을 한다. 예약 발행하니 오늘 날짜의 글을 어제 적은 글이다.



사진 3장

그건 그렇고 싸이의 젠틀맨 사진,뮤비,가사 등을 이용하면서 jQuery Fancybox가 어떤 것인가 보여주려 한다. 2013/03/16 - jQuery fancybox, 사용에 대한 고민중....을 적으면서 어떻게 활용할까 했었는데 마침 싸이의 젠틀맨으로 활용해보고자 한다. 아래 사진을 클릭하면 사진이 작은 사진에서 나오고 사진이 사이즈가 변하는 것이다. 아래 사진을 단지 3개이니 부족한 감이 있는데 많은 사진으로 보고 싶거나 자세한 정보는 2013/02/21 - 갤러리 - jQuery fancybox에서 볼 수 있다. 




위 사진에서 세번째는 플리커에서 사진을 올린 후 편집하여 색상과 효과를 주어 편집시켰는데 플리커에서 편집하는 것도 쓸만하네.


동영상과 가사

아래의 젠틀맨  뮤비를 클릭하면 뮤직비디오를 Fancybox안에서 볼 수 있고, 동영상 오른쪽에 마우스 포인터를 올리고 Next 버튼을 누르면 다음 동영상인 강남스타일이 나온다. 왼쪽으로 올리고 Previous는 이전 동영상인 강남스타일이 나온다.  이때 동영상이 나오게 하는 것은 플래시가 아니고 jQuery Fancybox라는 것을 알기 바란다. fancybox안에 나타낼 수 있는 동영상은 유튜브 동영상,비메오 등이고 다음 TV팟 등 국내의 동영상은 안 된다. 여담으로 오늘 알았는데 유튜브 동영상에 애드센스 광고가 나오는 경우 광고가 동영상을 가리는 경우가 가리는데 fancybox에 동영상이 나오게 한다면 동영상 하단에 광고가 나오므로 광고에 동영상이 가리는 것을 방지할 수 있네요. 무슨 말인지 모르면 직접 보기 바란다. 참고로 유튜브 동영상에 나오는 광고는 구글이 혼자 먹는 것이 아니고 동영상을 올린 사람과 나누어 가지는 것이다. 홈페이지나 블로그에 애드센스 광고를 다는 것과 같다고 생각하면 된다. 유튜브에 동영상을 올려본 사람은 광고 설정하는 법을 알 것 같다. 이 블로그에 애드센스를 달면 애드센스를 하는 구글이 꿀꺽하지 않거든요. 유튜브를 하는 운영하는 주체는 구글이고 구글에 나오는 광고는 애드센스다.

위에 젠틀맨 뮤비가 Fancybox에 안 나타나면 아래 더보기를 클릭하면 됩니다. 그리고 뮤직뮤비디오와 함께 가사도 볼 수 있다. 가사를 fancybox의 inline에 넣을려고 했는데 잘 안됐다. inline에 넣기 누워서 떡먹기 인데....


유튜브 채널

싸이 유튜브 채널을 여기를 클릭하면 보이는 것처럼 Fancybox에 나오게 하고 싶었는데 안 된다. 하는 수없이 브라우저에 나오도록 하겠다. 왜 안되지....

트위터

싸이 트위터의 아이디에 oppa가 들어가 있네. 내 생각에 그것은 강남스타일의 오빤 강남스타일일에서 oppa가 아닌가 한다. 오늘 보니 LA 다저스의 야구선수 류현진 선수의 젠틀맨 뮤비에 대한 트윗을 싸이 트위터에서 리트윗했네. 보안이 강화된 https:// 인 사이트는 fancybox안에 넣을 수 없다.그러나 주소가 http://인 경우는 넣을 수 있는데, 그 경우는 여기를(티스토리) 클릭하여 직접 보아라.


내려받기와 미리보기

여기에서 사용한 것은 플래시가 아니고 jQuery Fancybox라는 것을 알았으면 한다. 멋있으면 무조건 플래시라는 고정관념을 버리기 바란다.

이 글이 싸이의 젠틀맨에 대한 것보다 jQuery Fancybox에 대한 것이라서 다음뷰의 스타가 아닌 인터넷 채널에 발행했다. 티스토리에는 다음뷰라는 곳에 글을 공개하면 하면 보내기는 것을 발행하는데 그 발행을 하는데 채널을 선택한다. 네이버 블로그에서는 생소할 것이고 네이버 블로거중에 다음뷰에 발행해 본 사람은 무슨 말인지 알 것이다.

'IT.인터넷.생활 관련 > 스크립트.HTML.CSS' 카테고리의 다른 글

반응형 메뉴 - CSS 만 사용  (7) 2014.05.12
착각 말기와 결정 자유 - 플래시,HTML5,CSS3,jQuery 사용  (3) 2013.05.06
플래시가 아니고 CSS3의 transitions이다  (11) 2013.04.29
HTML5와 CSS3, jQuery 사용시 생각할 사항 2  (3) 2013.04.20
익스플로러,jQuery 사용시 생각할 사항  (0) 2013.04.16
롤오버실험,이미지 안쪽테두리와 CSS3 트랜지션(Transition)  (0) 2013.03.21
jQuery fancybox, 다운로드와 라이선스  (0) 2013.03.16
소제목만들기, 티스토리에서 멋있게 - jquery와 CSS사용  (17) 2013.02.17

'IT.인터넷.생활 관련/스크립트.HTML.CSS' 관련된 글 MORE

플래시가 아니고 CSS3의 transitions이다

2013.04.29

HTML5와 CSS3, jQuery 사용시 생각할 사항 2

2013.04.20

익스플로러,jQuery 사용시 생각할 사항

2013.04.16

롤오버실험,이미지 안쪽테두리와 CSS3 트랜지션(Transition)

2013.03.21


Close 방명록
×

카테고리




×
×

티스토리툴바