Lightbox 대용 이미지갤러리 [Lytebox v3.22]
- ① 티스토리에 적용하기



티스토리에 lightbox 플러그인이 있는데요.
이미지를 클릭해 보시면 아실 수 있다시피 lightbox는 사실 이런 식으로 떠야하는데,
제가 뭘 잘못알고 있던 걸 수도 있겠지만 티스토리 플러그인은 원저자의 저작물처럼 뜨질 않네요.
lightbox 2.04를 적용해 보았는데 마찬가지로 작동이 되지 않더군요...
티스토리 플러그인과 같은 버전인 치리님의 테터용 플러그인을 소스를 열어 보니
역시 이런 식으로 적용되는 게 아니었는데 티스토리는 뭔가 설정이 다르게 되어 있나봅니다.
(사실 자세히 모르겠지만 달라보입니다)




그래서 lightbox 홈을 기웃대다가 프레임용 lytebox를 적용했는데
어찌어찌 겨우 lightbox와 비슷하게 적용이 됐네요.
Lytebox 으로 가보시면 적용 방법이 간단하게 설명되어 있습니다만,
티스토리 적용시에 주의할 점을 알려드리겠습니다

소스를 다운 받으시면 css,js 파일과 이미지 폴더가 보입니다.
사용자가 원하는대로 스크립트와 스타일을 수정할 수 있습니다.
티스토리에 직접 적용하기 전에 먼저 js파일 설정을 보겠습니다.



A. lytebox.js 편집






lytebox.js 우마우스 클릭 > 편집 > 노트패드로 엽니다.
상단에서 조금 스크롤 해보시면 이러한 내용이 있습니다.

//*************************/

// LyteBox constructor
//*************************/
function LyteBox() {

바로 아랫 줄의   /*** Start Global Configuration ***/가 보이실 겁니다.
이 Global Configuration에 기본으로 세팅된 내용이 들어 있습니다.
테마, 애니메이션 효과, 플래시 효과, 테두리 사용, 바탕 색상 투명도 등을 조절할 수 있습니다.
그냥 올리셨다면 다시 업로드 하셔야 합니다.



기본 세팅 편집)



1. theme는 테마 설정입니다.
css에서 테마 색상을 수정할 수 있으나 그냥 사용하시고 싶으신 분은 원하시는 컬러로 바꿔주시면 됩니다.
기본은 그레이고, 레드,그린,블루,골드의 색상이 추가적으로 있습니다.

this.theme                = 'grey';



2. hideFlash   플래시 콘트롤입니다. 기본은 true로 설정되어 있습니다.
그냥 두시려면 true, 숨기시려면 false로 고쳐주세요.

this.hideFlash          = true;       



3. outerBorder는 테마 색상의 아웃라인(테두리선)입니다.
테두리를 보이시려면 true, 보이게 하지 않으시려면 flase로 설정해 주세요.       

this.outerBorder        =true;



4. resizeSpeed는 이미지의 사이즈가 바뀌는데 걸리는 시간 입니다.
1=가장 느리게 10=가장 빠르게라고 주석이 달려있지만,
10도 그다지 빠른 편이 아니니 그냥 10으로 설정하시길 권장합니다.

this.resizeSpeed       = 8;



5. maxOpacity는 보이고 있는 이미지 밖 부분의 바탕색 투명도입니다.
숫자가 높으면 색상이 진하고 낮을수록 투명해집니다.
테두리선의 색상과 같은 색으로 할 때는 50 이하로 두셔야 좀 구분이 됩니다.   

this.maxOpacity         = 80;



6. navType은 이미지를 클릭하는 네비게이션 설정입니다.
1은 상위 왼쪽과 오른쪽에 Prev와 Next 이미지 버튼으로 되어 있고,
2는 하단에 << prev | next >>로 텍스트 링크가 생성됩니다. 기본 설정은 1로 되어있습니다.
링크에 생기는 점선을 보이지 않게 해도, css에 hover 효과를 넣어두실 경우 이미지창에 적용됩니다.

this.navType              = 1;


7. autoResize는 이미지 자동 사이즈 조절입니다.
브라우저 창의 사이즈보다 클 경우 조절해주는 기능입니다.
그대로 사용하실 분은 true, 조절하시지 않으실 분은 false로 변경하세요.
this.autoResize         = true;

      
8. doAnimations는 이미지가 뜰 때 사라지거나 나타나는 명도 조절효과입니다.
그대로 사용하실 분은 true, 조절하시지 않으실 분은 false로 변경하세요.
this.doAnimations        = true;
       

9. borderSize는 테두리 선의 두께입니다.
원하시면 CSS에서 설정하실 수도 있지만 여기에도 남겨두어야 합니다. 기본은 12입니다.       
this.borderSize           = 12;
    







여기까지 설정하면 아랫 줄에  /*** Configure Slideshow Options ***/이 보이실 겁니다.
Configure Slideshow Options에는 슬라이드쇼의 추가 설정이 들어 있습니다.
이 부분은 사용하실 분만 설정하시면 됩니다.




옵션 세팅 편집)



1. slideInterval은 다음 이미지로 넘어 갈 때 이미지가 머 무는 시간을 초 단위로 설정한 것입니다.
기본은 10000으로 설정되어 있는데, 원하시는 대로 줄이거나 늘릴 수 있습니다. 10000은 10초입니다.
      
this.slideInterval        = 10000;
   


2. showNavigation은 슬라이드쇼로 보여지는 동안의 이전,다 음 클릭 버튼 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.      

this.showNavigation        = true;
     


3. showClose는 슬라이드쇼로 보여지는 동안의 닫기 클릭 버튼 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.          

this.showClose            = true;
       


4. showDetails은 슬라이드쇼로 보여지는 동안의 표시되는 페이지 넘버와 캡션 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.      

this.showDetails        = true;


      
5. showPlayPause는 슬라이드쇼로 보여지는 플레이와 멈춤 클릭 버튼 설정입니다.
보이게 두시려면 true, 숨기시려면 false로 변경하세요.      

this.showPlayPause        = true;

    

6. autoEnd는 마지막 이미지를 보인 뒤 자동으로 슬라이드쇼 창이 닫히는 설정입니다.
자동 닫기 설정을 사용하시려면 true, 열려있는 상태로 두시려면 false로 변경하세요.      

this.autoEnd            = true;


       
7. pauseOnNextClick는 슬라이드쇼가 멈춘 상태에서 다음 버튼 설정입니다.
다음 이미지 버튼을 클릭 할 수 있도록 설정하시려면 true, 사용하지 않으시려면 false로 설정하시면 됩니다.
기본은 false로 설정되어 있습니다. 

this.pauseOnNextClick    = false;



8. pauseOnPrevClick은 슬라이드쇼가 멈춘 상태에서 이전 버튼 설정입니다.
이전 이미지 버튼을 클릭할 수 있도록 설정하시려면 true, 사용하지 않으시려면 false로 설정하시면 됩니다.
기본은 true로 설정되어 있습니다. 

this.pauseOnPrevClick     = true;
     


잘못할 경우 모양이 바뀌기도 해서 기본 그대로 사용하는 게 나을 수도 있습니다.
저는 navType=2, 바탕투명도 20에,
너무 느리게 떠서 플래시만 두고 애니메이션은 false로 뒀습니다.
lightbox는 좀 더 빠르지 않을까 하는 생각도 들지만 아무래도 적용이 안되네요.
혹시 관심있으신 분은
lightbox 에서 확인해 보세요.
thicbox도 좋을 것 같은데, 티스토리에 적용이 될지는 모르겠네요.






B. 티스토리 스킨 편집


 
스킨 편집은 별로 복잡하지 않습니다.
위에 스크립트만 잘 편집하시면, 대부분 오류없이 잘 됩니다.


적용 방법)


1. 파일 업로드

다운받으신 lytebox.js와 이미지 폴더 안에 이미지스킨 > 직접 올리기로 올려주세요.
사용하실 테마의 이미지만 올리셔도 됩니다. 기본 테마는 grey입니다.
스크립트 파일에서 테마를 수정을 하신 경우,
적용 테마 이미지와 loading.gif, blank.gif를 업로드해주세요.




2. skin.html 편집


스킨 > html/css 편집
으로 가서 skin.html을 보시면 head 메뉴 테그가 보입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>


<head></head> 사이에 다음 소스를 삽입해주세요.
 
<script type="text/javascript" language="javascript" src="./images/lytebox.js"></script>


적용 예)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="./images/lytebox.js"></script>
</head>

경로의 수정없이 삽입해야 합니다.




3. style.css 편집


style.css에 lytebox.css 내용을 추가해 주시면 됩니다.
lytebox.css을 우클릭 > 편집 > 노트패드로 열어서 모두 복사 > 붙여넣기 해주세요.
style.css의 내용이 길거나 복잡하시다면 사용하시는 테마만 추가하셔도 상관없습니다.


적용 예) grey 테마
/* 이미지 갤러리 시작*/

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
    #lbOverlay.grey { background-color: #000000; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
    #lbOuterContainer.grey { border: 3px solid #888888; }
                                                     .
                                                     .
                                                   중략
                                                     .
                                                     .
#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
    #lbPlay.grey { background: url(images/play_grey.png) no-repeat; }
   
#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
    #lbPause.grey { background: url(images/pause_grey.png) no-repeat; }

/* 이미지 갤러리 끝*/

+ 이미지 파일을 임의대로 사용하실 경우, 스킨 이미지로 업로드하신 후
url(images/파일네임)을 업로드하신 파일명으로 수정해주세요.



일단 여기까지가 티스토리에 lytebox를 사용할 수 있게 적용해 놓는 설정입니다.
포스팅에 적용하는 방법을 따로 빼둔 것은 그쪽이 더 복잡하기 때문입니다.
내용대로 됐다면 스킨에서 고치실 부분은 없을 겁니다.


포스팅에 넣는 방법은 포스팅에 사용하기에서 보실 수 있습니다.

저작자 표시 비영리 변경 금지
신고
Posted by 크림*앙마

::: Write a comment :::

  1. Favicon of http://regimegratuitefficace.unblog.fr/ BlogIcon Betsey commented at 2011.12.15 14:19 신고 │ + - │ add a new comment

    볼 나는 후회 '다시 쓰기를 약간 정기적으로 !

  2. Favicon of http://maigrirvite.biz BlogIcon maigrir commented at 2012.03.03 06:21 신고 │ + - │ add a new comment

    좋은 . 좋은 주신 것이다 나 페이 스북 을 사랑하지만, I를 찾을 수 없습니다로 반대 찾을 수 없습니다 버튼을 .

  3. Favicon of http://www.sauterautomation.com BlogIcon auto car commented at 2013.01.29 20:28 신고 │ + - │ add a new comment

    i like to see lap in the miles

  4. Favicon of http://www.sellautomatic.com BlogIcon automatic car commented at 2013.01.29 20:28 신고 │ + - │ add a new comment

    i like to see lap in the miles

  5. Favicon of http://www.southbendinautorepair.com BlogIcon south auto repair commented at 2013.01.29 20:28 신고 │ + - │ add a new comment

    i like to see lap in the miles

티스토리 툴바