이미지에 제목글 나오게 하려면 어떻게 해야하는지 알려주시면 감사합니다..
본문
아래 사진처럼 최신글 이미지에 제목이 나오게 하고 싶습니다..
어떻게 해야하는지 알려주시면 감사합니다..!..
<?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>
감사합니다!!
답변을 작성하시기 전에 로그인 해주세요.
