PXE Gallery Widget은 최신 이미지를 보다 갤러리 형식에 맞게 표현하고자 하는 분들을 위한 강화판 위젯입니다. 이 위젯을 사용하면 이번에 새롭게 공개하는 XE 1.2 버전용 PXE Board Pro 보드 모듈의 갤러리 보기와 동일한 형식으로 최신 이미지를 추출하여 페이지에 출력시킬 수 있습니다. 이 위젯은 아래와 같은 특징을 가지고 있습니다.

• 배경 이미지를 이용하여 썸네일을 좀 더 다양하고 감각적으로 표현 할 수 있습니다
• 마우스 오버 미리보기 이미지를 통해 썸네일에서 모두 보여주지 못한 더 큰 부분까지 제공합니다
• 툴팁을 이용하여 지저분한 부가 정보를 깔끔하게 처리 합니다

---

압축을 풀어 나온 widgets 폴더를 XE가 설치 된 폴더의 widgets 폴더에 덮어 씌웁니다.

---

1. jQuery 플러그인과 스크립트 코드 활성화 (PXE Board Pro와 함께 사용되고 있는 레이아웃에는 이 과정을 생략하세요)
위젯이 서버에 업로드 되었으면 관리자로 접속합니다. 그리고 이 위젯이 적용되기를 원하는 레이아웃에 활성화 코드를 넣습니다. 사이트 설정 > 레이아웃에 들어가서 아래 이미지와 같이 헤더 스크립트 영역에 코드를 넣어야 합니다.


코드는 다음과 같습니다

주의! : PXE Board Pro는 이미 동일한 jQuery 플러그인에 대한 환경설정이 되어 있습니다. 동일한 설정이 중복되면 충돌현상이 발생하므로 PXE Board Pro를 사용하는 레이아웃에는 위의 코드를 추가하지 말고 사용하시기 바랍니다.

2. 레이아웃 파일(layout.html)에 직접 적용하는 경우
XE 관리자 페이지에 접속하여 사이트 설정 > 위젯으로 들어가 최근 이미지 출력의 코드생성을 눌러 설정창을 엽니다


기본 셋팅은 위 이미지와 같습니다. 이 위젯은 배경 이미지로 인해 썸네일의 가로와 세로 크기를 배경 이미지의 크기와 맞춰가면서 셋팅해야 합니다. 다른 배경 이미지의 사용에 대한 팁은 추후 설명하도록하고 일단은 기본으로 정해놓은 배경 이미지를 사용하기 위해 위 그림과 같이 셋팅합니다. 마지막으로, 이미지를 추출 할 모듈을 선택하고 코드생성 버튼을 눌러 출력 된 코드를 복사하여 layout.html의 원하는 위치에 넣은 후 서버에 업로드 함으로서 기본 셋팅이 끝나게 됩니다.

3. 온라인 상에서 페이지에 적용하는 경우
관리자 권한으로 접속 한 뒤 위젯을 삽입하고자 하는 페이지로 이동하여 페이지 수정 버튼을 누릅니다. 화면 우측 하단의 풀다운 메뉴에서 최근 이미지 출력을 선택한 후 추가 버튼을 눌러 위 이미지와 동일하게 설정하면 곧바로 페이지에 적용 됩니다.

---

1. 마우스를 올리면 나타나는 미리보기 이미지를 출력 시키려면?
게시판에서 가장 처음에 첨부되는 이미지 파일은 썸네일로 나타납니다. 마우스를 올렸을 때 나타나는 더 큰 미리보기 이미지는 첨부와는 관계없이 해당 게시물의 확장변수를 참조해서 출력하게 됩니다. 따라서 해당 보드 모듈에 확장변수 셋팅을 먼저 해야 합니다. 미리보기 이미지는 게시물의 확장변수 1번을 사용합니다. 따라서 이미지를 추출하는 원래 게시물의 확장변수 1번을 미리보기를 위해 사용해야만 합니다.

XE 관리자 페이지 > 서비스 관리 > 게시판 > 확장변수 설정에서 첫번째 확장변수를 아래와 같이 설정해 줍니다


이제 확장변수가 활성화 되었으니 게시물 쓰기에서 확장변수 입력항목이 나타납니다. 글쓰기에서 이 항목에는 미리보기 이미지로 사용 할 이미지가 위치한 경로를 적어주게 됩니다. 상대경로를 넣어줘도 되고 전체 URL도 상관 없습니다. 다른 사이트에 있는 이미지의 위치를 사용 할 경우에는 전체 URL을 적어주게 되겠죠. 이 부분을 찾기 버튼등으로 파일 첨부 형식이 가능하다면 좋겠지만 현재 XE에서는 확장변수에서 파일첨부를 지원하지 않습니다.

만일 test.jpg라는 이름의 이미지가 해당 보드 모듈의 images 폴더에 위치했다면,

만일 이미지가 루트 폴더의 images 폴더에 위치했다면,

만일 외부 사이트의 이미지를 넣어야 한다면 전체 URL을 넣어줍니다

2. 썸네일에 라벨을 달고 싶다면?
썸네일 이미지의 한편에 라벨을 달면 해당 게시물의 집중도를 올릴 수 있습니다. 이러한 라벨은 대부분 몇가지를 정해놓고 사용하기 때문에 위의 미리보기 이미지와는 다른 방식으로 출력하도록 합니다. 라벨을 사용하려면 해당 게시물의 확장변수 2번을 사용해야 합니다.


3. 제목에 마우스를 올렸을 때 나타나는 정보들을 관리하고 싶다면?
제목부에 마우스를 올리면 작성자, 작성일, 조회수등의 게시물 정보가 툴팁으로 나타납니다. 이 부분은 위젯 설정의 해당 정보의 출력 여부에 따라 달라지게 됩니다. 위젯 설정에서  출력하지 않음으로 설정 된 정보들은 여기에도 나타나지 않습니다.

4. 썸네일의 배경 이미지를 바꾸거나 크기를 바꾸고 싶다면?
이 위젯은 위젯 설정의 썸네일 크기를 128*83px에서 다른 크기로 변경하게 되면 배경 이미지가 이와 맞지 않게 됩니다. 이것은 border가 아닌 background 프로퍼티를 사용하기 때문입니다. 썸네일 크기를 바꾸고자 한다면 배경 이미지의 크기도 그와 맞는 것이 별도로 필요하다는 뜻 입니다.

포토샵등에서 별도의 배경 이미지를 만들어서 아래의 경로에 있는 이미지를 대체합니다

아래의 CSS 파일을 엽니다

이미지의 가로와 세로크기를 각각 변경해 줍니다. 이 크기는 배경 이미지의 실제 사이즈와 동일한 수치를 넣습니다

썸네일 이미지의 좌우는 중앙정렬로 설정되어 있으므로 아래의 top 프로퍼티로 상하의 위치만 수정해 줍니다. 숫자가 높아질수록 썸네일 이미지는 밑으로 내려갑니다

5. 미리보기 이미지와 툴팁을 감싸는 테두리 색상과 여백을 변경하고 싶다면?
아래에 위치한 파일을 엽니다

아래의 CSS 코드를 찾습니다. 가장 하단에 위치하고 있습니다. 이 코드가 툴팁에 관련 된 모든 스타일을 지정하고 있으므로 이 안에서 원하는 색상과 여백등 원하는대로 조절 할 수 있습니다 (CSS 스타일 설명까지는 여기서 언급하지 않겠습니다)

---

• 이 위젯은 XE 1.2 이상에서 작동합니다
• 이 위젯은 jQuery 플러그인을 사용합니다. XE 1.2에 기본 탑재되어 있으니 자동 작동합니다
• 이 위젯에 포함 된 jQuery 플러그인의 라이센스는 MIT/GPL/LGPL로서 상용으로의 이용이 허가되어 있습니다
  
• 이 위젯은 jQuery 호출용 함수를 사용 할 때 Prototype과 같은 다른 자바스크립트 프레임워크와 충돌을 피하기 위한 우회 함수코드를 사용하고 있습니다. 따라서 Prototype을 사용하는 XE에서도 정상적으로 작동합니다
• 이 위젯 역시 화면 양쪽에 딱 떨어지는 정렬은 현재의 마크업 코딩의 한계로 인해 불가능합니다. 깔끔한 정렬을 위해서는 기본적인 HTML 및 CSS 코딩 능력이 있어야 하며 직접 코드를 만져 각 사이트에서의 서로 다른 화면 정렬에 대해 스스로 대처해야 합니다
  

---

• 비영리 라이센스 : 10,000원
• 영리 라이센스 : 30,000원

라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.