웹마스터 팁

  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>
이 게시물을
좋아요
목록
제목 글쓴이 날짜
폰갭 작업시 폰 내부 html에 변수 전달 방법 (get) Happyphp 2014.12.09
IE에서 스크립트 생성 iframe 요소에 name 속성 지정이 무시될 때 신평 2014.12.08
파일첨부 된 글을 게시글 이동시, 사용자정의 값이 전부 삭제되는 버그 패치 [5] sejin7940 2014.11.20
블루호스트(Bluehost)에서 XE 제로보드 및 텍스타일 블로그 서브도메인에 설치하기 [4] file TELSTER 2011.03.25
jq로 데이터 입력시 enter키 먹게 하기 [3] Happyphp 2014.11.27
Simplestrap css, js cdn에서 로드하기 [5] file Typhoon 2014.08.29
bing 번역 함수 만들어 사용하기 Happyphp 2014.11.26
Animate 사용 돼지코구뇽 2014.11.26
1.7.3.2로 업데이트 이후, 글쓴이 제대로 표현하기 (스킨:스케치북5) [13] 준스타일 2013.05.04
xe 어플 개발시 키캡 4.4.4 미만 업로드 문제 [3] Happyphp 2014.11.25
누리고쇼핑몰-모바일 이니시스 결제에서 필수요청값 누락 에러로 결제 안되는것 해결하는 미봉책 garnecia 2014.11.23
누리고 쇼핑몰 - 모바일 버전에서 상품몰에 취소/환불 부분이 적용안되는부분 해결 하는 팁 garnecia 2014.11.23
회원가입확장 모듈 - 가입절차중 오류 발생시 처음으로 돌아가는 현상 [1] 김개발 2013.08.30
본문을 애드센스 주변에 배치하기 [1] file 하얀마법 2014.11.15
회원포인트 목록에서 검색 후 포인트 업데이트시 검색 상황이 그대로 유지되도록 sejin7940 2014.11.20
본문에서 작성자 글 모아서 보여주기 - 응용버전 [4] 하얀마법 2014.11.15
부트스트랩 툴팁 , 팝오버 TIP file 돼지코구뇽 2014.11.17
프로필 사진 저장시 잘려서 저장되는 경우 [11] YJSoft 2014.05.15
html 붙여넣기 가능한 무료 익명 채팅 프로그램(초간단) [1] file 임채원임 2014.11.17
본문에서 작성자 글 모아서 보여주기 [15] 하얀마법 2014.11.15
태그 쓰기