'xns_gnuboard_latest_fotorama_gallery' 최신글 커스텀 관련
본문
안녕하세요
xns_gnuboard_latest_fotorama_gallery
해당 최신글을 사용중입니다.
1. 큰 이미지 위에 연동된 게시글의 제목(wr_subject) 노출
2. 하단 썸네일 클릭할 경우 상단의 큰 이미지가 변경(현재 구현되어있는 상태)됨과 동시에 연동된 게시글의 첫번째 링크(wr_link1)로 새창으로 연결
2가지 가능할까요?
latest.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
//Fotorama4.6.4 CDN
add_stylesheet('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css">', 10);
add_javascript('<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>', 10);
//스킨 CSS,JS 인클루드
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css?'.time().'">', 11);
//썸네일 사이즈 등 설정
$thumb_width = 1200;
$thumb_height = 800;
if(G5_IS_MOBILE){
$thumb_width = 768;
$thumb_height = 576;
}
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>
<div class="xns_gnuboard_latest_fotorama_gallery">
<div class="fotorama" data-nav="thumbs" data-thumbwidth="300" data-thumbheight="200" data-autoplay="true" data-allowfullscreen="true" data-click="false">
<?php for ($i=0; $i<$list_count; $i++) { ?>
<?php
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
$thumb_small = get_list_thumbnail($bo_table, $list[$i]['wr_id'], 300, 200, false, true);
?>
<?php if(isset($thumb['src']) && $thumb['src']) { ?>
<a href="<?php echo $thumb['src'] ?>">
<img src="<?php echo $thumb_small['src'] ?>" />
</a>
<?php } ?>
<?php } ?>
</div>
</div>
코드가 그리 길지 않아 모두 남겨놓습니다.
코드가 간단하여 오히려 어떻게 해볼 수가 없네요..
도움 부탁드립니다.
감사합니다.
답변 2
이렇게 하는건 어떠실까요?
아래 코드를 <a> 태그 안에 추가하여 게시글의 제목을 노출시킬 수 있습니다.
<a href="<?php echo $thumb['src'] ?>">
<img src="<?php echo $thumb_small['src'] ?>" />
<div class="title"><?php echo $list[$i]['wr_subject'] ?></div>
</a>
Fotorama 갤러리의 onSlideClick 이벤트를 사용하여 클릭 시 큰 이미지를 변경하고 게시글 링크로 연결할 수 있습니다. 아래 코드를 <div class="fotorama"> 태그 안에 추가해주세요.
<script>
$('.fotorama').on('fotorama:ready', function(e, fotorama) {
fotorama.on('fotorama:show', function(e, fotorama, extra) {
var currentIndex = fotorama.activeIndex; // 현재 표시되는 이미지의 인덱스
var link = '<?php echo $list[currentIndex]['wr_link1'] ?>'; // 연동된 게시글 링크
// 하단 썸네일 클릭 시 게시글 링크로 새창 열기
fotorama.$navframe.on('click', function() {
window.open(link, '_blank');
});
});
});
</script>
하단 썸네일 클릭할 경우 상단의 큰 이미지가 변경(현재 구현되어있는 상태)됨과 동시에 연동된 게시글의 첫번째 링크(wr_link1)로 새창으로 연결
이게 무슨말인지... 큰 이미지가 어떻게 변경되나요??
아래로 문의주시면 만들어드려요