• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

JavaScript/jQuery

  • Home
  • 스터디
  • JavaScript/jQuery

jQuery를 이용한 이미지 캡션 - 최신글 스킨으로 만들기

2,184 2015.11.05 23:31

첨부파일

짧은주소

본문

안녕하세요. 이윰MOUNT 입니다. ^^

 

저번 시간에 jQuery를 이용하여 이미지 캡션을 만들어 보고 그 원리에 대해 알아봤습니다.

http://eyoom.net/bbs/board.php?bo_table=js&wr_id=30

 

오늘은 이를 토대로 아래 스크린샷과 같이 이윰빌더 기본 테마인 PC BASIC 테마 최신글 스킨으로 만드는 방법에 대해 알아보겠습니다.

 

 

1. /eyoom/theme/pc_basic/skin_pc/latest 폴더에 gallery_caption 이라는 스킨 폴더를 만듭니다.

 

2. gallery_caption 폴더 내 latest.skin.html 파일을 만듭니다.

 

3. 아래 소스를 latest.skin.html 파일에 작성합니다.


<?php if (!defined('_GNUBOARD_')) exit;?>

<div class="headline">
    <h5>{title}</h5>
</div>

<div id="image_caption">
    <!--{@ loop}-->
    <div class="image-box">
        <a href="{.href}">
            <!--{? .image}-->
            <img src="{.image}" class="img-responsive">
            <!--{:}-->
            <p class="no-image">No Image</p>
            <!--{/}-->
            <div class="image-subject">
                <strong>{.wr_subject}</strong>
            </div>
            <span></span>
        </a>
    </div>
    <!--{:}-->
    <p class="t-center">최신글이 없습니다.</p>
    <!--{/}-->
</div>

<style>
#image_caption .image-box {
    position: relative;
    overflow: hidden;
    width: 33.33333%;
    height: 150px;
    float: left;
}
#image_caption .image-box strong {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    display: block;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 10px 0;
    width: 100%;
    bottom: -80px;
}
#image_caption .image-box span {
    position: absolute;
    display: block;
    z-index: 0;
    top: 0;
    width: 100%;
    height: 150px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
}
#image_caption .image-box p.no-image {
    color: #fff;
    width: 100%;
    height: 150px;
    text-align: center;
    line-height: 150px;
    display: block;
    background: #555;
    font-size: 13px;
}
</style>

<script type="text/javascript" src="./js/jquery-ui-1.11.4.custom.min.js"></script>
<script>
$(function(){
    var duration = 300;
    var $img_cap = $('#image_caption');
    $img_cap.find('.image-box')
        .on('mouseover', function(){
            $(this).find('strong').stop(true).animate({bottom: '0px'}, duration);
            $(this).find('span').stop(true).animate({opacity: 1}, duration);
        })
        .on('mouseout', function(){
            $(this).find('strong').stop(true).animate({bottom: '-80px'}, duration);
            $(this).find('span').stop(true).animate({opacity: 0}, duration);
        });
});
</script>

잠깐 소스를 살펴 보면 저번 시간에 배웠던 소스와 거의 비슷하게 들어가 있는 것을 볼수 있습니다.

위 소스에 대한 자세한 설명은 저번 시간에 이미 설명드렸으니 생략하겠습니다. 다른점이 있다면 html소스 내 반복문과 조건문등이 이윰빌더 프로그램과 연동되고 있다는 정도입니다.

부족한 부분은 소스를 조금씩 수정하면서 원하시는 방향으로 만들어 나가면 될것 같습니다.

 

4. gallery_caption 폴더 내 js폴더를 만들어 jquery-ui-1.11.4.custom.min.js 파일을 넣어줍니다. (jquery-1.11.3.min.js 파일은 기본적으로 그누보드에 포함(jquery-1.8.3.min.js)되어 있으므로 제외합니다.)

여기까지가 gallery_caption 최신글 스킨을 뚝딱 만들어 본 것입니다.

(본문 상단에 gallery_caption 최신글 스킨을 첨부)

 

5. 지금까지 만든 gallery_caption 최신글 스킨을 메인에 출력하기 위해 /eyoom/theme/pc_basic/main/index_pc.html 파일을 열어 아래의 최신글 추출 소스를 적당한 위치에 넣어줍니다.

 

{latest->latest_eyoom('gallery_caption','title=갤러리||bo_table=게시판id||count=9||cut_subject=20||img_view=y||img_width=400’)}

 

bo_table=게시판id 에 출력을 원하는 갤러리 게시판id 를 넣어주면 메인에 아래 링크와 같은 gallery_caption 최신글이 출력되는 것을 볼수 있습니다.

http://theme.eyoom.net/page/index.php?pid=latest|ebl_gallery_caption&theme=pc_basic&device=pc

 

지금까지 저번시간에 배웠던 'jQuery를 이용한 이미지 캡션'을 이윰빌더 최신글 스킨으로 만드는 방법에 대해 알아보았는데… 크게 어렵지는 않죠.

그럼 이만 줄이겠습니다. 감사합니다.

2
좋아요!
2
- 이윰MOUNT 메일보내기 아이디로 검색 - 회원등급 : 씨앗/Level 5 - 포인트 : 199,181
레벨 5
경험치 2,707

Progress Bar 71%

- 가입일 : 2015-09-15 19:48:51
- 서명 : 안녕하세요. 이윰의 MOUNT입니다.
- 자기소개 :
댓글목록

허비봉님의 댓글


이러다 나중에 이윰에서 동영상 강좌까지 나오는거 아닌가 싶네요 ㅎㅎㅎㅎ

축하합니다. 첫댓글 포인트 41포인트를 획득하였습니다.

이윰MOUNT님의 댓글

지금은 이것저것 바빠서... 나중에 여력이 된다면 한번 도전해 봐야 겠습니다.^^

크롱크롱님의 댓글

감사합니다. 열공하겠습니다.

자이언트님의 댓글

정말 좋은 강의입니다. 따라하다가 최신글 스킨이 공짜로 딱!~
gallery_caption 스킨 하나 득템하겠네요. ㅎㅎ

레오나르도님의 댓글

항상 감사합니다.
최신글 만드는 방법까지 상세히 알려주시고... 잘 활용하도록 하겠습니다.

축하합니다. 행운의 포인트 33포인트를 획득하였습니다.

후니아빠님의 댓글

MOUNT의 의미를 알겠습니다.
이윰MOUNT님만을 위해 선곡했습니다.
카펜터스가 부릅니다. Top of the World

이윰MOUNT님의 댓글

선곡 감사드리며 잘 감상했습니다. 저도 좋아하는 팝송입니다. ^^

티보리님의 댓글

잘 모르지만 계속 보다보면 많은 도움이 되겠습니다. 감사합니다.

비즈팔님의 댓글

꿀팁 감사합니다.

살사바님의 댓글

LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379