뽀라닷컴
Loading...




웹디자인,포토샵,그누보드,제로보드,동영상제작 관련 메모 >>


전체(433)인터넷,컴퓨터 (93) | 웹디자인tip (179) | CG,그래픽tip (70) | BBS_Tip (74) | 영상tip (17) |
심플라이트박스 2017-09-10 12:55:40
홈페이지홈페이지

페이지에 slb.js 를 <script language="javascript" type="text/javascript" src="/slb.js" ></script> 와 유사한 방식으로 추가해 주신후에

<style type="text/css">
 html { width:100%; height:100%; }
 body { width:100%; height:100%; margin: 0px; padding: 0px; font-size:9pt; }
 .SLB_center { cursor:pointer; visibility:hidden; border: solid 4px #000000; background-color: #FFF}
 .SLB_close { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
 .SLB_caption { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
 #SLB_loading { cursor: pointer; display:none; z-index: 99998; position:absolute; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding: 3px 0px 4px 0px; border: solid 2px #cfcfcf; }
</style>

페이지에 위와 같이 스타일을 추가해주시구요~(css 에 추가하시거나~)

< div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; background-color:#000000; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;"></div>
< div id="SLB_content" onclick="SLB();" align="center" style="z-index: 99999; position:absolute;"></div>
< div id="SLB_loading" onclick="SLB();" title="로딩중...클릭시 취소"> Loading... </div>

위 3개 div 를 <body> 바로 밑에 추가해주시고 나서 아래의 예제를 참고하여 링크에 href="javascript:SLB('...');" 방식이나 onclick="SLB('...');" 으로 이용하시면 됩니다.

이미지 띄우기
실행코드: SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',true);
설명: SLB('이미지주소', 'image', 반투명배경클릭시닫기?(true or false));

이미지 띄우기 - 캡션과 함께
실행코드: SLB('http://i.blog.empas.com/frozen108/28257327_365x396.jpg','image',false, '오~이쁘당!김태희 ^^');
설명: SLB('이미지주소', 'image', 반투명배경클릭시닫기?(true or false), '캡션내용');

아이프레임 띄우기   [1]   [2]
SLB('http://www.yahoo.com','iframe', 600, 400, true, false);
[1] = SLB('./blank1.html','iframe', 400, 200, true, true)
[2] = SLB('./blank2.html','iframe', 400, 400, true, true)
설명: SLB('아이프래임 src', 'iframe', 가로크기, 세로크기, 아이프렘하단에 닫기버튼표시?(true or false), 내용에 맞게 아이프레임의 높이 자동 조절?(true or false));

html 띄우기1
SLB('
하하하하하
ㅋㅋㅋㅋ
','html');
설명: SLB('html 소스', 'html', 중앙 내용클릭해도 안닫히기?(true or false));

html 띄우기2
SLB('
TABLE
다른곳은클릭해도
안닫힘닫기는여기
onclick=\'SLB();\'
','html', true);

* 닫기는 SLB(); 를 호출하면 닫힘
* 아이프래임의 내부에 있는 문서에서 닫을려면 parent.SLB(); 로 닫을수 있음.
* 로딩중 표시를 클릭하면 로딩 취소됨
* 반투명배경의 투명도 및 색상은
<div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; background-color:#000000; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;"></div>
에서 수정가능
* 검정색 이미지 테두리의 두께와 색상은
.SLB_center { cursor:pointer; visibility:hidden; border: solid 4px #000000; background-color: #FFF}
에서 수정가능
* '내용에 맞게 아이프레임의 높이 자동 조절' 은 아이프레임 내부의 문서가 외부의 문서와 같은 도메인 안에 존재할때만 작동함.
* '내용에 맞게 아이프레임의 높이 자동 조절' 을 true 로 설정해도 기본으로 아무값이나 가로, 세로 값을 넣어줘야 함!.

 

 

아이프레임 안에서 호출할때는
프레임 밖에 설치하고
불러올때 parent.SLB(..) 형식으로 호출한다.

slb2는

제목처럼 수정한건데 맘대로 배포해되될지,,,
알릭님이 이해해주시겠죠 ^^;;


문제는 js를 compress한건데 그 전 원본이 없네요 ;;;
백업해둔다고 해둔것 같은데 수정 전 것만 있군요

수정하시기에 알릭님의 원본과 비교를 해보셔야 할겁니다

 

수정한 부분은

- 닫기버튼을 위로뺐고

- 이펙트를 없앴으며

- opacity는 따로 평션처리했으며

- radio 를 이용해서 리사이즈가 되도록했습니다.


닫기 버튼 이미지가 하나 필요하면 그건 첨부파일입니다.






    



slb.zip | 1.6 KB / 12 Download slb2.zip | 5.7 KB / 12 Download
목록보기 삭제하기

번호 제목 일자
433  [CG,그래픽tip] 미리보기베가스 세로 영상 가로로 편집  2020-10-07
432  [인터넷,컴퓨터] 미리보기윈도우10 - windows10 시작시 잠금화면 없애기  2020-05-08
431  [인터넷,컴퓨터] 윈도우10 - windows10 암호 없애기  2020-05-08
430  [인터넷,컴퓨터] 미리보기윈도우10 - windows10 캡쳐도구 사용  2020-05-08
429  [인터넷,컴퓨터] 미리보기윈도우10 - windows10 작업표시줄 검색 숨기기 아이콘표...  2020-05-08
428  [인터넷,컴퓨터] 디스크 쓰기금지 해결방법 - 외장하드 디스크 쓰기금지 해제방법  2020-04-29
427  [인터넷,컴퓨터] 스마트폰을 웹캠으로 사용하기  2020-04-09
426  [웹디자인tip] 천리안체  2020-02-20
425  [영상tip] 베가스 비디오 효과만 복사하기  2019-12-19
424  [영상tip] 베가스 화면 꽉차게 검은화면 안나오게 일괄설정  2019-12-16
423  [CG,그래픽tip] 미리보기일러스트 곡선, 오브젝트 길이 보기  2019-11-20
422  [BBS_Tip] 그누보드4 다운로드링크 사용하기  2019-10-26
421  [영상tip] 베가스 스틸 이미지 교체  2019-08-18
420  [인터넷,컴퓨터] 미리보기파일질라 한글파일 다운로드 문자셋 설정  2019-01-24
419  [영상tip] 베가스 스틸사진 일괄 길이 크로스페이드 조절하여 불러오기  2018-11-24
418  [영상tip] 베가스 스틸사진 타임라인에서 길이 일괄 조절 스크립트  2018-11-24
417  [인터넷,컴퓨터] windows failed to start .. 윈도우 부팅 시동 에...  2018-09-05
416  [인터넷,컴퓨터] 동영상을 gif 움짤로 변환해 주는 사이트  2018-04-25
415  [영상tip] 베가스 Project Media 정리  2018-04-20
414  [인터넷,컴퓨터] 윈도우 시작프로그램 목록 지우기  2018-04-18
413  [BBS_Tip] 그누보드 검색결과 페이지 태그 안 나오게 하기  2018-04-04
412  [인터넷,컴퓨터] 홈페이지의 옛모습을 볼수 있는 사이트  2018-03-31
411  [BBS_Tip] 그누보드 외부 페이지, 일반페이지 글쓰기  2017-09-22
 [웹디자인tip] 심플라이트박스  2017-09-10
409  [웹디자인tip] 위아래로 이동되는 스크롤바 따라다니는 레이어  2017-09-21
목록보기
12345678910