Lightbox2 적용 방법
Lightbox 는 사진 감상시 놀라운 효과를 나타낼수 있도록 도와주는 자바스크립트 라이브러리 입니다.
외국에서 제작된 것으로 링크1 을 클릭하시면 제작자 홈페이를 방문하실 수 있습니다.
Lightbox 를 프로그램에 적용하는 것은 메뉴얼에 나와있는 것처럼 매우 쉽습니다.
최근에 Lightbox 에 이어 Lightbox2 가 출시되었고 이 문서는 이에 대하여 설명합니다.
(Lightbox2 의 저작권은 Creative Commons Attribution 2.5 License 를 따르고 있다고 제작자 홈페이지에 나와있습니다.)
우선 위에 첨부파일을 다운로드 합니다.
Lightbox2 를 적용할 계정에 업로드하고 적용할 페이지에 스크립트 코드를 삽입합니다.
이때 js/ 디렉토리는 자신의 경우에 맞게 수정하셔야 합니다.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
이로써 Lightbox2 를 적용할 준비는 완료되었습니다.
Lightbox2 의 효과를 나타낼 이미지를 다음과 같이 링크하기만 하면됩니다.
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumbnail-1.jpg"></a>
<a href="images/image-2.jpg" rel="lightbox"><img src="images/thumbnail-2.jpg"></a>
<a href="images/image-3.jpg" rel="lightbox"><img src="images/thumbnail-3.jpg"></a>
경로나 파일명은 자신에게 맞게 수정하여야 한다는 것을 잊지마세요.
Lightbox2 를 적용한 스킨을 참고하세요. [바로가기]
외국에서 제작된 것으로 링크1 을 클릭하시면 제작자 홈페이를 방문하실 수 있습니다.
Lightbox 를 프로그램에 적용하는 것은 메뉴얼에 나와있는 것처럼 매우 쉽습니다.
최근에 Lightbox 에 이어 Lightbox2 가 출시되었고 이 문서는 이에 대하여 설명합니다.
(Lightbox2 의 저작권은 Creative Commons Attribution 2.5 License 를 따르고 있다고 제작자 홈페이지에 나와있습니다.)
우선 위에 첨부파일을 다운로드 합니다.
Lightbox2 를 적용할 계정에 업로드하고 적용할 페이지에 스크립트 코드를 삽입합니다.
이때 js/ 디렉토리는 자신의 경우에 맞게 수정하셔야 합니다.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
이로써 Lightbox2 를 적용할 준비는 완료되었습니다.
Lightbox2 의 효과를 나타낼 이미지를 다음과 같이 링크하기만 하면됩니다.
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumbnail-1.jpg"></a>
<a href="images/image-2.jpg" rel="lightbox"><img src="images/thumbnail-2.jpg"></a>
<a href="images/image-3.jpg" rel="lightbox"><img src="images/thumbnail-3.jpg"></a>
경로나 파일명은 자신에게 맞게 수정하여야 한다는 것을 잊지마세요.
Lightbox2 를 적용한 스킨을 참고하세요. [바로가기]
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
댓글 2개
18년 전
이미지에서 next prev 링크를 표시할려면 rel="lightbox[]" 와 같이 [] 를 붙이면 됩니다.
무식해서귀여운남자
18년 전
플레쉬 효과가 잇는 이미지 팝업창
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1530 |
1111111
|
18년 전 | 1974 | |
| 1529 |
행복속네잎크로버
|
18년 전 | 3475 | |
| 1528 |
행복속네잎크로버
|
18년 전 | 1864 | |
| 1527 |
1111111
|
18년 전 | 7657 | |
| 1526 |
1111111
|
18년 전 | 3292 | |
| 1525 |
행복속네잎크로버
|
18년 전 | 1273 | |
| 1524 |
행복속네잎크로버
|
18년 전 | 2316 | |
| 1523 |
행복속네잎크로버
|
18년 전 | 3517 | |
| 1522 |
행복속네잎크로버
|
18년 전 | 2373 | |
| 1521 |
행복속네잎크로버
|
18년 전 | 2156 | |
| 1520 |
행복속네잎크로버
|
18년 전 | 2770 | |
| 1519 |
행복속네잎크로버
|
18년 전 | 3727 | |
| 1518 |
행복속네잎크로버
|
18년 전 | 3493 | |
| 1517 |
행복속네잎크로버
|
18년 전 | 2578 | |
| 1516 |
행복속네잎크로버
|
18년 전 | 1929 | |
| 1515 |
행복속네잎크로버
|
18년 전 | 1949 | |
| 1514 |
행복속네잎크로버
|
18년 전 | 2518 | |
| 1513 |
행복속네잎크로버
|
18년 전 | 1996 | |
| 1512 | 18년 전 | 2888 | ||
| 1511 | 18년 전 | 1677 | ||
| 1510 | 18년 전 | 2211 | ||
| 1509 | 18년 전 | 1688 | ||
| 1508 | 18년 전 | 2144 | ||
| 1507 | 18년 전 | 2373 | ||
| 1506 | 18년 전 | 2304 | ||
| 1505 | 18년 전 | 2257 | ||
| 1504 | 18년 전 | 2181 | ||
| 1503 | 18년 전 | 3496 | ||
| 1502 | 18년 전 | 1680 | ||
| 1501 | 18년 전 | 3449 | ||
| 1500 | 18년 전 | 2040 | ||
| 1499 | 18년 전 | 5303 | ||
| 1498 | 18년 전 | 2166 | ||
| 1497 |
hsp1980
|
18년 전 | 2352 | |
| 1496 |
hsp1980
|
18년 전 | 1739 | |
| 1495 |
hsp1980
|
18년 전 | 2140 | |
| 1494 |
hsp1980
|
18년 전 | 3654 | |
| 1493 | 18년 전 | 1511 | ||
| 1492 | 18년 전 | 1753 | ||
| 1491 | 18년 전 | 4330 | ||
| 1490 | 18년 전 | 3717 | ||
| 1489 | 18년 전 | 3273 | ||
| 1488 | 18년 전 | 3373 | ||
| 1487 |
mixdesign
|
18년 전 | 3870 | |
| 1486 |
mixdesign
|
18년 전 | 4331 | |
| 1485 | 18년 전 | 4264 | ||
| 1484 | 18년 전 | 2709 | ||
| 1483 |
hsp1980
|
18년 전 | 2319 | |
| 1482 |
hsp1980
|
18년 전 | 3252 | |
| 1481 |
hsp1980
|
18년 전 | 3170 | |
| 1480 |
hsp1980
|
18년 전 | 3325 | |
| 1479 | 18년 전 | 3259 | ||
| 1478 |
 Nextstep |
18년 전 | 4927 | |
| 1477 |
Nextstep |
18년 전 | 5220 | |
| 1476 | 18년 전 | 3415 | ||
| 1475 |
mixdesign
|
18년 전 | 2730 | |
| 1474 |
mixdesign
|
18년 전 | 2950 | |
| 1473 |
mixdesign
|
18년 전 | 2280 | |
| 1472 |
mixdesign
|
18년 전 | 2089 | |
| 1471 |
mixdesign
|
18년 전 | 2048 | |
| 1470 |
 꿈꾸는비행기 |
18년 전 | 3080 | |
| 1469 |
mixdesign
|
18년 전 | 2366 | |
| 1468 |
mixdesign
|
18년 전 | 2389 | |
| 1467 |
mixdesign
|
18년 전 | 2069 | |
| 1466 |
mixdesign
|
18년 전 | 2437 | |
| 1465 |
mixdesign
|
18년 전 | 3163 | |
| 1464 | 18년 전 | 4092 | ||
| 1463 | 18년 전 | 3388 | ||
| 1462 |
 소울메이트 |
18년 전 | 2010 | |
| 1461 |
소울메이트 |
18년 전 | 1951 | |
| 1460 | 18년 전 | 2870 | ||
| 1459 | 18년 전 | 1666 | ||
| 1458 |
소울메이트 |
18년 전 | 2018 | |
| 1457 |
mixdesign
|
18년 전 | 2315 | |
| 1456 |
mixdesign
|
18년 전 | 2178 | |
| 1455 | 18년 전 | 2299 | ||
| 1454 | 18년 전 | 4052 | ||
| 1453 | 18년 전 | 1793 | ||
| 1452 | 18년 전 | 4412 | ||
| 1451 | 18년 전 | 2945 | ||
| 1450 | 18년 전 | 2232 | ||
| 1449 | 18년 전 | 3273 | ||
| 1448 | 18년 전 | 2915 | ||
| 1447 | 18년 전 | 2839 | ||
| 1446 | 18년 전 | 5645 | ||
| 1445 | 18년 전 | 2311 | ||
| 1444 | 18년 전 | 3425 | ||
| 1443 |
 Callto |
18년 전 | 3341 | |
| 1442 | 18년 전 | 3726 | ||
| 1441 | 18년 전 | 3273 | ||
| 1440 | 18년 전 | 2457 | ||
| 1439 | 18년 전 | 2102 | ||
| 1438 | 18년 전 | 2562 | ||
| 1437 | 18년 전 | 6124 | ||
| 1436 | 18년 전 | 2746 | ||
| 1435 | 18년 전 | 4553 | ||
| 1434 | 18년 전 | 2053 | ||
| 1433 | 18년 전 | 10056 | ||
| 1432 | 18년 전 | 2501 | ||
| 1431 |
Psychedelico
|
18년 전 | 1563 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기