웹마스터 팁

  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>
이 게시물을
좋아요
목록
제목 글쓴이 날짜
게시판 최초 정렬을 사용자정의(확장변수) 기준으로 설정 가능하게 하는 방법 [8] sejin7940 2014.01.20
모바일레이아웃을 사용하되 모바일 게시판 스킨을 선택하지 않고 일반 게시판 스킨을 사용하는 방법 [4] sejin7940 2014.02.04
폰갭 alert하기 file 지인에드컴 2015.01.01
정규식으로 소수 찾기 [4] 신평 2014.12.31
구글 접속이 어려운 지역에서 홈페이지 속도 저하 관련 [2] 상해파 2014.12.31
확장변수 정렬 방법 아름다운청년1 2014.12.31
게시판DX 포인트 설정값이 0인 게시물 경고창 뜨지않도록 꾸링 2014.12.31
본문 내부의 이미지를 썸네일화 시키지 못하는 버그 해결법 [11] sejin7940 2012.07.19
관리자 페이지 날짜 검색과 스크랩. [1] 무얼까2 2014.12.24
추천인 표시 [11] socialskyo 2013.10.17
XE 템플릿에서 $_SESSION 변수 사용하기 신평 2014.12.21
심플한 XML 플래시 이미지 갤러리 [7] file maxtabby 2010.12.21
CSS 코드를 손쉽게 prefix/minify 변환해주는 사이트 file sojumeister 2014.12.18
1.7.4 용 youtube, vimeo, ted 썸네일 적용 document.item.php 수정방법 [9] file 남자인간 2014.02.17
제이쿼리 충돌시 팁 바나나소프트 2014.12.15
웹진/갤러리에서 썸네일 클릭 시 원본 이미지 보기 + HighSlide JS 적용 (수정) [18] 고진감래 2009.10.17
여러게시물을 작성시 쓰기버튼 노출의 여부로 고생할 때.. file BJ람보 2014.12.15
위젯 많은 페이지 - 부하 분산으로 속도 향상하기 [4] 엘카 2014.12.12
xe 에디터를 외부페이지에사용하기 [26] 정박사닷컴 2012.07.11
파일 삭제시 (글 수정시 파일삭제 / 파일관리에서 삭제 등) 사용자정의값이 삭제되지 않도록 패치 [3] sejin7940 2014.12.11
태그 쓰기