웹마스터 팁

  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>
이 게시물을
좋아요
목록
제목 글쓴이 날짜
업그레이드 쉽고,안전하게 하기(예제 포함해서 다시 올림) [2] file wannabewize 2008.07.13
에디터입력창 배경색상(이미지) 변경해보기 [5] [1] 팔공산 2008.07.13
초보 헤메다가 팁//인쇄영역 확장변수 포함 [8] file 리히토 2008.07.14
초보 헤메다가 팁//검색기능 보이기 감추기 [3] file 리히토 2008.07.15
자료 첨부 문제 단풍534 2008.07.15
초보 헤메다가 팁//댓글기능 보이기 감추기 [5] 리히토 2008.07.15
winxp IE7 rwapm에서 한글이름파일 업로드 [7] file 공수래 2008.07.15
게시글 본문 좌, 우측에 div 내용 넣기(수정) [5] file 라르게덴 2008.07.18
게시판(블로그)상단에 글쓰기버턴이나 링크넣기 [8] file 팔공산 2008.07.20
관리자만 ip 보이게 하기 [10] 老姜君 2008.07.20
로그인이 안되는 문제 [1] 젝망치 2008.07.21
로컬 설치 후 몇가지 문제점에 대해서 - 인덱싱. DB선택 등 서정일643 2008.07.22
본문의 서명과 프로필이미지를 끌어올려보자 [11] file CL님 2008.07.22
초간단! 게시물주소 클릭시 복사하기 ! [4] file gnee 2008.07.26
제로보드XE에서 표 쉽게 만드는 방법.. [23] 청개구리00 2008.07.27
코멘트를 달아야만 첨부파일 다운로드 할 수 있게 하기 [8] file 지오426 2008.07.29
제로보드XE 설치 완료버튼 누르니까 My sql 관련 내용 나오던데요 [3] Naver™ 2008.07.30
1.0.3 버전 이상부터 본문 내 이미지 자동 리사이징이 안되는 경우 [1] kirrie 2008.08.01
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] file Gnee 2008.08.02
제로보드 문자열 정교하게 자르기 [11] 젝망치 2008.08.03
태그 쓰기