안녕하세요. 이윰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를 이용한 이미지 캡션'을 이윰빌더 최신글 스킨으로 만드는 방법에 대해 알아보았는데… 크게 어렵지는 않죠.

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