테스트 사이트 - 개발 중인 베타 버전입니다

'xns_gnuboard_latest_fotorama_gallery' 최신글 커스텀 관련 채택완료

Suprussy73 2년 전 조회 2,061

안녕하세요

 

https://sir.kr/g5_skin/47921" target="_blank">xns_gnuboard_latest_fotorama_gallery

 

해당 최신글을 사용중입니다.

 

1. 큰 이미지 위에 연동된 게시글의 제목(wr_subject) 노출

2. 하단 썸네일 클릭할 경우 상단의 큰 이미지가 변경(현재 구현되어있는 상태)됨과 동시에 연동된 게시글의 첫번째 링크(wr_link1)로 새창으로 연결

 

2가지 가능할까요?

 

latest.skin.php

</p>

<p><?php

  if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

  include_once(G5_LIB_PATH.'/thumbnail.lib.php');</p>

<p>  //Fotorama4.6.4 CDN

  add_stylesheet('<link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css">'," target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css">',</a> 10);

  add_javascript('<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>'," target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>',</a> 10);</p>

<p>  //스킨 CSS,JS 인클루드

  // add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

  add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css?'.time().'">', 11);</p>

<p>  //썸네일 사이즈 등 설정

  $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;

?></p>

<p>

<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></p>

<p>

 

코드가 그리 길지 않아 모두 남겨놓습니다.

코드가 간단하여 오히려 어떻게 해볼 수가 없네요..

도움 부탁드립니다.

 

감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인