Hello, World!
이전 목록 다음
채택완료

fancybox 잘 아시는 분 있을까요 ?

굼떠
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 2,609

fancybox 게시판을 여러개 사용중인데 메인에 노출시키려고 리스트 페이지를 복사하여 lastest를 만들어서 쓰고싶거든요. 게시판이 A,B,C고 메인에 A,B,C 별로 노출은 잘 되는데

어찌된 이유인지 리스트상에는 A따로 B따로 C따로 나오고 클릭했을때 모달 창이 뜨면 그 모달에서는 A,B,C가 다 섞여서 나온네요 ㅠㅠ

어떻게 해야 좋을까요... 방법이 없는걸까요

 

Copy 
//latest.skin.php 소스 입니다

<?php

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

include_once(G5_LIB_PATH.'/thumbnail.lib.php');

 

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

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

add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css">', 0);

?>

<style>

 

* { box-sizing: border-box; }

.fancybox__button--download {display: none;}

.tit {position: absolute;left: 3%;top: 3%;background-color: #003c93;color: #fff;font-size: .8rem;padding: 5px 10px;border-radius: 100px;font-weight: 800;display: block;}

.bo_tit {position:relative;}

    /* force scrollbar

    html { overflow-y: scroll; }*/

 

    body { font-family: sans-serif; }

 

/* ---- grid ---- */

 

    .grid {

        /* background: #DDD;*/

    }

 

    /* clear fix */

    .grid:after {

        content: '';

        display: block;

        clear: both;

    }

 

    /* ---- .grid-item ---- */

 

    .grid-item {

        width: 25%;

    }



 

    .grid-item {

        float: left;

        margin-bottom:0px;


 

    }

 

    .grid-item img {

        display: block;

        max-width: 100%;

    }

    .grid-item--width2 {

        width: 50%;

 

    }

    .grid-item--width3 {

        width: 75%;

    }

    .grid-item--height2 {

        width: 50%;

    }

    .grid-item--width4 {

        width: 100%;

    }

/*--------media 제한설정--------*/

    /* 3 columns  */

    @media screen and (max-width:1140px){

        .grid-item {

            width:25%;

        }

    }

    /* 3 columns  */

    @media screen and (max-width:960px){

        .grid-item {

            width:33.333%;

        }

    }

    /* 1 columns by default */

    @media screen and (max-width:540px){

        .grid-item {

            width:50%;

        }

    }

</style>

 

<div class="grid" style="margin-bottom:20px;border:0px solid red">

        <?php for ($i=0; $i<count($list); $i++) {?>

            <?php for($j = 0; $j <= count($list[$i]['file'])-2; $j++) {?>

                <div class="grid-item" style="border: 10px solid transparent;">

                <div class="gall_chk chk_box">

                    <?php if ($is_checkbox) { ?>

                    <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">

                    <label for="chk_wr_id_<?php echo $i ?>">

                        <span></span>

                        <b class="sound_only"><?php echo $list[$i]['subject'] ?></b>

                    </label>

                   

                    <?php } ?>

                    <span class="sound_only">

                        <?php

                        if ($wr_id == $list[$i]['wr_id'])

                            echo "<span class=\"bo_current\">열람중</span>";

                        else

                            echo $list[$i]['num'];

                         ?>

                    </span>

                </div>

                    <a class="img" data-fancybox="gallery" data-caption="<?=$list[$i]['subject']?>" href="<?=$list[$i]['file'][$j]["path"]."/".$list[$i]['file'][$j]["file"];?>">

                        <img src="<?=$list[$i]['file'][$j]["path"]."/".$list[$i]['file'][$j]["file"];?>">

               

                <?php if($is_admin) { ?><a href="<?php echo $list[$i]['href'] ?>" class="bo_tit">

                    <?php // echo $list[$i]['icon_reply']; ?>

                    <!-- 갤러리 댓글기능 사용시 주석을 제거하세요. -->

                    <?php echo $list[$i]['subject'] ?>

                    <?php

                        // if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }

                        // if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";

                        // if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);

                        //if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);

                        //if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);

                        // if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);

                    ?>

                    <?php if ($list[$i]['comment_cnt']){?>

                        <span class="sound_only">댓글</span>

                        <span class="cnt_cmt"><?php echo $list[$i]['wr_comment']; ?></span>

                        <span class="sound_only">개</span>

                    <?php } ?>

                </a>

                <?php } ?>

                <?php if(!$is_admin) { ?>

                <?php } ?>

                    </a>

                    <!-- <span class="bo_cnt"><?php echo utf8_strcut(strip_tags($list[$i]['wr_content']), 68, '..'); ?></span> -->

                </div>

            <?php } ?>

                <?php } ?>

                    <?php if (count($list) == 0) { echo "<li class=\"empty_list\">게시물이 없습니다.</li>"; } ?>

    </div>

    <a href="<?php echo get_pretty_url($bo_table); ?>" class="lt_more"><span class="sound_only"><?php echo $bo_subject ?></span>LEAD MORE</a>

    <script src="https://unpkg.com/packery@2/dist/packery.pkgd.js"></script>

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>

<script type="text/javascript">

// init Packery

var $grid = $('.grid').packery({

  itemSelector: '.grid-item',

  percentPosition: true

});

// layout Packery after each image loads

$grid.imagesLoaded().progress( function() {

  $grid.packery();

});

</script>

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

<script type="text/javascript">

    Fancybox.bind('[data-fancybox="gallery"]', {

  Toolbar: {

    display: [

      { id: "prev", position: "center" },

      { id: "counter", position: "center" },

      { id: "next", position: "center" },

      "zoom",

      "slideshow",

      "fullscreen",

      "thumbs",

      "close",

    ],

  },

});

</script>

 

*** 제가 보다보니까 fancybox__container가 하난데 A,B,C를 띄우려다보니 이미지가 섞이는거같은데

모달 class 값을 각각 지정해줄 수 있는 방법은 없을까요 ?

그누보드5
|

답변 3개

채택된 답변
+20 포인트
제제이앤
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

아래의 내요을 한번 참고해 보시겠어요~

 

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css">', 0);
?>
<style>
/* ... (기존 스타일) ... */
</style>

<div class="grid" style="margin-bottom:20px;border:0px solid red">
    <?php for ($i=0; $i<count($list); $i++) {?>
        <?php for($j = 0; $j <= count($list[$i]['file'])-2; $j++) {?>
            <div class="grid-item" style="border: 10px solid transparent;">
                <div class="gall_chk chk_box">
                    <?php if ($is_checkbox) { ?>
                    <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">
                    <label for="chk_wr_id_<?php echo $i ?>">
                        <span></span>
                        <b class="sound_only"><?php echo $list[$i]['subject'] ?></b>
                    </label>
                    <?php } ?>
                    <span class="sound_only">
                        <?php
                        if ($wr_id == $list[$i]['wr_id'])
                            echo "<span class=\"bo_current\">열람중</span>";
                        else
                            echo $list[$i]['num'];
                         ?>
                    </span>
                </div>
                <a class="img" data-fancybox="gallery<?php echo $bo_table; ?>" data-caption="<?=$list[$i]['subject']?>" href="<?=$list[$i]['file'][$j]["path"]."/".$list[$i]['file'][$j]["file"];?>">
                    <img src="<?=$list[$i]['file'][$j]["path"]."/".$list[$i]['file'][$j]["file"];?>">
                    <?php if($is_admin) { ?>
                    <a href="<?php echo $list[$i]['href'] ?>" class="bo_tit">
                        <?php echo $list[$i]['subject'] ?>
                        <?php if ($list[$i]['comment_cnt']){?>
                            <span class="sound_only">댓글</span>
                            <span class="cnt_cmt"><?php echo $list[$i]['wr_comment']; ?></span>
                            <span class="sound_only">개</span>
                        <?php } ?>
                    </a>
                    <?php } ?>
                </a>
            </div>
        <?php } ?>
    <?php } ?>
    <?php if (count($list) == 0) { echo "<li class=\"empty_list\">게시물이 없습니다.</li>"; } ?>
</div>
<a href="<?php echo get_pretty_url($bo_table); ?>" class="lt_more"><span class="sound_only"><?php echo $bo_subject ?></span>LEAD MORE</a>

<script src="https://unpkg.com/packery@2/dist/packery.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script type="text/javascript">
// init Packery
var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  percentPosition: true
});
// layout Packery after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.packery();
});
</script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script type="text/javascript">
    Fancybox.bind('[data-fancybox^="gallery"]', {
        Toolbar: {
            display: [
                { id: "prev", position: "center" },
                { id: "counter", position: "center" },
                { id: "next", position: "center" },
                "zoom",
                "slideshow",
                "fullscreen",
                "thumbs",
                "close",
            ],
        },
    });
</script>
 

굼떠
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

두분다 채택하고싶은데 ㅠㅠ 제이엔님 답변이 좀더 구체적이었어서 채택하게 되었습니다. 

data-fancybox="gallery<?php echo $bo_table; ?>" 테이블명으로 엮어주니 잘나오네요. 

답변 달아주신 두분께 감사드립니다!

애애드프로
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

클래스가 같으니 최신글에 있는 모든 썸네일이 뜨는것 같습니다.

클래스 지정하실때

 

$list[$i]['wr_id']

 

글번호를 추가해서 별도로 호출하셔요.

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