웹마스터 팁

  2. Support
  3. 웹마스터 팁

웹진/갤러리에서 썸네일 클릭 시 원본 이미지 보기 + HighSlide JS 적용 (수정)

2009.10.17 13:45

고진감래

소스 파일을 수정하는 것이므로 반드시 백업을 하시길 권합니다.

게시판의 썸네일 생성 함수를 응용해 원본 이미지를 구하는 함수를 만들어 
이를 게시판 썸네일에 링크 시키는 방식입니다.

1. (수정) modules/document/document.item.php 에서  } ?>  위에 다음 함수를 추가합니다.
      ※ (09.10.24 수정) 함수에 오류가 있어 수정했습니다.  

function getThumbSourceFile() {
            // 썸네일 원본 파일 출력함수
            if($this->get('uploaded_count')) {
                $oFileModel = &getModel('file');
                $s_file_list = $oFileModel->getFiles($this->document_srl);
                $s_source_file = $s_file_list[0]->uploaded_filename;
            }

            // 첨부된 파일이 없으면 내용중 이미지 파일을 구함
            if(!$s_source_file) {
                $content = $this->get('content');
                $s_target_src = null;
preg_match("/src=(\"|')([^\"' ]*?)(\"|')/is", $content, $s_matches);
              $s_target_src = trim($s_matches[2]);
                $s_source_file = $s_target_src;
            }
                      
            return $s_source_file;
        }
   }
?>

2. 게시판 스킨의 썸네일 링크 부분을 수정합니다. xe_official 게시판 스킨의 웹진 스타일을 예로 들면
modules/board/skins/xe_official/_style.webzine.html 에서 아래 부분을 찾아

<a href="{getUrl("document_srl',$document->document_srl,'listStyle',$listStyle, 'cpage','')}" class="thumb"><img src="{$document->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}" alt="" /></a>

다음과 같이 수정합니다.

<a href="{$document->getThumbSourceFile()}" class="thumb" target='_blank'><img src="{$document->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}" alt="" /></a> 

3. 만약 June Oh님의 HighSlide JS을 사용하고 있다면 아래와 같이 수정합니다.

<span class="thumb"><a href="{$document->getThumbSourceFile()}" class="highslide" onclick="return hs.expand(this)"><img src="{$document->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}" alt="" /></a></span>

4. 갤러리 스타일 역시 썸네일 부분을 찾아 위와 같은 방식으로 수정하면 됩니다. 
xe_official 게시판 스킨을 예로 들면 위의 2번 디렉토리에서 _style.gallery.html 파일을 아래와 같은 식으로 수정합니다.

<a href="{$document->getThumbSourceFile()}" target="_blank"><img src="{$document->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}" alt=""/><!--@if($module_info->use_category == "Y" && $document->get('category_srl'))--><strong class="category">{$category_list[$document->get('category_srl')]->title}</strong><!--@end--></a>

역시 June Oh님의 HighSlide JS을 적용하려면 아래와 같이 수정합니다.

<a href="{$document->getThumbSourceFile()}" class="highslide" onclick="return hs.expand(this)"><img src="{$document->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}" alt=""/><!--@if($module_info->use_category == "Y" && $document->get('category_srl'))--><strong class="category">{$category_list[$document->get('category_srl')]->title}</strong><!--@end--></a>
이 게시물을
좋아요
목록
제목 글쓴이 날짜
admin_bar.html 오류 해결팁? [1] 윤성희R 2013.03.27
iframe 등의 태그 화이트리스트 도메인 확인/추가하기 [1] Gunmania 2013.03.27
여러도메인 사용시 하나의 도메인을 기본도메인으로 지정하지 않고 사용하기! [6] 크루씨 2013.03.28
호스팅환경 말고!! 서버 환경에서 msg_make_directory_failed (쉬운설치) 해결 방법, (+아이콘 샵 아이콘 표시가 안될 경우) 파이어레듵 2013.03.28
Social XE 모듈의 클라이언트 토큰 발급 (난다날아님의 서버는 중지상태) [4] 팩트위키 2013.03.29
윈도우 서버 2012 에서 제로보드XE 설치부터 사용하기. [16] file 부롱이 2013.03.29
Startssl, iis에서 설치법. file 식군 2013.04.01
meta_add 애드온 수정.(1.7.3 버전에 맞게..) [4] file 투씨 2013.04.01
게시판 내용에서 하단에 빈 버튼 안보이게 하기 [2] file SEAN76 2013.04.04
DOM구조를 시각화해서 파악하기 [13] file 웹기프트 2013.04.04
데이터 이전 후 list_order 조정 [1] wooildang 2013.04.07
xe1.7.3.1 으로의 업데이트시 팝업모듈 오류 수정내역 [1] 날마다좋은날 2013.04.12
아이콘샵(v0.4) 관리자페이지 디자인수정파일(1.7.x 용) file 카이네드 2013.04.13
제로보드 xe 게시판 가로 푹 줄이기 방법좀 알려주세요. [1] 산업일꾼 2013.04.14
메뉴에 새글 표시 모듈이 작동하지 않은 문제 해결 [2] 샹하이 2013.04.15
필요한 함수 만들어 쓸 때. [3] 투씨 2013.04.16
XE 1.7 + 도쿠위키 Weatherwax RC1 세션 및 그룹 연동 [20] ay 2013.04.18
최근게시물에 움직이는 GIF 불러오기 SuP 2013.04.25
파일박스 사용에 관하여 [2] wooildang 2013.04.26
그누보드 > XE 이전툴 이용하여 이전하는 방법 [4] 개터리 2013.04.26
태그 쓰기