블로그등에서 많이 사용하는 lightbox 효과 정말 쓸만하고 쏠쏠한 기능들을 제공하지만
갤러리작업도중 iframe 속에 있을경우 전체창에서 lightbox 가 실행되지 않고
아이프레임 속에서 효과가 적용되어 곤란한 상태가 발생!!!!
인터넷으로 이것저것 찾다보니
다양한 버젼들을 발견하게 되더란 말씀..ㅎ
lightbox 홈페이지에 아이프레임에서 사용할려면 Lytebox 쓰라는 comment 가있다는 글을보구
Lytebox를 찾아보니..
아이프레임속에서 실행되더라도 전체브라우져 창으로 이미지 보기를지원!!!
더불어 같은효과로 프레임셋을 만들어 외부페이지도 불러올수 있다는..
Lytebox homepage : http://www.dolem.com/lytebox/
아래는 홈페이지에 게시된 사용법
-----------------------------------------------------------------------------------
Step 1: Download Lytebox v3.22 먼저 다운을 받고
Step 2: Add the following lines to the <head> of your document: 적당한 위치에 넣어주구
<script type="text/javascript" language="javascript"
src="lytebox.js"></script>
<link rel="stylesheet"
href="lytebox.css" type="text/css" media="screen" />
Step 3: Add the appropriate rel attribute for the
type of display you want. See the examples below.
Single Image Example: 단일이미지만 view 할때
<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>
Grouped Images Example:
여러개의 이미지 - next / prev 가생김
<a href="images/image-1.jpg" rel="lytebox[vacation]"
title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg"
rel="lytebox[vacation]" title="My Sister">My Sister</a>
Slideshow Example (note the use of lyteshow instead of
lytebox): 그룹이미지 슬라이드쇼
<a href="images/image-1.jpg" rel="lyteshow[vacation]"
title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg"
rel="lyteshow[vacation]" title="My Sister">My Sister</a>
HTML Content Example (note the use of lyteframe instead of
lytebox):
이미지외에 페이지를 불러올려면 lyteframe 라고 rel을 줘서 페이지를 호출하면 된다는..
단일페이지->
<a href="http://www.google.com" rel="lyteframe"
title="Search Google"
rev="width: 400px; height: 300px; scrolling:
no;">Google Search</a>
여러페이지->
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer
Catalog">Summer Catalog</a>
<a href="catalog1.htm"
rel="lyteframe[catalog]" title="Winter Catalog">Winter
Catalog</a>
그외의 참고할만한것들 링크
lightbox : http://www.huddletogether.com/projects/lightbox/
lightbox2 : http://www.lokeshdhakar.com/projects/lightbox2/
lightbox+ : http://serennz.sakura.ne.jp/toybox/lightbox/
'HTML.Js' 카테고리의 다른 글
| jquery 슬라이더,뉴스티커,메뉴효과(슬라이딩다운) (0) | 2013.04.01 |
|---|---|
| 폼작성중 페이지를 벗어날때 경고메세지띄우기 (0) | 2012.11.30 |
| 컨텐트 슬라이더. (0) | 2012.11.30 |
| JScript.Encode 복호화 방법 (0) | 2007.07.16 |
| iframe 사이즈 조절 (0) | 2006.11.23 |
댓글