fancybox 잘 아시는 분 있을까요 ?
본문
fancybox 게시판을 여러개 사용중인데 메인에 노출시키려고 리스트 페이지를 복사하여 lastest를 만들어서 쓰고싶거든요. 게시판이 A,B,C고 메인에 A,B,C 별로 노출은 잘 되는데
어찌된 이유인지 리스트상에는 A따로 B따로 C따로 나오고 클릭했을때 모달 창이 뜨면 그 모달에서는 A,B,C가 다 섞여서 나온네요 ㅠㅠ
어떻게 해야 좋을까요... 방법이 없는걸까요
//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 값을 각각 지정해줄 수 있는 방법은 없을까요 ?
!-->답변 3
아래의 내요을 한번 참고해 보시겠어요~
<?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>
클래스가 같으니 최신글에 있는 모든 썸네일이 뜨는것 같습니다.
클래스 지정하실때
$list[$i]['wr_id']
글번호를 추가해서 별도로 호출하셔요.
두분다 채택하고싶은데 ㅠㅠ 제이엔님 답변이 좀더 구체적이었어서 채택하게 되었습니다.
data-fancybox="gallery<?php echo $bo_table; ?>" 테이블명으로 엮어주니 잘나오네요.
답변 달아주신 두분께 감사드립니다!