게시판에 첨부한 첨부 이미지 모두 보기

게시판에 첨부한 첨부 이미지 모두 보기 > 그누보드5 팁자료실

그누보드5 팁자료실

게시판에 첨부한 첨부 이미지 모두 보기 정보

게시판에 첨부한 첨부 이미지 모두 보기

본문

아래 코드를 원하는 파일이름으로 저장하고 테마디렉토리에 넣고 링크하면 됨~
첨부파일만 썸네일을 출력하고 썸네일은 원본이름이 같은 것이 있으면 썸네일중 가장 큰것이 출력됨
썸네일 클릭하면 원본이미지 팝업으로 뜨며 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');
?>