안녕하세요! ..

말 그대로 최근글 위젯이긴 합니다만.. 이걸 팁 게시판에 올릴까 스킨 게시판에 올릴까 고민하다가

스킨 게시판에 올립니다.. (왜 그런가 하면 제가 하건 그냥 짜 맞춘거 밖에 없기 때문에.. 쿨럭;)


아무튼 .. 아래와 같은 최근글을 띄울 수 있습니다.
(출처의 사이트에 가 보시면 더욱 다양한 예제가 있습니다.)

new001.png

ex> http://webtoday.biz/cc/?mid=test2

(테스트 게시판의 섬네일 이미지는 170*120 으로 되어 있습니다.)


만들어 볼까요?

기본 최근 이미지 스킨(xe_official) 을 수정합니다.


./css/normal.css

 /*  이미지 최근글 스타일 시트 */
.gr {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gr li {
    width: 186px;
    height: 153px;
    margin: 20px 10px 5px;
    float: left;
    position: relative;
}
.gr .bg {
    background: url(../images/polaroid.png) no-repeat;
    width: 186px;
    height: 153px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.gr span {
    background: url(../images/tape.png) no-repeat;
    width: 77px;
    height: 27px;
    display: block;
    position: absolute;
    left: 54px;
    top: -12px;
    z-index: 4;
}
.gr img {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}
.gr em {
    display: block;
    padding: 4px 0 0;
    text-align: center;
    font: italic 100% Georgia, "Times New Roman", Times, serif;
    color: #333;
    width: 186px;
    position: absolute;
    bottom: 8px;
    right: 0;
    z-index: 3;
}

.gr span { behavior: url(http://webtoday.biz/iepngfix.htc); cursor: pointer; }

/* 툴팁 */

#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:2px 5px;
    color:#333;
    display:none;    
    z-index: 5;
    }

위의 iepngfix.htc (ie 에서 투명 png 를 위한) 경로는 적당히 수정해 주세요.
 

아래는 list.html 파일 ..

 <!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 -->

<!--@if($colorset=="normal"||!$colorset)-->
    <!--%import("css/normal.css")-->
<!--@end-->

<div class="ni_box">
    <!--@if($widget_info->title)-->
        <h2>{$widget_info->title}</h2>
    <!--@end-->

    <!--@if(count($widget_info->document_list))-->
    <div>



        {@ $count = 0; }
        <!--@for($i=0;$i<$widget_info->rows_list_count;$i++)-->
    <ul class="gr">
            <!--@for($j=0;$j<$widget_info->cols_list_count;$j++)-->
                {@ $oDocument = $widget_info->document_list[$i*$widget_info->cols_list_count + $j]}
              <li <!--@if($widget_info->rows_list_count>1)-->class="bottomBorder"<!--@end-->>
                <!--@if($oDocument->document_srl)-->

<a href="{getUrl('','document_srl',$oDocument->document_srl)}" class="tooltip"  title="{$oDocument->getTitle($widget_info->title_length)}"><span></span><img src="{$oDocument->getThumbnail($widget_info->thumbnail_width,$widget_info->thumbnail_height,$widget_info->thumbnail_type)}" border="0" alt="image" /></a><em>by {$oDocument->getNickName()}</em> <div class="bg"></div></a>




                <!--@if($widget_info->display_author == 'N')-->
                <div class="author"><div class="member_{$oDocument->get('member_srl')}">{$oDocument->getNickName()}</div></div>
                <!--@end-->


                <!--@if($widget_info->display_regdate == 'N')-->
                <div class="regdate">{$oDocument->getRegdate()}</div>
                <!--@end-->

                <!--@if($widget_info->display_readed_count == 'N' || $widget_info->display_voted_count == 'Y' )-->
                <div class="readAndVoted">
                    <!--@if($widget_info->display_readed_count == 'N')-->

                        {$lang->readed_count} {$oDocument->get('readed_count')}

                    <!--@end-->

                    <!--@if($widget_info->display_voted_count == 'N' && $oDocument->get('voted_count')>0 )-->

                        <!--@if($widget_info->display_readed_count == 'N')--><br /><!--@end-->

                        {$lang->voted_count} <strong>{$oDocument->get('voted_count')}</strong>

                    <!--@end-->
                </div>
                <!--@end-->
                <!--@end-->

        </li>
            <!--@end-->
            <!--@for($k=$j;$k<$widget_info->cols_list_count;$k++)--><td>&nbsp;</td><!--@end-->
</ul>
        <!--@end-->


    <!--@end-->
    </div>

    <!--@if($widget_info->module_name && $widget_info->title)-->
        <a href="{getUrl('','mid',$widget_info->module_name)}" class="more">more</a>
    <!--@end-->
</div>

그리고

사용하시는 레이아웃 스킨의 설정으로 가셔서 헤더 스크립트에 아래 두개(jquery.js, main.js)를 삽입해 줍니다.
(추가 안해주면 툴팁 사용 못합니다.)

 <script src="http://webtoday.biz/facebox/jquery.js" type="text/javascript"></script>
 <script src="http://webtoday.biz/cc/js/main.js" type="text/javascript"></script>


원본 다운로드 링크(다운받은 후 3개의 폴더 중 1번 사용)

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery


여기까지 이며 .. 혹시라도 문제 있는게 있다면 글 남겨주세요.


--------------------------------------------------------------------------------------------

수정 (02:50) : 그냥 스킨 압축해서 첨부합니다. (아래 첨부파일 다운받아서 쓰세요^^)

레이아웃 설정에서 (jquery.js, main.js) 만 추가해 주세요!






이 게시물을..
profile
잘 부탁드립니다.