'xns_gnuboard_latest_fotorama_gallery' 최신글 커스텀 관련

'xns_gnuboard_latest_fotorama_gallery' 최신글 커스텀 관련

QA

'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)로 새창으로 연결

이게 무슨말인지... 큰 이미지가 어떻게 변경되나요??

아래로 문의주시면 만들어드려요

https://open.kakao.com/o/sHmfqQde

답변을 작성하시기 전에 로그인 해주세요.
전체 953
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT