게시판에 첨부한 첨부 이미지 모두 보기 정보
게시판에 첨부한 첨부 이미지 모두 보기본문
- 아래 코드를 원하는 파일이름으로 저장하고 테마디렉토리에 넣고 링크하면 됨~
- 첨부파일만 썸네일을 출력하고 썸네일은 원본이름이 같은 것이 있으면 썸네일중 가장 큰것이 출력됨
- 썸네일 클릭하면 원본이미지 팝업으로 뜨며 fancy-box 스크립트로 슬아이드됨
- 상단에 게시판별로 메뉴가 생성되어 메뉴클릭하면 해당 게시판만 보임
- 보여주고 싶지 않은 게시판은 제외게시판에 추가하면 메뉴에서 제외됨
- 페이지당 보여주고 싶은 이미지 개수를 이용해서 페이징이 됨
- 썸네일 출력은 masonry 레이아웃으로 출력됨
- ~~AI 가 메모리 열심히 돌린 결과임~~
<?php
include_once("./_common.php");
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
include_once(G5_THEME_PATH.'/head.php');
?>
<style>
.grid {
}
/* reveal grid after images loaded */
.grid.are-images-unloaded {
opacity: 0;
}
.grid__item,
.grid__col-sizer {
width: 32%;
}
.grid__gutter-sizer { width: 2%; }
/* hide by default */
.grid.are-images-unloaded .image-grid__item {
opacity: 0;
}
.grid__item {
margin-bottom: 20px;
float: left;
}
.grid__item--height1 { height: 140px; background: #EA0; }
.grid__item--height2 { height: 220px; background: #C25; }
.grid__item--height3 { height: 300px; background: #19F; }
.grid__item--width2 { width: 66%; }
.grid__item img {
display: block;
max-width: 100%;
}
.page-load-status {
display: none; /* hidden by default */
padding-top: 20px;
border-top: 1px solid #DDD;
text-align: center;
color: #777;
}
@media only screen and (max-width:992px) {
.grid__item,
.grid__col-sizer {
width: 48%;
}
.grid__gutter-sizer { width: 2%; }
}
@media only screen and (max-width:768px) {
.grid__item,
.grid__col-sizer {
width: 100%;
}
.grid__gutter-sizer {
width: 0%;
}
}
</style>
<style>
.menu {
margin-bottom: 20px;
}
.menu a {
background:#000;
margin-right: 10px;
text-decoration: none;
color: #fff;
padding:5px 10px;
font-size:0.9rem;
font-weight:bold;
}
.menu a:hover {
text-decoration: underline;
background:#cc;
color: #000;
font-size:0.9rem;
font-weight:bold;
}
.pagination {
margin-top: 20px;
}
.pagination a {
margin: 0 5px;
text-decoration: none;
color: #007bff;
}
.pagination a.active {
font-weight: bold;
text-decoration: underline;
}
</style>
<div class="menu">
<a href="?view=all">모두보기</a>
<?php
// 데이터 디렉토리 경로
$data_dir = G5_DATA_PATH . '/file';
$board_dirs = glob($data_dir . '/*', GLOB_ONLYDIR);
// 제외할 게시판 ID 목록
$excluded_boards = ['excluded_board1', 'excluded_board2']; // 제외할 게시판 ID를 여기에 추가
foreach ($board_dirs as $board_dir) {
$bo_table = basename($board_dir);
// 제외할 게시판 ID가 아닌 경우에만 메뉴에 추가
if (!in_array($bo_table, $excluded_boards)) {
echo '<a href="?view=' . $bo_table . '">' . $bo_table . '</a>';
}
}
?>
</div>
<div class="grid are-images-unloaded">
<div class="grid__col-sizer"></div>
<div class="grid__gutter-sizer"></div>
<?php
// 선택된 게시판 ID 가져오기
$view = isset($_GET['view']) ? $_GET['view'] : 'all';
// 페이지 설정
$items_per_page = 18; // 한 페이지에 표시할 이미지 수
$current_page = isset($_GET['page']) ? (int)$_GET['page'] : 1; // 현재 페이지
$offset = ($current_page - 1) * $items_per_page; // 오프셋 계산
// 모든 게시판 ID 디렉토리 가져오기
$largest_thumbnails = []; // 각 원본 이미지에 대한 가장 큰 썸네일 저장
foreach ($board_dirs as $board_dir) {
$bo_table = basename($board_dir); // 게시판 ID 추출
// 제외할 게시판 ID가 아닌 경우에만 처리
if (!in_array($bo_table, $excluded_boards)) {
// 선택된 게시판 ID가 'all'이거나 현재 게시판 ID와 일치할 경우
if ($view === 'all' || $view === $bo_table) {
$images = glob($board_dir . '/*.{jpg,jpeg,png,gif}', GLOB_BRACE); // 이미지 파일 목록 가져오기
foreach ($images as $image) {
$filename = basename($image); // 파일 이름 추출
$original_name = pathinfo($filename, PATHINFO_FILENAME);
$thumb_pattern = $board_dir . '/thumb-' . $original_name . '_*.{jpg,jpeg,png,gif}';
$thumbnails = glob($thumb_pattern, GLOB_BRACE); // 썸네일 파일 목록 가져오기
foreach ($thumbnails as $thumb) {
list($thumb_actual_width, $thumb_actual_height) = getimagesize($thumb);
$thumb_area = $thumb_actual_width * $thumb_actual_height;
if (!isset($largest_thumbnails[$original_name]) || $thumb_area > $largest_thumbnails[$original_name]['area']) {
$largest_thumbnails[$original_name] = [
'file' => $thumb,
'area' => $thumb_area,
'bo_table' => $bo_table,
'original_file' => $image
];
}
}
}
}
}
}
// 총 이미지 수
$total_images = count($largest_thumbnails);
$total_pages = ceil($total_images / $items_per_page); // 총 페이지 수
// 현재 페이지에 해당하는 이미지만 슬라이스
$largest_thumbnails = array_slice($largest_thumbnails, $offset, $items_per_page);
// 결과 출력: 가장 큰 썸네일 이미지 출력
foreach ($largest_thumbnails as $thumb) {
$thumb_url = G5_DATA_URL . '/file/' . $thumb['bo_table'] . '/' . basename($thumb['file']);
$original_url = G5_DATA_URL . '/file/' . $thumb['bo_table'] . '/' . basename($thumb['original_file']);
echo '<div class="grid__item thumbnail">';
echo '<a data-fancybox="gallery" href="' . $original_url . '" target="_blank">';
echo '<img src="' . $thumb_url . '" alt="썸네일" style="max-width: 100%; height: auto;">';
echo '</a>';
echo '</div>';
}
?>
</div>
<!-- 페이징 링크 출력 -->
<div class="pagination">
<?php if ($current_page > 1): ?>
<a href="?view=<?php echo $view; ?>&page=<?php echo $current_page - 1; ?>">이전</a>
<?php endif; ?>
<?php for ($i = 1; $i <= $total_pages; $i++): ?>
<a href="?view=<?php echo $view; ?>&page=<?php echo $i; ?>" class="<?php echo ($i === $current_page) ? 'active' : ''; ?>">
<?php echo $i; ?>
</a>
<?php endfor; ?>
<?php if ($current_page < $total_pages): ?>
<a href="?view=<?php echo $view; ?>&page=<?php echo $current_page + 1; ?>">다음</a>
<?php endif; ?>
</div>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script>
let $grid = $('.grid').masonry({
itemSelector: 'none', // select none at first
columnWidth: '.grid__col-sizer',
gutter: '.grid__gutter-sizer',
percentPosition: true,
stagger: 30,
// nicer reveal transition
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});
// get Masonry instance
let msnry = $grid.data('masonry');
// initial items reveal
$grid.imagesLoaded( function() {
$grid.removeClass('are-images-unloaded');
$grid.masonry( 'option', { itemSelector: '.grid__item' });
let $items = $grid.find('.grid__item');
$grid.masonry( 'appended', $items );
});
//-------------------------------------//
</script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox="gallery"]', {
//
});
</script>
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
추천
8
8
댓글 12개

추천합니다.
@푸른산타 감사합니다~~

고생 하셨습니다. 추천~
@들레아빠 감사합니다
감사합니다..!
@리키윤 감사합니다

크리스마스 선물인가요?
감사합니다. ^^
@민트다이어리 필요한 분에겐 선물이 될까요?~~감사합니다

감사합니다
@너나잘해 감사합니다

감사합니다.
@써맨 감사합니다