웹마스터 팁

  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>
이 게시물을
좋아요
목록
제목 글쓴이 날짜
익명게시판에서 관리자가 글 수정시 글의 권한이 넘어가지 않도록 하기. [5] 소시덕분에힘받아요 2014.06.11
레이아웃에 배경이미지 업로드 하고 적용시키기 [1] 웹빌드ver2 2014.06.10
이거 어디다 올려야 될 지 몰라 여기다 올립니다. 프로그래머님들 읽어보세요. [2] 유샤인 2014.06.10
Google Public DNS 강제 Flush Cache 하기 AJKJ 2014.06.08
윈도우7/8에서네임서버 운영 POSTZI 2014.06.08
XHTML 과 CSS 오류검사를 해주는 사이트 입니다. 디테일 2014.06.07
에디터에서 나눔고딕 웹폰트, 기본글꼴로 적용하기(구글API이용) [6] file 애니즌 2014.06.06
회원정보에서 '서명' 수정이 반영되지 않을 경우 Novelic 2014.06.03
마이피플봇을 이용한 마이피플 알리미 (푸시서비스) 이용하기 [4] garnecia 2014.06.01
PHP에서 Socket.IO 서버로 요청 보내기 [3] 이즈야 2014.06.01
[1초팁] Google Fonts의 폰트파일이 XE템플릿 문법으로 불러와지지 않을때 mAKEkr 2014.05.31
게시판 comment 스타일 수정 웹빌드ver2 2014.05.30
홈페이지에 접속한 장치의 너비 구하기 [3] CosignStudio 2014.05.28
유저가 자신의 회원정보 전체를 공개/비공개 설정하게 하는 방법 [2] sejin7940 2014.05.27
윈도에서 버츄얼박스 실행 시에 작업표시줄에 보이지 않게 하기 hyun 2014.05.26
사용자정의에서 날짜형의 경우, 달력의 년수 선택범위를 늘리는 방법 sejin7940 2014.05.24
메뉴가 많을때 레이아웃 쉽게 변경하기 웹빌드ver2 2014.05.23
Draggable Captcha System for XE1.7.5 Member Module (QapTcha) [7] file 우진홈 2014.05.21
1.7.5에서 추가된 게시물당 최신댓글 불러오기 스킨에서 활용법 [2] file mAKEkr 2014.05.20
xe_documents DB 테이블이 깨져서 게시판이 엉망이 됄경우 file 지으니 2014.05.17
태그 쓰기