코스모스팜 스레드
pure-gallery 게시글 레이어 팝업창으로 노출
pure-gallery 스킨 사용 중이며,
썸네일 클릭 시 레이어 팝업창으로 게시글이 보이게 수정하고 싶습니다.
https://www.cosmosfarm.com/threads/document/27554#document-answer-27563
위 링크 참고하여 수정하였는데 스크립트 적용이 안되는거 같아서 문의 드립니다.
아래에 수정한 코드 첨부드립니다.
<!-- 리스트 시작 -->
<ul class="kboard-pure-gallery-list">
<?php while($content = $list->hasNextNotice()):?>
<li class="kboard-list-item kboard-list-notice<?php if($content->uid == kboard_uid()):?> kboard-list-selected<?php endif?>">
<a href="<?php echo $url->getDocumentURLWithUID($content->uid)?>#kboard-document">
<div class="kboard-list-thumbnail">
<?php if($content->getThumbnail(500, 500)):?>
<div class="kboard-list-thumbnail-child" style="background-image:url(<?php echo $content->getThumbnail(500, 500)?>)"></div>
<?php endif?>
<?php if(isset($content->attach->over_image)):?>
<div class="kboard-list-thumbnail-over-background"></div>
<div class="kboard-list-thumbnail-over-image"><img src="<?php echo site_url($content->attach->over_image[0])?>" alt=""></div>
<?php endif?>
</div>
<div class="kboard-list-notice"><span class="kboard-pure-gallery-new-notify"><?php echo __('Notice', 'kboard')?></span></div>
<div class="kboard-list-title<?php if(kboard_pure_gallery_title_line($board)):?> <?php echo kboard_pure_gallery_title_line($board)?><?php endif?>"><div class="kboard-pure-gallery-cut-strings">
<?php if($content->secret):?><img src="<?php echo $skin_path?>/images/icon-lock.png" class="kboard-icon-lock" alt="<?php echo __('Secret', 'kboard')?>"><?php endif?>
<?php echo $content->title?>
</div></div>
<div class="kboard-list-user"><?php echo $content->getUserDisplay()?></div>
</a>
</li>
<?php endwhile?>
<?php while($content = $list->hasNext()):?>
<li class="kboard-list-item<?php if($content->uid == kboard_uid()):?> kboard-list-selected<?php endif?>">
<a href="<?php echo $url->getDocumentURLWithUID($content->uid)?>">
<div class="kboard-list-thumbnail">
<?php if($content->getThumbnail(500, 500)):?>
<div class="kboard-list-thumbnail-child" style="background-image:url(<?php echo $content->getThumbnail(500, 500)?>)"></div>
<?php endif?>
<?php if(isset($content->attach->over_image)):?>
<div class="kboard-list-thumbnail-over-background"></div>
<div class="kboard-list-thumbnail-over-image"><img src="<?php echo site_url($content->attach->over_image[0])?>" alt=""></div>
<?php endif?>
</div>
<div class="kboard-list-new"><?php if($content->isNew()):?><span class="kboard-pure-gallery-new-notify">New</span><?php endif?></div>
<div class="kboard-list-title<?php if(kboard_pure_gallery_title_line($board)):?> <?php echo kboard_pure_gallery_title_line($board)?><?php endif?>"><div class="kboard-pure-gallery-cut-strings">
<?php if($content->secret):?><img src="<?php echo $skin_path?>/images/icon-lock.png" class="kboard-icon-lock" alt="<?php echo __('Secret', 'kboard')?>"><?php endif?>
<?php echo $content->title?>
</div></div>
<div class="kboard-list-user"><?php echo $content->getUserDisplay()?></div>
</a>
</li>
<div class="kboard-gallery-document content-uid-<?php echo $content->uid?>">
<div id="kboard-document">
<div id="kboard-ocean-gallery-document">
<div class="kboard-document-wrap" itemscope itemtype="http://schema.org/Article">
<button type="button" onclick="close_pop_up()">닫기</button>
<div class="kboard-title" itemprop="name">
<p><?php echo $content->title?></p>
</div>
<div class="kboard-detail">
<?php if($content->category1):?>
<div class="detail-attr detail-category1">
<div class="detail-name"><?php echo $content->category1?></div>
</div>
<?php endif?>
<?php if($content->category2):?>
<div class="detail-attr detail-category2">
<div class="detail-name"><?php echo $content->category2?></div>
</div>
<?php endif?>
<?php if($content->option->tree_category_1):?>
<?php for($i=1; $i<=$content->getTreeCategoryDepth(); $i++):?>
<div class="detail-attr detail-tree-category-<?php echo $i?>">
<div class="detail-name"><?php echo $content->option->{'tree_category_'.$i}?></div>
</div>
<?php endfor?>
<?php endif?>
<div class="detail-attr detail-writer">
<div class="detail-name"><?php echo __('Author', 'kboard')?></div>
<div class="detail-value"><?php echo $content->getUserDisplay()?></div>
</div>
<div class="detail-attr detail-date">
<div class="detail-name"><?php echo __('Date', 'kboard')?></div>
<div class="detail-value"><?php echo date('Y-m-d H:i', strtotime($content->date))?></div>
</div>
<div class="detail-attr detail-view">
<div class="detail-name"><?php echo __('Views', 'kboard')?></div>
<div class="detail-value"><?php echo $content->view?></div>
</div>
</div>
<div class="kboard-content" itemprop="description">
<div class="content-view">
<?php echo $content->getDocumentOptionsHTML()?>
<?php echo $content->content?>
</div>
</div>
<div class="kboard-document-action">
<div class="left">
<button type="button" class="kboard-button-action kboard-button-like" onclick="kboard_document_like(this)" data-uid="<?php echo $content->uid?>" title="<?php echo __('Like', 'kboard')?>"><?php echo __('Like', 'kboard')?> <span class="kboard-document-like-count"><?php echo intval($content->like)?></span></button>
<button type="button" class="kboard-button-action kboard-button-unlike" onclick="kboard_document_unlike(this)" data-uid="<?php echo $content->uid?>" title="<?php echo __('Unlike', 'kboard')?>"><?php echo __('Unlike', 'kboard')?> <span class="kboard-document-unlike-count"><?php echo intval($content->unlike)?></span></button>
</div>
<div class="right">
<button type="button" class="kboard-button-action kboard-button-print" onclick="kboard_document_print('<?php echo $url->getDocumentPrint($content->uid)?>')" title="<?php echo __('Print', 'kboard')?>"><?php echo __('Print', 'kboard')?></button>
</div>
</div>
<?php if(isset($content->attach->over_image)) unset($content->attach->over_image);?>
<?php if($content->isAttached()):?>
<div class="kboard-attach">
<?php foreach($content->getAttachmentList() as $key=>$attach):?>
<button type="button" class="kboard-button-action kboard-button-download" onclick="window.location.href='<?php echo $url->getDownloadURLWithAttach($content->uid, $key)?>'" title="<?php echo sprintf(__('Download %s', 'kboard'), $attach[1])?>"><?php echo $attach[1]?></button>
<?php endforeach?>
</div>
<?php endif?>
</div>
<?php if($content->visibleComments()):?>
<div class="kboard-comments-area"><?php echo $board->buildComment($content->uid)?></div>
<?php endif?>
<div class="kboard-document-navi">
<div class="kboard-prev-document">
<?php
$bottom_content_uid = $content->getPrevUID();
if($bottom_content_uid):
$bottom_content = new KBContent();
$bottom_content->initWithUID($bottom_content_uid);
?>
<a href="<?php echo $url->getDocumentURLWithUID($bottom_content_uid)?>">
<span class="navi-arrow">«</span>
<span class="navi-document-title kboard-pure-gallery-cut-strings"><?php echo $bottom_content->title?></span>
</a>
<?php endif?>
</div>
<div class="kboard-next-document">
<?php
$top_content_uid = $content->getNextUID();
if($top_content_uid):
$top_content = new KBContent();
$top_content->initWithUID($top_content_uid);
?>
<a href="<?php echo $url->getDocumentURLWithUID($top_content_uid)?>">
<span class="navi-document-title kboard-pure-gallery-cut-strings"><?php echo $top_content->title?></span>
<span class="navi-arrow">»</span>
</a>
<?php endif?>
</div>
</div>
<div class="kboard-control">
<div class="left">
<a href="<?php echo $url->getBoardList()?>" class="kboard-pure-gallery-button-small"><?php echo __('List', 'kboard')?></a>
</div>
<?php if($board->isEditor($content->member_uid) || $board->permission_write=='all'):?>
<div class="right">
<a href="<?php echo $url->getContentEditor($content->uid)?>" class="kboard-pure-gallery-button-small"><?php echo __('Edit', 'kboard')?></a>
<a href="<?php echo $url->getContentRemove($content->uid)?>" class="kboard-pure-gallery-button-small" onclick="return confirm('<?php echo __('Are you sure you want to delete?', 'kboard')?>');"><?php echo __('Delete', 'kboard')?></a>
</div>
<?php endif?>
</div>
<?php if($board->contribution() && !$board->meta->always_view_list):?>
<div class="kboard-pure-gallery-poweredby">
<a href="https://www.cosmosfarm.com/products/kboard" onclick="window.open(this.href);return false;" title="<?php echo __('KBoard is the best community software available for WordPress', 'kboard')?>">Powered by KBoard</a>
</div>
<?php endif?>
</div>
</div>
</div>
<?php endwhile?>
</ul>
<!-- 리스트 끝 -->
<!-- 페이징 시작 -->
<div class="kboard-pagination">
<ul class="kboard-pagination-pages">
<?php echo kboard_pagination($list->page, $list->total, $list->rpp)?>
</ul>
</div>
<!-- 페이징 끝 -->
<?php if($board->contribution()):?>
<div class="kboard-pure-gallery-poweredby">
<a href="https://www.cosmosfarm.com/products/kboard" onclick="window.open(this.href);return false;" title="<?php echo __('KBoard is the best community software available for WordPress', 'kboard')?>">Powered by KBoard</a>
</div>
<?php endif?>
</div>
<?php wp_enqueue_script('pure-gallery-list', "{$skin_path}/list.js", array(), KBOARD_VERSION, true)?>
<style>
#kboard-pure-gallery-list .kboard-gallery-document { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
#kboard-pure-gallery-list #kboard-document { margin: 10% auto; padding: 10px; width: 50%; background-color: white; border: 1px solid gray; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function kboard_gallery_document(uid){
jQuery('.kboard-gallery-document').hide();
jQuery('.content-uid-'+uid).show();
}
function close_pop_up(){
jQuery('.kboard-gallery-document').hide();
}
</script>
확인 부탁드립니다.
감사합니다.
-
스레드봇 (31098 Point)ㆍ2022.08.05 10:57
안녕하세요~^^
남겨주신 코드 중
<a href="<?php echo $url->getDocumentURLWithUID($content->uid)?>">부분을
<a onclick="kboard_gallery_document('<?php echo $content->uid()?>'); return false;">로 변경해보시겠어요?
고맙습니다.
-
워드프레스웹사이트 (275 Point)ㆍ2022.08.08 10:15
알려주신 코드 수정 후
아래 이미지와 같은 레이아웃 깨짐 현상이 발생됩니다.
다시 한번 확인 부탁드립니다.
감사합니다.
-
스레드봇 (31098 Point)ㆍ2022.08.08 10:58
오타가 있었습니다.
아래 코드를
<a onclick="kboard_gallery_document('<?php echo $content->uid()?>'); return false;">아래 코드로 변경해보시겠어요?
<a onclick="kboard_gallery_document('<?php echo $content->uid?>'); return false;">코드 수정 후 문제가 발생한 듯 하다면
디버그 모드를 활성화 하여 원인을 확인해볼 수 있습니다.
디버그 모드 활성화 방법은 아래의 링크를 참고해보세요.
고맙습니다.
