웹마스터 팁

  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>
이 게시물을
좋아요
목록
제목 글쓴이 날짜
익산안마【오피쓰.COM】익산안마 익산 안마 익산안마 songkangkong767 2025.02.27
익산오피 익산OP ⦑오피쓰.COM⦒ 익산휴게텔 익산오피 익산오피 koykoyah 2025.02.27
대구안마【출장안마사이트.COM】대구1인샵 대구스웨디시 대구마사지 songkangkong767 2025.02.27
신촌오피 ⦑오피쓰주소.COM⦒ 신촌오피 신촌OP 신촌건마 신촌오피 koykoyah 2025.02.27
건대스웨디시【오피쓰주소.COM】건대1인샵 건대마사지 건대안마 songkangkong767 2025.02.27
제주오피 ⦑오피.CLUB⦒ 제주오피 제주출장마사지 제주오피 제주OP koykoyah 2025.02.27
답십리스웨디시【오피사이트.NET】답십리스웨디시 답십리 스웨디시 답십리스웨디시 songkangkong767 2025.02.27
신천오피 ⦑출장안마사이트.COM⦒ 신천오피 신천출장마사지 신천오피 신천OP koykoyah 2025.02.27
익산스웨디시【출장안마사이트.COM】익산1인샵 익산안마 익산마사지 songkangkong767 2025.02.27
강북오피 강북오피 ⦑오피사이트.NET⦒ 강북OP 강북스파 강북오피 koykoyah 2025.02.27
제주도마사지【오피쓰주소.COM】제주도 마사지 제주도마사지 제주도마사지 songkangkong767 2025.02.27
용인오피 용인출장안마 ⦑오피사이트.NET⦒ 용인OP 용인오피 용인오피 koykoyah 2025.02.27
송탄스웨디시【오피쓰.COM】송탄마사지 송탄1인샵 송탄안마 songkangkong767 2025.02.27
부평오피 ⦑오피쓰주소.COM⦒ 부평OP 부평오피 부평출장샵 부평오피 koykoyah 2025.02.27
분당스웨디시【오피쓰.COM】분당스웨디시 분당 스웨디시 분당스웨디시 songkangkong767 2025.02.27
천안오피 천안OP ⦑오피쓰.COM⦒ 천안휴게텔 천안오피 천안오피 koykoyah 2025.02.27
대전스웨디시【오피쓰.COM】대전마사지 대전1인샵 대전안마 songkangkong767 2025.02.27
충주오피 충주출장안마 ⦑출장마사지안내.COM⦒ 충주OP 충주오피 충주오피 koykoyah 2025.02.27
광주안마【오피쓰주소.COM】광주 안마 광주안마 광주안마 songkangkong767 2025.02.27
동대문오피 동대문출장안마 ⦑오피쓰.COM⦒ 동대문OP 동대문오피 동대문오피 koykoyah 2025.02.27
태그 쓰기