648 lines
37 KiB
Plaintext
648 lines
37 KiB
Plaintext
<%@page import="nlib.cmm.NlibCommonController"%>
|
|
<%
|
|
/**
|
|
* <pre>
|
|
* @Class Name : selectItemDetail.jsp
|
|
*
|
|
* @Description : 소장자료 상세내용을 조회한다.
|
|
*
|
|
*
|
|
* @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
|
|
*
|
|
* </pre>
|
|
*
|
|
* @ ------------ -------- ---------------------------
|
|
* @ 수정일 수정자 수정내용
|
|
* @ ------------ -------- ---------------------------
|
|
* @ 2021. 7. 30. JSYOO 최초 생성
|
|
* @ 2021.10. 28. KNKIM 대출예약, 방문열람신청, 카트담기 연결 처리
|
|
*
|
|
*
|
|
* @author 이씨플라자 * DIGITALSHIP JSYOO
|
|
* @since 2021. 7. 30.
|
|
* @version 1.0
|
|
*
|
|
*/
|
|
%>
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
|
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
|
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
|
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
|
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
|
|
<script src="/js/qrcode.js"></script>
|
|
<c:set var="pageTitle">${result.title}</c:set>
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
fn_setPageTitle("${pageTitle}");
|
|
//로그
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/search/InsertDataInquiryLog.ajax",
|
|
data: {"masterId" : '<c:out value="${result.masterId}"/>'}
|
|
}).done(function(response){
|
|
});
|
|
|
|
})
|
|
|
|
function goDetail(masterId){
|
|
$("#masterId").val(masterId);
|
|
document.referenceDetailForm.action="/search/searchItemDetail.do";
|
|
document.referenceDetailForm.submit();
|
|
}
|
|
|
|
function goList(){
|
|
document.referenceDetailForm.action="/search/searchList.do";
|
|
document.referenceDetailForm.submit();
|
|
}
|
|
|
|
</script>
|
|
<div class="wrap">
|
|
<!-- 소장자료 상세페이지 섹션 -->
|
|
<div class="data detail">
|
|
<form id="referenceDetailForm" name="referenceDetailForm" method="post">
|
|
<input type="hidden" name="collection" id="collection" value="<c:out value='${searchVO.collection}'/>" />
|
|
<input type="hidden" name="pageIndex" title="페이지번호" value="${searchVO.pageIndex }" />
|
|
<input type="hidden" name="pageSize" value="${searchVO.pageSize }" />
|
|
|
|
<input type="hidden" name="filter_creatYyyy" value='${searchVO.filter_creatYyyy}' />
|
|
<input type="hidden" name="creatYyyyYn" value='${searchVO.creatYyyyYn}' />
|
|
|
|
<input type="hidden" name="filter_class" value="<c:out value='${searchVO.filter_class}'/>" />
|
|
<input type="hidden" name="filter_category" value="<c:out value='${searchVO.filter_category}'/>"/>
|
|
<input type="hidden" name="filter_agency" value="<c:out value='${searchVO.filter_agency}'/>"/>
|
|
<input type="hidden" name="filter_mylist" value="<c:out value='${searchVO.filter_mylist}'/>"/>
|
|
<input type="hidden" name="reQueryChk" value="<c:out value='${searchVO.reQueryChk}'/>"/>
|
|
<input type="hidden" name="query" value="<c:out value='${searchVO.query}'/>"/>
|
|
<input type="hidden" name="reQuery" value="<c:out value='${searchVO.reQuery}'/>"/>
|
|
<input type="hidden" name="bookIndex" value="<c:out value='${searchVO.bookIndex}'/>"/>
|
|
<input type="hidden" name="mngtNo" value="<c:out value='${searchVO.mngtNo}'/>"/>
|
|
<input type="hidden" name="createStartDate" value="<c:out value='${searchVO.createStartDate}'/>"/>
|
|
<input type="hidden" name="createEndDate" value="<c:out value='${searchVO.createEndDate}'/>"/>
|
|
<input type="hidden" name="ageCode" value="<c:out value='${searchVO.ageCode}'/>"/>
|
|
<input type="hidden" name="collectionList" value="<c:out value='${searchVO.collectionList}'/>"/>
|
|
<input type="hidden" name="realQuery" value="<c:out value='${searchVO.realQuery}'/>"/>
|
|
<input type="hidden" name="second_class" value="<c:out value='${searchVO.second_class}'/>"/>
|
|
<input type="hidden" name="second_category" value="<c:out value='${searchVO.second_category}'/>"/>
|
|
<input type="hidden" id="masterId" name="masterId" value="" />
|
|
|
|
<h2 class="blind">소장자료 상세페이지 섹션영역</h2>
|
|
<div class="inner">
|
|
<div class="row-top">
|
|
<div class="center">
|
|
<div class="left">
|
|
<div class="cla">
|
|
<div class="con-1">
|
|
<c:if test="${result.ableOnline eq true}">
|
|
<span class="online">온라인열람</span>
|
|
</c:if>
|
|
<c:if test="${result.ableRent eq true}">
|
|
<span class="loan">대출</span>
|
|
</c:if>
|
|
<c:if test="${result.ableRead eq true}">
|
|
<span class="visit">방문열람</span>
|
|
</c:if>
|
|
<c:if test="${result.ableOther eq true}">
|
|
<span class="etc">기타</span>
|
|
</c:if>
|
|
</div>
|
|
<div class="con-2">
|
|
<span class="code"><c:out value="${result.mngtNo}"/></span>
|
|
</div>
|
|
</div>
|
|
<div class="tit"><c:out value="${result.title}"/></div>
|
|
<div class="img"><img src="<c:out value="${result.rprsThumbUrlWithDefaultBig}"/>" alt="${result.title}"></div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="con-1">
|
|
<c:if test="${result.ableOnline eq true}">
|
|
<button type="button" class="view" title="새 창 열림" onclick="gfn_showDocPdf('<c:out value="${result.interfaceId}"/>','<c:out value="${result.masterId}"/>','<c:out value="${result.typeDivCd}"/>','<c:out value="${result.dtlsTypeDivCd}"/>')";>원문보기</button>
|
|
</c:if>
|
|
<button type="button" class="ris" onclick="gfn_showRis('<c:out value="${result.masterId}"/>');">RIS</button>
|
|
<c:if test='${result.mUseYn == "Y"}'>
|
|
<button type="button" class="favorit on" onclick="gfn_changeInterestBtn('${result.masterId }', 'off');">즐겨찾기</button>
|
|
</c:if>
|
|
<c:if test='${result.mUseYn != "Y"}'>
|
|
<button type="button" class="favorit" onclick="gfn_changeInterestBtn('${result.masterId }', 'on');">즐겨찾기</button>
|
|
</c:if>
|
|
<button type="button" class="share" onclick="gfn_setSnsShare('<c:out value="${result.masterId}"/>');">공유</button>
|
|
</div>
|
|
<div class="con-2">
|
|
<div class="de-data">
|
|
<ul>
|
|
<li>
|
|
<span>자료유형</span>
|
|
<span>
|
|
<c:out value="${result.typeCodeNm}"/>
|
|
<c:choose>
|
|
<c:when test="${!empty result.typeCodeNm or !empty result.dtlsTypeDivNm}">
|
|
<c:choose>
|
|
<c:when test="${!empty result.typeCodeNm and !empty result.dtlsTypeDivNm}">
|
|
>
|
|
</c:when>
|
|
</c:choose>
|
|
</c:when>
|
|
<c:otherwise>
|
|
-
|
|
</c:otherwise>
|
|
</c:choose>
|
|
<c:out value="${result.dtlsTypeDivNm}"/>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span>연대</span>
|
|
<span>
|
|
<c:if test="${!empty result.chronologicalCodeStartNm}"><c:out value="${result.chronologicalCodeStartNm}"/>년부터 </c:if>
|
|
<c:if test="${!empty result.chronologicalCodeEndNm}"><c:out value="${result.chronologicalCodeEndNm}"/>까지</c:if>
|
|
<c:if test="${empty result.chronologicalCodeStartNm and empty result.chronologicalCodeEndNm }">-</c:if>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span>주제분야</span>
|
|
<span>
|
|
<c:out value="${result.subjectNmUp}"/>
|
|
<c:choose>
|
|
<c:when test="${!empty result.subjectNmUp or !empty result.subjectNm}">
|
|
<c:choose>
|
|
<c:when test="${!empty result.subjectNmUp and !empty result.subjectNm}">
|
|
>
|
|
</c:when>
|
|
</c:choose>
|
|
</c:when>
|
|
<c:otherwise>
|
|
-
|
|
</c:otherwise>
|
|
</c:choose>
|
|
<c:out value="${result.subjectNm}"/>
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span>생산기관</span>
|
|
<span><c:if test="${empty result.orgNm}">-</c:if><c:out value="${result.orgNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>테마</span>
|
|
<span><c:if test="${empty result.themeCodeNm}">-</c:if><c:out value="${result.themeCodeNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>시대</span>
|
|
<span><c:if test="${empty result.ageCodeNm}">-</c:if><c:out value="${result.ageCodeNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>생산년도</span>
|
|
<span><c:if test="${empty result.creatYyyy}">-</c:if><c:out value="${result.creatYyyy}"/></span>
|
|
</li>
|
|
<c:if test="${result.typeDivCd eq 'IT_BOOK'}">
|
|
<li>
|
|
<span>저자</span>
|
|
<span><c:if test="${empty result.bookAuthor}">-</c:if><c:out value="${result.bookAuthor}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>출판사</span>
|
|
<span><c:if test="${empty result.bookPublisher}">-</c:if><c:out value="${result.bookPublisher}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>발간유형</span>
|
|
<span><c:if test="${empty result.bookPlbcTypeNm}">-</c:if><c:out value="${result.bookPlbcTypeNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>발간매체</span>
|
|
<span><c:if test="${empty result.bookPlbcMda}">-</c:if><c:out value="${result.bookPlbcMda}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>청구기호</span>
|
|
<span><c:if test="${empty result.bookCallNo}">-</c:if><c:out value="${result.bookCallNo}"/></span>
|
|
</li>
|
|
</c:if>
|
|
<c:if test="${result.typeDivCd eq 'IT_DOC'}">
|
|
<li>
|
|
<span>문서번호</span>
|
|
<span><c:if test="${empty result.docNo}">-</c:if><c:out value="${result.docNo}"/></span>
|
|
</li>
|
|
</c:if>
|
|
<c:if test="${result.typeDivCd eq 'IT_PHOTO'}">
|
|
<li>
|
|
<span>매체</span>
|
|
<span><c:if test="${empty result.photoMediaNm}">-</c:if><c:out value="${result.photoMediaNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>규격</span>
|
|
<span><c:if test="${empty result.photoSizeNm}">-</c:if><c:out value="${result.photoSizeNm}"/></span>
|
|
</li>
|
|
<ul class="full-width">
|
|
<li class="detail-accordion">
|
|
<span>미디어 설명</span>
|
|
<div class="desc-wrap">
|
|
<div class="desc">
|
|
<c:if test="${empty result.photoDescription}">-</c:if>
|
|
<c:out value="${result.photoDescription}" /><button type="button" class="btn-hide">접기 -</button>
|
|
</div>
|
|
<c:if test="${fn:length(result.photoDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="full-width">
|
|
<li class="detail-accordion">
|
|
<span>미디어 부가설명</span>
|
|
<div class="desc-wrap">
|
|
<div class="desc">
|
|
<c:if test="${empty result.photoAdditionalDescription}">-</c:if>
|
|
<c:out value="${result.photoAdditionalDescription}" /><button type="button" class="btn-hide">접기 -</button>
|
|
</div>
|
|
<c:if test="${fn:length(result.photoAdditionalDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</c:if>
|
|
<c:if test="${result.typeDivCd eq 'IT_VIDEO'}">
|
|
<li>
|
|
<span>미디어 유형</span>
|
|
<span><c:if test="${empty result.videoMediaNm}">-</c:if><c:out value="${result.videoMediaNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>재생시간</span>
|
|
<span><c:if test="${empty result.videoTime}">-</c:if><c:out value="${result.videoTime}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>재생화질상태</span>
|
|
<span><c:if test="${empty result.videoStat}">-</c:if><c:out value="${result.videoStat}"/></span>
|
|
</li>
|
|
<ul class="full-width">
|
|
<li class="detail-accordion">
|
|
<span>미디어 설명</span>
|
|
<div class="desc-wrap">
|
|
<div class="desc">
|
|
<c:if test="${empty result.videoDescription}">-</c:if>
|
|
<c:out value="${result.videoDescription}" /><button type="button" class="btn-hide">접기 -</button>
|
|
</div>
|
|
<c:if test="${fn:length(result.videoDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="full-width">
|
|
<li class="detail-accordion">
|
|
<span>미디어 부가설명</span>
|
|
<div class="desc-wrap">
|
|
<div class="desc">
|
|
<c:if test="${empty result.videoAdditionalDescription}">-</c:if>
|
|
<c:out value="${result.videoAdditionalDescription}" /><button type="button" class="btn-hide">접기 -</button>
|
|
</div>
|
|
<c:if test="${fn:length(result.videoAdditionalDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</c:if>
|
|
<c:if test="${result.typeDivCd eq 'IT_MAP'}">
|
|
<li>
|
|
<span>도면/지도유형</span>
|
|
<span><c:if test="${empty result.mapTypeNm}">-</c:if><c:out value="${result.mapTypeNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>위치(주소)</span>
|
|
<span><c:if test="${empty result.mapLoc}">-</c:if><c:out value="${result.mapLoc}"/></span>
|
|
</li>
|
|
</c:if>
|
|
<c:if test="${result.typeDivCd eq 'IT_MUSE'}">
|
|
<li>
|
|
<span>박물유형</span>
|
|
<span><c:if test="${empty result.museTypeNm}">-</c:if><c:out value="${result.museTypeNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>박물형태</span>
|
|
<span><c:if test="${empty result.museKindNm}">-</c:if><c:out value="${result.museKindNm}"/></span>
|
|
</li>
|
|
<li>
|
|
<span>재질</span>
|
|
<span><c:if test="${empty result.museMeterialNm}">-</c:if><c:out value="${result.museMeterialNm}"/></span>
|
|
</li>
|
|
</c:if>
|
|
</ul>
|
|
</div>
|
|
<div class="b-btn">
|
|
<c:if test="${result.ableRentAppNow }"><button type="button" class="btn btn-color" title="새 창 열림" onclick="gfn_rentItem('${result.mngOrgCd}', '${result.masterId}')">대출신청</button></c:if>
|
|
<c:if test="${not result.ableRentAppNow and result.ableRentResNow }"><button type="button" class="btn btn-color" title="새 창 열림" onclick="gfn_rentItem('${result.mngOrgCd}', '${result.masterId}')">대출예약</button></c:if>
|
|
|
|
<c:if test="${result.ableReadNow }"><button type="button" class="btn btn-green" title="새 창 열림" onclick="gfn_reserveReadItem('${result.mngOrgCd}', '${result.masterId}')">방문열람신청</button></c:if>
|
|
|
|
<c:if test="${result.ableRent or result.ableRead }">
|
|
<button type="button" class="btn btn-orange" onclick="gfn_addRentCart('${result.masterId}', '${result.ableRent}', '${result.ableRead}')">카트담기</button>
|
|
</c:if>
|
|
</div>
|
|
<c:if test="${fn:length(keywordList) > 0 }">
|
|
<div class="keyword">
|
|
<span class="first">키워드</span>
|
|
<c:forEach var="keyword" items="${keywordList }">
|
|
<span><c:out value="${keyword}"/></span>
|
|
</c:forEach>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contents row-bottom">
|
|
<div class="con-1">
|
|
<div class="list-box">
|
|
<div class="list">
|
|
<div class="icon"><img src="/images/icon/icon-data-use.png" alt=""></div>
|
|
<div class="title">이용상태</div>
|
|
<div class="con"><c:out value="${result.useStatusNm}"/></div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="icon"><img src="/images/icon/icon-data-return.png" alt=""></div>
|
|
<div class="title">반납예정일</div>
|
|
<div class="con">
|
|
<span>
|
|
<c:choose>
|
|
<c:when test="${result.ableRentAppNow or empty result.rtnExpctDd}">
|
|
-
|
|
</c:when>
|
|
<c:otherwise>
|
|
<c:out value="${result.rtnExpctDd}"/>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="icon"><img src="/images/icon/icon-data-loan.png" alt=""></div>
|
|
<div class="title">대출</div>
|
|
<div class="con">
|
|
<c:if test="${result.ableRentAppNow eq true}"><span class="poss">신청가능</span></c:if>
|
|
<c:if test="${result.ableRentAppNow eq false and result.ableRentResNow eq true}"><span class="poss">예약가능</span></c:if>
|
|
<c:if test="${result.ableRentNow eq false}"><span class="imposs">신청/예약불가</span></c:if>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="icon"><img src="/images/icon/icon-data-visit.png" alt=""></div>
|
|
<div class="title">방문열람</div>
|
|
<div class="con">
|
|
<c:if test="${result.ableReadNow eq true }"><span class="poss">신청가능</span></c:if>
|
|
<c:if test="${result.ableReadNow eq false }"><span class="imposs">신청불가</span></c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<p>- 자료의 이용상태, 대출가능여부, 방문열람가능여부를 꼭 확인하신 후 이용해주시길 바랍니다.</p>
|
|
<p>- 다른 지방문화원 소장자료관 이용자들을 위해 꼭 필요한 자료만 예약한 후, 가능한 날짜에 예약 및 이용 부탁드립니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="con-2">
|
|
<div class="top">
|
|
<h3><span>목차</span>정보</h3>
|
|
<button type="button" class="down-btn" title="접기/펼치기">down-btn</button>
|
|
</div>
|
|
<div class="bottom h-down">
|
|
<p><c:if test="${empty result.bookIndex }">없음</c:if><c:out value="${result.bookIndex }"/></p>
|
|
</div>
|
|
</div>
|
|
|
|
<c:if test="${fn:length(seeTogetherListVO) > 0 }">
|
|
<div class="con-3">
|
|
<div class="bottom">
|
|
<!-- Swiper -->
|
|
<div class="swiper DetailSwiper1">
|
|
<div class="top">
|
|
<h3><span>함께 볼만한</span>자료</h3>
|
|
</div>
|
|
<div class="swiper-wrapper">
|
|
<c:forEach var="result" items="${seeTogetherListVO}" varStatus="status">
|
|
<div class="swiper-slide">
|
|
<div class="List" onclick="goDetail('${result.masterId}');">
|
|
<div class="con-1">
|
|
<div class="tit underline pink">${result.title }</div>
|
|
</div>
|
|
<div class="con-2">
|
|
<p class="typ"><span>자료유형</span><span><c:if test="${empty result.typeDivNm and empty result.dtlsTypeDivNm}">-</c:if> ${result.typeDivNm } <c:if test="${!empty result.typeDivNm and !empty result.dtlsTypeDivNm}">></c:if>${result.dtlsTypeDivNm}</span></p>
|
|
<p class="sub"><span>주제분야</span><span><c:if test="${empty result.subjectNmUp and empty result.subjectNm}">-</c:if> ${result.subjectNm } <c:if test="${!empty result.subjectNmUp and !empty result.subjectNm}">></c:if>${result.subjectNm}</span></p>
|
|
<p class="age"><span>생산기관</span><span><c:if test="${empty result.orgNm }">-</c:if>${result.orgNm }</span></p>
|
|
<p class="yea"><span>생산년도</span><span><c:if test="${empty result.creatYyyy }">-</c:if>${result.creatYyyy }</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div id="detail1BannerPage" class="pagination">
|
|
<div class="swiper-pagination"></div>
|
|
<div class="loop-count">
|
|
<canvas id="swieper-timer" width="32" height="32"></canvas>
|
|
<button type="button" class="remote remote-detail1"><span></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Swiper end -->
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
|
|
<div class="row-bottom">
|
|
<c:if test="${fn:length(similarListVO) > 0 }">
|
|
<div class="con-4">
|
|
<div class="top">
|
|
<h3><span>이 자료와 유사한</span>자료</h3>
|
|
<p><strong>“ <c:forEach items="${mngOrgList }" var="list" varStatus="status"><c:if test="${status.count ne 1}"> ,</c:if>${list }</c:forEach> ”</strong> 에 있습니다</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<!-- Swiper -->
|
|
<div class="swiper DetailSwiper2">
|
|
<div class="swiper-wrapper items cover">
|
|
<c:forEach var="result" items="${similarListVO}" varStatus="status">
|
|
<div class="swiper-slide">
|
|
<div class="List" onclick="gfn_getDetail('${result.masterId}');">
|
|
<div class="inner">
|
|
<div class="thumbnail">
|
|
<span class="image-frame"><img src="${result.rprsThumbUrlWithDefaultMiddle }" alt=""/></span>
|
|
<div class="detail-cover">
|
|
<strong>${result.title }</strong>
|
|
<ul>
|
|
<li><em>주제유형</em><c:if test="${empty result.typeDivNm}">-</c:if>${result.typeDivNm }</li>
|
|
<li><em>주제분야</em><c:if test="${empty result.subjectNmUp}">-</c:if>${result.subjectNmUp }</li>
|
|
<li><em>생산기관</em><c:if test="${empty result.orgNm }">-</c:if>${result.orgNm }</li>
|
|
<li><em>생산년도</em><c:if test="${empty result.creatYyyy }">-</c:if>${result.creatYyyy }</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div id="detail2BannerPage" class="pagination">
|
|
<div class="swiper-pagination"></div>
|
|
<div class="loop-count">
|
|
<canvas id="swieper-timer" width="32" height="32"></canvas>
|
|
<button type="button" class="remote remote-detail2"><span></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Swiper end -->
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<div class="btn-box">
|
|
<button type="button" class="btn btn-black" onclick="goList();">목록으로</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popup pop-sharing" id="div_pop-sharing" style="display:none;">
|
|
<div class="pop-wrap">
|
|
<div class="sharing-bg">
|
|
<p>자료를 <strong>SNS</strong>에 공유해보세요.</p>
|
|
<button class="btn-close-pop">닫기</button>
|
|
<ul class="sns-list">
|
|
<button type="button" class="kstory-icon"><img src="/images/icon/icon-sharing-kstory-big.svg" data-sType="4" alt="카카오스토리 공유하기" class="sns-pop" /><p>카카오스토리</p></button>
|
|
<button type="button" class="nblog-icon"><img src="/images/icon/icon-sharing-nblog-big.svg" data-sType="3" alt="네이버블로그 공유하기" class="sns-pop" /><p>블로그</p></button>
|
|
<button type="button" class="fb-icon"><img src="/images/icon/icon-sharing-fb-big.svg" data-sType="1" alt="페이스북 공유하기" class="sns-pop" /><p>페이스북</p></button>
|
|
<button type="button" class="tw-icon"><img src="/images/icon/icon-sharing-tw-big.svg" data-sType="2" alt="트위터 공유하기" class="sns-pop" /><p>트위터</p></button>
|
|
</ul>
|
|
<div class="link-copy">
|
|
<label for="p_link-copy" style="display:none;">link</label><input type="text" class="link-txt" id="p_link-copy" value="http://www.nculture.org"/>
|
|
<button type="button" style="margin-top:1px" class="btn btn-white">URL복사</button>
|
|
</div>
|
|
</div>
|
|
<div class="Qr">
|
|
<div class="inner">
|
|
<div id="qrcode" class="Qrimg"></div>
|
|
<div class="Qrtext"><p><strong>QR코드</strong>를 스캔해주세요.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
$(function(){
|
|
$(window).resize(function() {
|
|
|
|
var windowWidth = $(window).width();
|
|
var _loop = false;
|
|
var _slidesPerView = 4;
|
|
var _slidesPerViewBottom = 5;
|
|
var _spaceBetween = 30;
|
|
var _centeredSlides = false;
|
|
var _lenght = 5;
|
|
|
|
if (windowWidth <= 3000) {
|
|
_loop = false;
|
|
_slidesPerView = 4;
|
|
_slidesPerViewBottom = 5;
|
|
_spaceBetween = 30;
|
|
_centeredSlides = false;
|
|
_lenght = 5;
|
|
}
|
|
if (windowWidth <= 1400) {
|
|
_loop = false;
|
|
_slidesPerView = 3;
|
|
_slidesPerViewBottom = 3;
|
|
_spaceBetween = 30;
|
|
_centeredSlides = false;
|
|
_lenght = 3;
|
|
}
|
|
if (windowWidth <= 480) {
|
|
_loop = false;
|
|
_slidesPerView = 1;
|
|
_slidesPerViewBottom = 1;
|
|
_spaceBetween = 20;
|
|
_centeredSlides = false;
|
|
_lenght = 1;
|
|
}
|
|
|
|
/* 함께 볼만한자료 슬라이드 */
|
|
var detailswiper1 = new Swiper('.DetailSwiper1', {
|
|
loop: _loop,
|
|
slidesPerView: _slidesPerView,
|
|
spaceBetween: _spaceBetween,
|
|
centeredSlides: _centeredSlides,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: '.pagination .swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
on: {
|
|
init: function () {
|
|
if (this.slides.length <= _lenght) {
|
|
// First way:
|
|
this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
|
|
this.el.querySelector(".swiper-button-prev").style.visibility = "hidden"; // hiding arrows prev&next
|
|
this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
|
|
this.el.querySelector(".pagination").style.visibility = "hidden";
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/* 유사한 자료 슬라이드 */
|
|
var detailswiper2 = new Swiper('.DetailSwiper2', {
|
|
loop: _loop,
|
|
slidesPerView: _slidesPerViewBottom,
|
|
spaceBetween: _spaceBetween,
|
|
centeredSlides: _centeredSlides,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: '.pagination .swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
on: {
|
|
init: function () {
|
|
if (this.slides.length <= _lenght) {
|
|
// First way:
|
|
this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
|
|
this.el.querySelector(".swiper-button-prev").style.visibility = "hidden"; // hiding arrows prev&next
|
|
this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
|
|
this.el.querySelector(".pagination").style.visibility = "hidden";
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
$('.remote-detail1').click(function () {
|
|
if($(this).hasClass('restart')){
|
|
$(this).removeClass('restart');
|
|
detailswiper1.autoplay.start();
|
|
}else{
|
|
$(this).addClass('restart');
|
|
detailswiper1.autoplay.stop();
|
|
}
|
|
});
|
|
$('.remote-detail2').click(function () {
|
|
if($(this).hasClass('restart')){
|
|
$(this).removeClass('restart');
|
|
detailswiper2.autoplay.start();
|
|
}else{
|
|
$(this).addClass('restart');
|
|
detailswiper2.autoplay.stop();
|
|
}
|
|
});
|
|
|
|
});
|
|
$(window).resize();
|
|
});
|
|
</script> |