이미지에 제목글 나오게 하려면 어떻게 해야하는지 알려주시면 감사합니다..

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
이미지에 제목글 나오게 하려면 어떻게 해야하는지 알려주시면 감사합니다..

QA

이미지에 제목글 나오게 하려면 어떻게 해야하는지 알려주시면 감사합니다..

답변 1

본문

아래 사진처럼 최신글 이미지에 제목이 나오게 하고 싶습니다..

어떻게 해야하는지 알려주시면 감사합니다..!..

 

 

 

2105789910_1623993648.4893.png

 


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$num = 6; // 메인 출력이미지 갯수
?>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0; cursor:pointer;border-radius:0px;}
.imgs{ width:100%; height:367px; border:20px solid #fff; margin:10px auto; position:relative; overflow:hidden;border-radius:20px;}
.imgs:hover li{ background:#ffffff;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs:hover img{ opacity:0.4;filter:alpha(opacity=60);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs li:hover img{ opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs0{ width:658px; height:321px; position:absolute; left:0; top:0;} 
.imgs1{ width:306px; height:166px; position:absolute; left:0; bottom:0;} 
.imgs2{ width:137px; height:166px; position:absolute; left:259px; bottom:0;} 
.imgs3{ width:137px; height:166px; position:absolute; left:405px; bottom:0;} 
.imgs4{ width:283px; height:157px; position:absolute; right:0; top:0;}
.imgs5{ width:137px; height:166px; position:absolute; right:0; bottom:0;}
</style>
<div class="imgs">
    <?php
    for ($i=0; $i<$num; $i++) {
        //메인 각 출력이미지 크기
        if($i =='0'){ //이미지 출력번호
            $img_w = "667"; // 썸네일 생성이미지 가로 크기
            $imgs_w = "395"; // 메인 출력 이미지 가로 크기
            $imgs_h = "153"; // 메인 출력 이미지 세로 크기
        }else if($i =='1'){
            $img_w = "333"; 
            $imgs_w = "250";
            $imgs_h = "153"; 
        }else if($i =='2'||$i =='3'){
            $img_w = "165";
            $imgs_w = "137";
            $imgs_h = "153";
        }else if($i =='4'){
            $img_w = "332";
            $imgs_w = "283";
            $imgs_h = "153";
        }else{
            $img_w = "332";
            $imgs_w = "137";
            $imgs_h = "153";
        }
            $img_h = "";
            $thumbs = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $img_w, $img_h);
        if($thumbs['src']) {
            $imgs = $thumbs['src'];
        }?>
    <li class="imgs<?=$i?>"><a href="<?php echo $list[$i]['wr_link1'];?>" title="<?=$list[$i]['subject']?>"><img src="<?=$imgs?>" width="<?=$imgs_w?>" 
    height="<?=$imgs_h?>" /></a></li>
    <?}?>
</div>

이 질문에 댓글 쓰기 :

답변 1


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$num = 6; // 메인 출력이미지 갯수
?>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0; cursor:pointer;border-radius:0px;}
.imgs{ width:100%; height:367px; border:20px solid #fff; margin:10px auto; position:relative; overflow:hidden;border-radius:20px;}
.imgs:hover li{ background:#ffffff;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs:hover img{ opacity:0.4;filter:alpha(opacity=60);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs li:hover img{ opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.imgs0{ width:658px; height:321px; position:absolute; left:0; top:0;} 
.imgs1{ width:306px; height:166px; position:absolute; left:0; bottom:0;} 
.imgs2{ width:137px; height:166px; position:absolute; left:259px; bottom:0;} 
.imgs3{ width:137px; height:166px; position:absolute; left:405px; bottom:0;} 
.imgs4{ width:283px; height:157px; position:absolute; right:0; top:0;}
.imgs5{ width:137px; height:166px; position:absolute; right:0; bottom:0;}
.imgs li >  a{
    position: relative;
}
.imgs li > a >  p{
    position: absolute;
    z-index: 1;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}
</style>
<div class="imgs">
    <?php
    for ($i=0; $i<$num; $i++) {
        //메인 각 출력이미지 크기
        if($i =='0'){ //이미지 출력번호
            $img_w = "667"; // 썸네일 생성이미지 가로 크기
            $imgs_w = "395"; // 메인 출력 이미지 가로 크기
            $imgs_h = "153"; // 메인 출력 이미지 세로 크기
        }else if($i =='1'){
            $img_w = "333"; 
            $imgs_w = "250";
            $imgs_h = "153"; 
        }else if($i =='2'||$i =='3'){
            $img_w = "165";
            $imgs_w = "137";
            $imgs_h = "153";
        }else if($i =='4'){
            $img_w = "332";
            $imgs_w = "283";
            $imgs_h = "153";
        }else{
            $img_w = "332";
            $imgs_w = "137";
            $imgs_h = "153";
        }
            $img_h = "";
            $thumbs = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $img_w, $img_h);
        if($thumbs['src']) {
            $imgs = $thumbs['src'];
        }?>
    <li class="imgs<?=$i?>"><a href="<?php echo $list[$i]['wr_link1'];?>" title="<?=$list[$i]['subject']?>"><p><?=$list[$i]['subject']?></p><img src="<?=$imgs?>" width="<?=$imgs_w?>" 
    height="<?=$imgs_h?>" /></a></li>
    <?php }?>
</div>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 10,639
© SIRSOFT
현재 페이지 제일 처음으로