jQuery fancybox, 다운로드와 라이선스

이젠 제가 스킨을 변경해서 jquery fancybox가 동작하지 않습니다. 그리고 사진은 개인 정보 차원에서 삭제했습니다. 2016.11.28

여기서는 jQuery fancybox에 대한 것이니 아래에 나올 것은 플래시와 아무 상관이 없다는 것을 알기 바란다. 멋있으면 플래시로 생각하는 경향이 있으니 적는다. 아울러 티스토리는 jquery fancybox를 사용할 수 있다는 것을 알면 좋겠다. 그리고  fancybox 다운로드 및 예제는 아래에서 링크의 페이지를 보기 바라고 페이지는 영어이다. 소스는 아래 링크에서 보고 나는 복잡해서 설명할 수 없다는 것을 알기 바란다. 

• fancybox 소스 다운로드 및 미리보기 : http://fancyapps.com/fancybox/

사진의 타이틀은 사진위에 

사진위에 제목이 나오게 하는 것은 helpers로 조정한다. 전에는 사진 제목이 사진를 가리지 않고 나오게 했는데 이번에는 type를 over로 해서 사진위에 나오게 했다. 그리고 type를 over로 하니 사진 설명이 한 줄이 아닌 줄바꿈이 됐다.

$(".fancybox")

                                    .attr('rel', 'gallery')

                                     .fancybox({

    openEffect : 'elastic',

                                     closeEffect : 'elastic',

                                     nextMethod : 'resizeIn',

                                     nextSpeed  : 600,

        

                                     prevMethod : false,

                                     helpers : {

                                          title : {

                                        type : 'over'

                                          }

                               }

                         });

      
      
      

위에서 사진을 클릭해서 보았다면 다양한 크기 사진을 보았을 것이다. 이렇게 다양한 크기의 사진으로 만들 수 있었던 이유는 위 사진 모두는 플리커(Flickr)에 있고, 플리커에 사진을 올리면 아래 그림과 같이 다양한 크기의 사진을 제공하므로 가능하다. 다른 곳은 다양한 사진의 크기를 지원하지 않으니 노가다를 해야 한다고 생각하니...

 

아래는 플리커(Flickr)를 유료가 아닌 무료로 사용할 때 제한이다. 아래 것을 삽입하면서 알았는데 아래 것을 더보기안에 삽입하니 익스플로러8에서 제대로 안 나왔다. 예전에 추천사이트에도 아래와 비슷한 것을 삽입했는데 안 나온 이유가 더보기안에 삽입한 것 때문인 것 같다. jquery를 사용할 때 익스플로러(IE) 6,7,8은 정말 골치이다.

스킨 변경하니 파일이 없다고 아래와 같이 나온 것이다.

사이트나 게시판을 fancybox안에 

사이트나 게시판을 fancybox안에 넣는 것 아주 유용할 것 같은데 문제는 로딩속도가 느리다는 것이 문제이다. 예로 내 블로그를 불러오면 로딩이 정말 느리다. fancybox안에 사이트나 게시판을 넣을 때 class="various" data-fancybox-type="iframe"를 추가하면 되고 창의 크기는 아래 코드에서 설정하는구나! 옵션 설정에 대해 알아봐야 겠다.

                  $(".various").fancybox({

                maxWidth : 800,

                maxHeight : 600,

                fitToView : false,

                width : '70%',

               height       : '70%',

               autoSize : false,

               closeClick : false,

               openEffect : 'none',

               closeEffect : 'none'

                });

• 티스토리 메인 : 티스토리 메인을 fancybox에 불러온 것이다.
• 네이버 : 네이버를 fancybox에 불러온 것이다.
• 내 블로그 : 내 블로그를 불어오는데 로딩이 느려 짜증난다.
• 웹페이지 나오게 : 티스토리에 올린 웹페이지 fancybox안에

유튜브 동영상을 fancybox안에

fancybox안에 유튜브 동영상이 나오는 것 연습중 1번을 유튜브 동영상의 공유링크를 사용한 것이고, 2번은 공유 iframe 소스에 있는 링크를 이용한 것이다. 둘 사이의 차이는 없고 무엇을 이용하느냐의 인 것 같다. 아이프레임으로 동영상 삽입하는 것은 아래와 같이 여러개의 동영상 이동시에 필요하니 알아두어야 한다. 유튜브 동영상 자동재생은 ?autoplay=1이다. 참고로 동영상은 유튜브 동영상,비메오 동영상,Metacafe,Dailymotion,Twitvid 의 동영상이고, Metacafe,Dailymotion는 모르겠다. 다음팟 동영상 등을 fancybox에 넣으려고 고생하지 말기 바란다.

1. 소녀시대 : Dancing Queen
2. 티스토리에서 스킨 적용과 설치 동영상 : 아이프레임(iframe) 이용

이전/다음 동영상 - 동영상 이동버튼 

 

아래는 유튜브 동영상 다음으로 넘어가기 연습중이고, 동영상을 보관할 수 있는 저장소는 유튜브의 자신의 채널을 무조건 방문해야 한다고 생각했다. 그러나 fancybox를 사용하면 동영상 전용페이지를 만들 수 있겠다. 동영상 녹화프로그램을 받아 동영상만 있는 페이지를 만들어야 겠다.

               $(".fancybox-mov")

                                         .attr('rel', 'gallery')

                                         .fancybox({

                                              openEffect  : 'none',

                                              closeEffect : 'none',

                                              nextEffect  : 'none',

                                              prevEffect  : 'none',

                                              padding     : 0,

                                              margin      : [20, 60, 20, 60] // Increase left/right margin

                        });

소녀시대의 I GOT A BOY 뮤직비디오 다음이 보아의 Only One뮤직비디오이고 싸이의 강남스타일뮤직비디오이다. 동영상에 마우스 포인터를 올리면 다음이나 이전으로 갈 수 있는 버튼이 나타난다. 사진에서 하는 것과 비슷하다. 이 경우는 유튜브 동영상에서만 해봤고 동영상은 아이프레임(iframe)을 사용하여 삽입한다. 문제는 익스플로러8에서는 버튼이 제대로 나오지 않는다. 익스플로러 다른 버전을 모르고... 항상 익스플로러가 걸리니 짜증이다.

라이선스

끝으로 fancybox의 라이선스를 보면 아래와 같다. 무료이면 어디까지가 무료인지 알고 사용하기 바란다. 무료라면 어떻게 사용하든 된다고 생각하면 저작권위반으로 고소당한다. 다운로드 사이트에 가면 얼마인지 나온다.

fancyBox licensed under Creative Commons Attribution-NonCommercial 3.0 license. : You are free to use fancyBox for your personal or non-profit website projects.  You can get the author's permission to use fancyBox for commercial websites by paying a fee.

위를 해석한 아래 문장을 보면 개인과 비영리만 무료이고 상업적 사이트는 비용을 지불해야 한다는 것을 알기 바란다. 영어 해석에 대한 것은 2013/03/03 - 번역,영어를 포함한 언어를 번역해야 한다면 크롬,알툴바 및 번역사이트 이용를 보기 바란다.

fancyBox는 크리에이티브 커먼즈 저작자 표시 - 비영리 3.0 라이센스에 따라 사용이 허가 : 귀하의 개인 또는 비영리 웹 사이트 프로젝트에 fancyBox를 사용하여 무료입니다. 당신은 비용을 지불하여 상업적 웹 사이트에 대한 fancyBox을 사용하는 저자의 허가를 얻을 수 있습니다.

얼마인가는 아래에 나왔다. 21,925달러가 아니라 21,925원이다. 

 - 무료로 팩스 10장보내기 :엔팩스 - 

jQuery lightbox에는 보통 lightbox나 fancybox가 있는데 상업적 사용이 아니라면 fancybox가 좋을 것 같다. 위에서 봤듯이 fancybox를 다양하게 활용할 수 있다. lightbox는 단지 이미지에만 적용할 수 있다는 단점이 있고, 티스토리에서 lightbox(라이트박스)와 fancybox를 적용한 것은 아래를 보세요. 티스토리에서 못하는 것이 없다는 것을 알기 바란다. 네이버 블로그,다음 블로그에서는 못하니 하지 말라 말하고 싶다.

• 2012/09/02 - 라이트박스(lightbox) 적용중 - 채은,채윤,채현

lightbox 다운로드는 아래의 링크에서 할 수 있다. 단 아래 링크는 한글 페이지가 아니라 영어 페이지다. 참고로 jQuery lightbox는 사진 등이 밝고 배경은 색으로 흐리게 되는 

• http://leandrovieira.com/projects/jquery/lightbox/ : lightbox 미리보기와 다운로드

몇 년 전에 위와 같은 글을 적으려 고생했는데....

무료 팩스