비포에프터갤러리

· 2015-05-26 (화) 13:27:14 · 12970 · 7
beforeafter.jpg
작업전 이미지와 작업후 이미지를 따로 따로의 이미지로 비교해 보는 것이 아니라
하나의 이미지로 붙여 - 물론 하나의 이미지를 생성한 것은 아니고 자바스크립을 이용한...-
비교해 볼 수 있게 구성했습니다.

오픈소스인 jquery.beforeafter-1.4.js 파일을 이용했으며 필요 없다 싶은 부분은
삭제했습니다.

그누보드5 gallery게시판을 이용했으며 이미지에 마우스 오버하시면
드래그 이미지가 뜰것이고 그것을 드래그하거나 왼쪽 오른쪽을 마우스 클릭하시면
이미지가 이동되며 전/후 이미지를 비교해 보실 수 있습니다.

<<설치방법>>
1. 압축파일(beforeafter.zip)을 풀어 beforeafter폴더를 /skin/board/폴더에 올립니다.
그럼 /skin/board/beforeafter/ 로 구성되겠죠.

2. 압축파일 내에 있는 lib폴더의 두 파일은 그누보드5 원본파일을 약간 수정한 것으로
기존 것들이 수정된 상태면 해당 부분을 보고 삽입하시고, 그렇지 않고 원본을 유지하고
계신다면 그대로 붙여 넣으시면 되겠습니다.

2-1) common.lib.php 1311라인 주석된 부분을 보시면
if....else 부분을 넣어 주시면 되겠습니다.

이 부분 때문에 게시판명을 beforeafter로 하시던지, 그 부분 게시판명을 바꾸시면
되겠습니다.

2-2) thumbnail.lib.php 170라인 img태그 내에 class="ba" 를 넣으시면 됩니다.
이 또한 주석되어 있음.

3. 이미지크기는 view.skin.php 9라인 스타일시트의 width와 height를 조정하시면 되겠습니다.

4. 라이센스
- 오픈소스를 사용했으므로 사용은 자유이나 이 스킨을 독립적으로 판매하는 행위는 금합니다.

5. 주의
- 스킨 내 js폴더에 jquery-ui-1.10.3.custom.js 파일을 사용하고 있는데 이미 다른 버전을
사용하신다면 충돌로 인한 오류가 있을 수 있고, 동 버전을 사용하고 계신다면
view.skin.php 160라인 해당 부분을 삭제후 사용하십시오.

첨부파일

beforeafter.jpg (64.8 KB)
0회 2015-05-26 13:27
beforeafter.zip (162.9 KB) 252회 2015-05-26 13:27
|

댓글 7개

이거 방법 괜찮네요. 추천!
2015-05-28 (목) 19:27:36
감사합니다 ㅋㅋ
2015-05-29 (금) 15:41:24
잘 쓸께요.
2015-06-03 (수) 18:16:11
감사합니다^^*
handle.gif 이미지가 안보이네요 ㅠ.ㅠ
조절기능은 되는데 이미지가 안보이는 건 왜 그럴까요?
우왕우왕 신기방기^^ !!!!
감사합니다~
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 스킨

2,751건

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

+