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

최근게시물 클릭후 나오는 이미지 레이어 하단에 제품명을 넣고 싶습니다.

크크림빵1
프로필 보기이 회원 글보기이 회원의 댓글보기
 3개월 전 321

3717916259_1765854542.4872.jpg

인덱스 페이지에서 갤러리스타일 최신게시물 클릭하면 이렇게 제품이미지가 뜹니다.
제품 이미지 하단에 
제품명이 같이 표시되도록 하고 싶은데, 어디를 수정해야 할까요?

제가 그누보드를 잘 몰라서 여쭤봅니다.


Copy 
<?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);
$thumb_width = 500;
$thumb_height = 500;
?>
    
                    
    <?php
    for ($i=0; $i<count($list); $i++) {
    $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);

    if($thumb['src']) {
        $img = $thumb['src'];
    } else {
        $img = G5_IMG_URL.'/no_img.png';
        $thumb['alt'] = '이미지가 없습니다.';
    }
    $img_content = ''.$img.'';
    ?>
    <div class="cbp-item <?php echo $list[$i]['ca_name'] ?>">
        <a class="cbp-caption cbp-lightbox" href="<?php echo $img_content; ?>">
            <div class="cbp-caption-defaultWrap">
                <img alt="port-1" src="<?php echo $img_content; ?>">
            </div>
            <div class="cbp-caption-activeWrap"></div>
            <div class="cbp-l-caption-alignCenter center-block">
                <div class="cbp-l-caption-body">
                    <div class="plus"></div>
                    <h5 class="text-white mb-1"><?php echo $list[$i]['subject'] ?></h5>
                    <p class="text-white"><?php echo $list[$i]['wr_1'] ?></p>
                </div>
            </div>

        </a>
    </div>

        
    <?php }  ?>
    <?php if (count($list) == 0) { //게시물이 없을 때  ?>
    <li class="empty_li">게시물이 없습니다.</li>
    <?php }  ?>


최근게시물 스킨 html 입니다.
그누보드5 php
|

답변 2개

채택된 답변
+20 포인트
애애드프로
프로필 보기이 회원 글보기이 회원의 댓글보기
 3개월 전

작성자님이 주신 코드는

이미지 레이어 팝업과 스크립트 단이 빠져있습니다.

 

간단한 부분이라 아래 톡으로 ftp 정보 보내주시면 무료로 수정해드리겠습니다.

https://open.kakao.com/o/s9W6dO6h

 

 

제제이앤
프로필 보기이 회원 글보기이 회원의 댓글보기
 3개월 전

아래의 코드를 한번 참고해 보시겠어요..

 

Copy 
<?php
if (!defined('_GNUBOARD_')) exit;
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>

<div class="lat">
    <ul>
    <?php for ($i=0; $i<count($list); $i++) { ?>
        <li>
            <?php
            $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
            
            if($thumb['src']) {
                $img = $thumb['src'];
            } else {
                $img = G5_IMG_URL.'/no_image.gif';
            }
            ?>
            
            <a href="javascript:void(0);" onclick="showImageLayer('<?php echo $img; ?>', '<?php echo addslashes($list[$i]['subject']); ?>');">
                <div class="lat_img">
                    <img src="<?php echo $img; ?>" alt="<?php echo $list[$i]['subject']; ?>">
                </div>
            </a>
            
            <div class="lat_txt">
                <a href="<?php echo $list[$i]['href']; ?>">
                    <?php echo $list[$i]['subject']; ?>
                </a>
            </div>
        </li>
    <?php } ?>
    <?php if (count($list) == 0) { ?>
        <li class="empty_list">게시물이 없습니다.</li>
    <?php } ?>
    </ul>
</div>

<!-- 이미지 레이어 팝업 -->
<div id="imageLayer" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:90%; max-height:90%;">
        <div style="background:white; padding:20px; border-radius:8px; text-align:center;">
            <img id="layerImage" src="" style="max-width:100%; height:auto; display:block; margin:0 auto;">
            
            <!-- 제품명 표시 영역 -->
            <div style="margin-top:15px; padding:10px; background:#f8f9fa; border-radius:4px;">
                <p id="productName" style="margin:0; font-size:16px; font-weight:bold; color:#333;"></p>
            </div>
            
            <button onclick="closeImageLayer()" style="margin-top:15px; padding:10px 30px; background:#333; color:white; border:none; border-radius:4px; cursor:pointer;">닫기</button>
        </div>
    </div>
</div>

<script>
function showImageLayer(imgSrc, productName) {
    document.getElementById('layerImage').src = imgSrc;
    document.getElementById('productName').textContent = productName;
    document.getElementById('imageLayer').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

function closeImageLayer() {
    document.getElementById('imageLayer').style.display = 'none';
    document.body.style.overflow = '';
}

// ESC 키로 닫기
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeImageLayer();
    }
});

// 배경 클릭으로 닫기
document.getElementById('imageLayer').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageLayer();
    }
});
</script>

 

 

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