위치 : 메인 » 스킨소개 » 게시판스킨 » (2)번글 :: 글목록의 이미지를 입체감 있도록 만들어 주는 갤러리게시판 스킨

daumwiz.gif

글목록의 이미지를 입체감 있도록 만들어 주는 갤러리게시판 스킨

카테고리 ::
게시판스킨
작성일 ::
2010년 10월 2일 토요일 PM 11시 55분
작성자 ::
멋쟁이냐
조회수 ::
7562 회

2_index_daumwidget(2).zip 2_index_daumwidget(2).zip (14KB) (Down:25)

테크노트 원문 정보

제목(원문) ::
다음위젯처럼 보이는 게시판입니다.
라이센스 ::
무료스킨:skin
제작자 ::
테크폐인
미리 보기 링크 ::
http://www.sabjil.wo.tc/preview/?q=skin:500

미리보기 횟수 : 157

  • 현재(2번)글 본문 보기
  • 댓글(0), 댓글을 작성해주세요!
크게 작게

title글목록의 이미지를 입체감 있도록 만들어 주는 갤러리게시판 스킨

검색단어 찾기 :

 

압축파일을 풀면,

iyke_img/glossy.js

2_index_freerancer.php

이렇게 두개의 파일이 있습니다.

이 파일을 /technote7/skin_board/스킨/

폴더에 그대로 업로드 합니다.

 

소스를 사용하고자 하는 게시판(skin20101002)을 생성하고

 

 

[2-2] 글목록 출력 스킨을 2_index_freerancer.php 로 설정합니다.

 

 

[4-19] 글목록 테이블 출력셀 설정 에서 (그림앨범-섬네일) 12 번을 입력하고,

[4-19img_style] 에서 이미지의 크기를 입력 합니다.

 


 

※ 첨부파일의 변경된 내용

 

♦ 원본소스

if($img=search_img($Index_data['mphoto'])){
  $img_url=$img;
}
// 4, 링크#2 으로 올린 그림 url 경로
elseif($img=search_img($Index_data['ulink2'])){
  $img_url=$img;
}
// 5, 본문편집모드에서 본문내에 첨부-삽입한 그림파일
elseif($img=search_img($Index_data['tbody_img'])){
  $img_url="$CONFIG[data_url]/board/$CONFIG[board]/file_in_body/$img";
  $img_path="$CONFIG[data_path]/board/$CONFIG[board]/file_in_body/$img";
}

..
..

 

♦ 변경된소스

// 1, 파일첨부#1 으로 올린 그림파일
if($img=search_img($Index_data['ufile1'])){
  $img_url="$CONFIG[data_url]/board/$CONFIG[board]/file/$Index_data[filedir]/".urlencode($img);
  $img_path="$CONFIG[data_path]/board/$CONFIG[board]/file/$Index_data[filedir]/$img";
}
// 2, 파일첨부#2 으로 올린 그림파일
elseif($img=search_img($Index_data['ufile2'])){
  $img_url="$CONFIG[data_url]/board/$CONFIG[board]/file/$Index_data[filedir]/".urlencode($img);
  $img_path="$CONFIG[data_path]/board/$CONFIG[board]/file/$Index_data[filedir]/$img";
}
// 3, 링크#1 으로 올린 그림 url 경로
elseif($img=search_img($Index_data['ulink1'])){
  $img_url=$img;
}
// 4, 링크#2 으로 올린 그림 url 경로
elseif($img=search_img($Index_data['ulink2'])){
  $img_url=$img;
}
// 5, 본문편집모드에서 본문내에 첨부-삽입한 그림파일
elseif($img=search_img($Index_data['tbody_img'])){
  $img_url="$CONFIG[data_url]/board/$CONFIG[board]/file_in_body/$img";
  $img_path="$CONFIG[data_path]/board/$CONFIG[board]/file_in_body/$img";
}

..
..

이와 같이 테크노트의 기본 2_index 와 같은 형태로 수정 하였습니다. 

또, 섬네일로 되어 있지 않아서 테크노트 기본 2_index 파일과 동일하도록 수정 하였습니다.

 

이 소스는, 기본 제공되는 2_index 로도 사용 할 수 있으며 glossy.js 파일을 설치 함으로써 이미지를 볼록한 형태로 만들 수 있습니다.

glossy.js 파일의 사용방법은

<script type="text/javascript" src="scripts/glossy.js"></script>
<img src="img/test.jpg" alt="test" class="glossy" />

와 같이 class='glossy' 로 설정해 주시면 됩니다.

멋진소스 공개해 주신 테크폐인님께 감사드립니다.

  • 0
    3500

  1. page:1/2
  2. 1
  3. 2

sabjilmode@sabjil.wo.tc

© 2010 Sabjil