그누보드5 최신글 슬라이드 이미지 크기
본문
그누보드5에서 최신글 슬라이드를 사용하고 싶어, 감사한 분의 스킨을 보며 하나씩 넣으며 연습 중입니다.
owl carousel이라는 슬라이드를 사용했는데, 제가 원하는 모습은 각각의 이미지 크기가 달라도 보이는 이미지 사이즈가 같았으면 좋겠습니다.
이런 경우엔 어떻게 해결해야 하나요?ㅠㅠ
latest.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$sql = " select * from {$g5['board_table']} where bo_table = '{$bo_table}' ";
$board = sql_fetch($sql);
if ($options) list($width, $height, $wrap_width, $content_length) = explode(',', $options);
if (!$width) $width = 600;
if (!$height) $height = 400;
if (!$content_length) $content_length = 120;
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>
<script type="text/javascript" src="<?php echo $latest_skin_url?>/owl.carousel.min.js"></script>
<script type="text/javascript" src="<?php echo $latest_skin_url?>/carousel_slider.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $latest_skin_url?>/owl.carousel.min.css">
<div>
<div class="carousel-wrapper">
<ul class="owl-carousel">
<?php
for ($i=0; $i<count($list); $i++) {
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $width, $height);
?>
<li class="item"><a href="<?php echo $list[$i]['href']?>"><img src="<?php echo $thumb['src']?>"></a></li>
<?php
}
if (count($list) == 0) { //게시물이 없을 때 ?>
게시물이 없습니다.
<?php } ?>
</div>
</div>
style.css
@charset "utf-8";
/* 새글 스킨 (latest) */
.lt_pc {float:left;margin-left:20px}
.lt {position:relative;float:left;margin-bottom:20px;padding-bottom:10px;width:354px;height:150px;border-bottom:1px solid #e9e9e9}
.lt ul {margin:0 0 10px;padding:0;list-style:none}
.lt li {padding:3px 0;}
.lt .lt_title {display:block;padding:10px 0 8px}
.lt .lt_more {position:absolute;top:10px;right:0}
.lt .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold}
.owl-carousel {width:1200px; margin:0 auto;}
.owl-carousel .item a {display:block; width:100%;}
slider.js
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
}
})
});
답변 6
작업된 url 한번 보여주세요~
http://pyockffl.dothome.co.kr/
이제야 답변을 봤네요ㅠㅠ.. 죄송하지만 시간 괜찮으시다면 부탁드립니다!
지금 봤는데요.
이벤트 알리미라는 게시판 자체가 관리자만 관리하는 곳이자나요,
이런 경우는 올리는 이미지 사이즈를 통일하는걸로 해결보시는게 가장 좋겠네요~
우선 원본사이즈가 380*280 으로 고정된것을 더 늘리셔야 합니다.
원본사이즈 출력 사이즈를 계속 조절해가며 작업하다보면 어느정도 만족되는 중간값이 나오거든요. 이 값이 나올때까지 좀 반복작업을 해야합니다.
중간값이 나오면 이미지를 오버사이징해서 중간으로 짜르는 작업을 하던지해서 꽉 채우게 만들어야합니다.
이미지를 살펴보니, 알림의 용도로 이미지를 제작해서 올리는거 같으시니, 정확히 기준을 잡아서 제작을 하면 가능하실거 같은데요 ^^
자세한건 저도 FTP 접속해서 작업을 하면서 반복작업을 해봐야합니다 ㅠㅠ
DSLOVE님 안녕하세요!
이렇게 시간을 할애하시면서 신경쓰셔주신 점 진심으로 감사합니다.
저 사이트는 제가 공부하면서 하나하나 테스트해보는 용도였습니다ㅎㅎ.
다시 한번 감사하고, 요즘 전국적으로 비가 많이 오는데 조심하세요!
천사별님 답변 진심으로 감사합니다!
주신 링크대로 해봤지만 마찬가지로 뜹니다,,,,
혹여 제가 원하는 의도는 아래 다시 달아둔 댓글 사진처럼 빨간 사각형처럼 무조건 확대되더라도 뜨게 하고 싶은데 이부분에 대해서 아시는 부분이 있으실까요?
(사진은 댓글로 다시 첨부하니 혹시 아신다면 부탁드립니다!)
아래의 링크를 참고하세요.
https://sir.kr/g5_tip/11005
천사별님 다시 한번 정말정말 감사합니다!
위의 링크대로 해도 변하진 않습니다. 저도 좀 더 찾아좌야겠습니다ㅠㅠ..
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $width, $height, $is_crop=true);
위에처럼 한번 해보세요~ 위에처럼해도 원하는형태가 아니라면,
올리는 사람마다 사이즈가 제 각각이라 css 로 해결을 해야합니다.
이미지를 오버사이징해서 가운데정렬로 맞추고 부모요소에 overlfow:hidden 으로 짤라야하거든요~
음.. 여러가지 방법이 더 있겠네요. 상단 height 지정값을 0 으로 잡고, width 값을 100% 로 출력시킨후 짜르는 방법도 있고, 다양하네요 ㅠㅠ
안녕하세요, DSLOVE님. 진심으로 답변 감사드립니다.
말씀해주신 방법대로 CSS를 사용하여 이미지 크기를 맞춰보려고 했지만,
CSS로는 해결이 나지 않는 것 같습니다.
개발자 도구를 사용하여 봤을 때 캡처화면처럼,
원본 이미지사이즈 (400*400) 이정도라면 개발자 도구에는 이미지 자체에 사이즈가 제가 지정한 사이즈로 먹고 있어 그런듯합니다.
혹시 이 부분에 대해 알고계신다면 조언해주실 수 있으실까요? (사진은 밑에 댓글로 따로 첨부하겠습니다 :-) )
답변을 드리기에 앞서, 아래 천사별님이 남기신 링크에 기재된 방법을 적용하면 원하시는대로 수정이 될거 같아요!
dslove님 매번 댓글 정말 감사합니다!
천사별님의 댓글링크처럼 해보았는데도 그대로네요,,
제가 다시 달아둔 사진 댓글처럼 빨간 박스처럼 사진들이 가득 차기를 원하는데, 이부분에 대해 아시는 부분이 있으시다면 조언 부탁드릴게요ㅠㅠ
