720 lines
30 KiB
Plaintext
720 lines
30 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
|
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
|
|
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
|
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
|
|
<c:if test="${fn:length(listBannerInfos) < 2 }">
|
|
//$("#divMainBanner").removeClass();
|
|
$("#divMainBannerPage").remove();
|
|
</c:if>
|
|
|
|
$("#DIV_PAGE_MAIN").removeClass("sub");
|
|
var unreadNotiCnt = $(".noti-btn span.count").text();
|
|
gfn_myAlert(unreadNotiCnt);
|
|
|
|
$('.sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover > a').focus(function(){
|
|
$('.sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover').css('opacity','1');
|
|
});
|
|
$('.sec6 .inner .more-btn a').focus(function(){
|
|
$('.sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover').css('opacity','0');
|
|
});
|
|
|
|
// 현재 viewoport내의 element 확인
|
|
$.fn.isInViewport = function() {
|
|
var elementTop = $(this).offset().top;
|
|
var elementBottom = elementTop + $(this).outerHeight();
|
|
|
|
var viewportTop = $(window).scrollTop();
|
|
var viewportBottom = viewportTop + $(window).height();
|
|
|
|
return elementTop + 300 < viewportBottom
|
|
};
|
|
|
|
$(window).on('resize', function() {
|
|
//브라우저 크기 확인 실시
|
|
var windowHeight = $(window).height(); //요소의 높이를 반환
|
|
if(windowHeight < 440) {
|
|
$('#btn-scroll').removeClass("btn-scroll-fix");
|
|
$('#btn-scroll').addClass("btn-scroll-hide");
|
|
}else {
|
|
$('#btn-scroll').addClass("btn-scroll-fix");
|
|
$('#btn-scroll').removeClass("btn-scroll-hide");
|
|
}
|
|
});
|
|
|
|
$(window).on('scroll', function() {
|
|
// scroll 숨기기
|
|
var $window = $(window);
|
|
var $document = $(document);
|
|
var $footer = $("#footer");
|
|
|
|
if ($window.scrollTop() < $document.height() - $window.height() - $footer.outerHeight() + 100) {
|
|
$('#btn-scroll').addClass("btn-scroll-fix");
|
|
$('#btn-scroll').removeClass("btn-scroll-hide");
|
|
} else {
|
|
$('#btn-scroll').removeClass("btn-scroll-fix");
|
|
$('#btn-scroll').addClass("btn-scroll-hide");
|
|
}
|
|
|
|
// 스크롤 할때마다 다음 section값으로 수정
|
|
$('.sec').each(function(index, item){
|
|
if ($(item).isInViewport()) {
|
|
var seq = index+2;
|
|
if(seq == 8) {
|
|
$('#btn-scroll').removeClass("btn-scroll-fix");
|
|
$('#btn-scroll').addClass("btn-scroll-hide");
|
|
$('#btn-scroll').attr('onclick','');
|
|
return false;
|
|
}
|
|
$('#btn-scroll').attr('onclick','fn_Move('+seq+')');
|
|
// return false;
|
|
}
|
|
});
|
|
|
|
});
|
|
});
|
|
|
|
function fn_Move(seq) {
|
|
var interval = 100;
|
|
var offset = $("#sec" + seq).offset();
|
|
if(seq > 3) interval = 250;
|
|
$('html, body').animate({
|
|
scrollTop: offset.top - interval
|
|
}, 300);
|
|
return false;
|
|
}
|
|
|
|
function fn_search(keyword) {
|
|
var form = document.createElement("form");
|
|
form.style.display = "none";
|
|
$(form).attr("action", "/search/searchList.do");
|
|
$(form).attr("method", "post");
|
|
|
|
var element = document.createElement("input");
|
|
$(element).attr("name", "query");
|
|
|
|
$(element).attr("value", keyword);
|
|
form.appendChild(element);
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
document.body.removeChild(form);
|
|
|
|
return;
|
|
}
|
|
|
|
function fn_viewAncmnt(articleId) {
|
|
var form = document.createElement("form");
|
|
form.style.display = "none";
|
|
$(form).attr("action", "/bbs/selectAncmntArticle.do");
|
|
$(form).attr("method", "post");
|
|
|
|
var element = document.createElement("input");
|
|
$(element).attr("name", "articleId");
|
|
|
|
$(element).attr("value", articleId);
|
|
form.appendChild(element);
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
document.body.removeChild(form);
|
|
|
|
return;
|
|
}
|
|
|
|
function fn_viewQna(articleId, secretYn, myQnaYn) {
|
|
|
|
// 비밀글인 경우, 본인에 한하여 조회 가능
|
|
if(secretYn == "Y" && myQnaYn == "N") {
|
|
alert("비공개 게시물은 작성자만 확인할 수 있습니다.");
|
|
return;
|
|
}
|
|
|
|
var form = document.createElement("form");
|
|
form.style.display = "none";
|
|
$(form).attr("action", "/bbs/selectQnaArticle.do");
|
|
$(form).attr("method", "post");
|
|
|
|
var element = document.createElement("input");
|
|
$(element).attr("name", "articleId");
|
|
|
|
$(element).attr("value", articleId);
|
|
form.appendChild(element);
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
document.body.removeChild(form);
|
|
|
|
return;
|
|
}
|
|
|
|
function fn_listPops(typeDivCd) {
|
|
$("div.tab_content div.tabs_item").hide();
|
|
$("#listPops_" + typeDivCd).show();
|
|
|
|
}
|
|
</script>
|
|
<button type="button" id="btn-scroll" class="btn-scroll btn-scroll-fix" onclick="fn_Move(2)"></button>
|
|
<!-- 섹션1 -->
|
|
<section id="sec1" class="sec sec1">
|
|
<h2 class="blind">배너 섹션영역</h2>
|
|
<div class="inner">
|
|
<div class="banner text-white">
|
|
<!-- Swiper -->
|
|
<div id="divMainBanner" class="swiper MainSwiper">
|
|
<ul class="swiper-wrapper">
|
|
|
|
<c:if test="${fn:length(listBannerInfos) < 1 }">
|
|
<li class="swiper-slide">
|
|
<div class="img"><img src="/images/bg/bg-mainbanner.jpg" alt=""></div>
|
|
<div class="text">
|
|
<h3>온라인 대출/알람예약 서비스를 통해<br>문화원 소장자료들을 만나보세요.</h3>
|
|
<p>자료 검색을 통해 원하는 자료를 찾고, 대출/열람 예약 신청까지!<br>온라인에서 쉽고 간편하게 할 수 있습니다.</p>
|
|
</div>
|
|
</li>
|
|
</c:if>
|
|
|
|
<c:if test="${fn:length(listBannerInfos) > 0 }">
|
|
|
|
<c:forEach var="bannerItem" items="${listBannerInfos }">
|
|
<li <c:if test="${fn:length(listBannerInfos) > 1 }"> class="swiper-slide" </c:if> >
|
|
<div class="img">
|
|
<c:if test="${not empty bannerItem.streFileNm }">
|
|
<img src="/main/bannerImage.do?bannerId=<c:out value='${bannerItem.bannerId }'/>" alt="">
|
|
</c:if>
|
|
<c:if test="${empty bannerItem.streFileNm }">
|
|
<img src="/images/bg/bg-mainbanner.jpg" alt="">
|
|
</c:if>
|
|
</div>
|
|
<div class="text">
|
|
<h3><c:out value='${bannerItem.title }'/></h3>
|
|
<p><c:out value='${bannerItem.bannerDesc }'/></p>
|
|
<c:if test="${not empty bannerItem.url }">
|
|
<p><a href="javascript:(0)" onclick="gfn_openNewWindow('<c:out value='${bannerItem.url}'/>')" class="eff">자세히 보기 ></a></p>
|
|
</c:if>
|
|
</div>
|
|
</li>
|
|
</c:forEach>
|
|
</c:if>
|
|
|
|
</ul>
|
|
|
|
<c:if test="${fn:length(listBannerInfos) > 1 }">
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
<div id="divMainBannerPage" class="pagination">
|
|
<div class="swiper-pagination"></div>
|
|
<div class="loop-count">
|
|
<canvas id="swieper-timer1" width="32" height="32"></canvas>
|
|
<button class="remote remote-main"><span></span></button>
|
|
</div>
|
|
</div>
|
|
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="sec1-1" class="search-wrap">
|
|
<h2 class="blind">검색</h2>
|
|
<div class="search-close"><button type="button"></button></div>
|
|
<form id="searchHeaderForm" name="searchHeaderForm" method="post" action="/search/searchList.do">
|
|
<input type="hidden" name="filter_mylist">
|
|
<fieldset>
|
|
<legend>검색</legend>
|
|
<div class="condition_sear">
|
|
<select name="sfield" id="sfield" class="sear_depth" title="검색대상">
|
|
<option value="" selected="selected">전체</option>
|
|
<option value="TITLE">제목</option>
|
|
</select>
|
|
<label for="sfield" style="display:none">검색대상</label>
|
|
</div>
|
|
<div class="search-input">
|
|
<input type="text" placeholder="검색어를 입력해주세요" title="검색어 입력" name="query" id="top_query" class="ark_query" value="" autocomplete="off"><label for="top_query" style="display:none">검색어</label>
|
|
<button type="button" class="btn-search" id="searchHeaderButton" onclick="goSearch();"><span>검색</span></button>
|
|
<button type="button" class="btn-search-detail" id="btn-search-detail-cl">상세<span>검색</span></button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="sec1-2" class="color-box">
|
|
<a href="javascript:void(0);" class="list" onclick="location.href = '/inform/selectNCultureOperationInfo.do';" title="이용안내">
|
|
<div class="title">이용안내</div>
|
|
<div class="icon"><img src="/images/icon/icon-sec1-01.png" alt=""></div>
|
|
<div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
|
|
</a>
|
|
<a href="javascript:void(0);" class="list" onclick="gfn_gotoUrl('/interest/listInterests.do')" title="관심자료">
|
|
<div class="title">관심자료</div>
|
|
<div class="icon"><img src="/images/icon/icon-sec1-02.png" alt=""></div>
|
|
<div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
|
|
</a>
|
|
<a href="javascript:void(0);" class="list" onclick="location.href = '/rent/listRentItems.do';" title="대출관리">
|
|
<div class="title">대출관리</div>
|
|
<div class="icon"><img src="/images/icon/icon-sec1-03.png" alt=""></div>
|
|
<div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
|
|
</a>
|
|
<a href="javascript:void(0);" class="list" onclick="location.href = '/read/listReadItems.do';" title="열람관리">
|
|
<div class="title">열람관리</div>
|
|
<div class="icon"><img src="/images/icon/icon-sec1-04.png" alt=""></div>
|
|
<div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 섹션2 -->
|
|
<c:if test="${fn:length(listOrgPicks) > 0 }">
|
|
<section id="sec2" class="sec sec2">
|
|
<h2 class="blind">문화원픽 섹션영역</h2>
|
|
<div class="inner">
|
|
<div class="pick-box">
|
|
<h3 class="title"><span>문화원's</span> Pick</h3>
|
|
<p class="desc"><c:out value='${mngOrgNm }'/><c:if test='${fn:endsWith(mngOrgNm, "원") }'>이</c:if><c:if test='${not fn:endsWith(mngOrgNm, "원") }'>가</c:if> 추천하는 자료를 만나보세요!</p>
|
|
|
|
<!-- Swiper -->
|
|
<div class="swiper pickSwiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<c:forEach var="itemPick" items="${listOrgPicks }">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="list-box">
|
|
<div class="images"><a href="javascript:void(0)" onclick="gfn_getDetail('<c:out value='${itemPick.masterId }'/>')" title="상세정보"><img src="<c:out value='${itemPick.rprsThumbUrlWithDefaultMiddle }'/>" alt="<c:out value='${itemPick.title }'/> 표지"></a></div>
|
|
<div class="subject">
|
|
<a href="javascript:void(0)" onclick="gfn_getDetail('<c:out value='${itemPick.masterId }'/>')" title="상세정보">
|
|
<span class="block"><span class="cla"><c:out value='${itemPick.typeDivNm }'/></span></span>
|
|
<span class="tit underline pink"><c:out value='${itemPick.title }'/></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div id="pickBannerPage" class="pagination">
|
|
<div class="swiper-pagination"></div>
|
|
<div class="loop-count">
|
|
<canvas id="swieper-timer2" width="32" height="32"></canvas>
|
|
<button class="remote remote-pick"><span></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
|
|
<!-- 섹션3 -->
|
|
<c:if test="${fn:length(listPops) > 0 }">
|
|
<section id="sec3" class="sec sec3">
|
|
<h2 class="blind">인기자료 섹션영역</h2>
|
|
<div class="inner">
|
|
<h3 class="title"><span>인기</span> 자료</h3>
|
|
<p class="desc">이런 인기자료들이 있어요!</p>
|
|
<div class="tab">
|
|
|
|
<div class="tab_content">
|
|
<div class="tabs_item" id="listPops_ALL">
|
|
<div class="swiper popularSwiper">
|
|
<ul class="swiper-wrapper">
|
|
<c:forEach var="itemPop" items="${listPops }">
|
|
<li class="swiper-slide">
|
|
<div class="con-1">
|
|
<div class="block"><span class="cla"><c:out value='${itemPop.typeDivNm }'/></span></div>
|
|
<button class="tit" onclick="gfn_getDetail('<c:out value='${itemPop.masterId}'/>')"><c:out value='${itemPop.title }'/></button>
|
|
</div>
|
|
<div class="con-2">
|
|
<p class="sub"><span>주제분야</span><span><c:if test="${empty itemPop.subjectNm }">-</c:if><c:out value='${itemPop.subjectNm }'/></span></p>
|
|
<p class="age"><span>생산기관</span><span><c:if test="${empty itemPop.orgNm }">-</c:if><c:out value='${itemPop.orgNm }'/></span></p>
|
|
<p class="yea"><span>생산년도</span><span><c:if test="${empty itemPop.creatYyyy }">-</c:if><c:out value='${itemPop.creatYyyy }'/></span></p>
|
|
</div>
|
|
</li>
|
|
</c:forEach>
|
|
</ul>
|
|
<div id="popularBannerPage" class="pagination">
|
|
<div class="swiper-pagination"></div>
|
|
<div class="loop-count">
|
|
<canvas id="swieper-timer3" width="32" height="32"></canvas>
|
|
<button class="remote remote-popular"><span></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 섹션4 -->
|
|
<c:if test="${fn:length(listOnline) > 0 }">
|
|
<section id="sec4" class="sec sec4">
|
|
<h2 class="blind">온라인자료관 섹션영역</h2>
|
|
<div class="inner">
|
|
<h3 class="title"><span>온라인</span> 자료관</h3>
|
|
<p class="desc">문화원 전자자료를 온라인으로 간편하게 열람해보세요!</p>
|
|
<!-- Swiper -->
|
|
<div class="swiper onlineSwiper">
|
|
<div class="swiper-wrapper items cover">
|
|
|
|
<c:forEach var="itemOnline" items="${listOnline }">
|
|
<div class="swiper-slide">
|
|
<div class="List">
|
|
<div class="inner">
|
|
<div class="thumbnail">
|
|
<span class="image-frame"><img src="<c:out value='${itemOnline.rprsThumbUrlWithDefaultMiddle }'/>" alt="<c:out value='${itemOnline.title }'/> 표지" /></span>
|
|
<div class="detail-cover">
|
|
<a href="javascript:void(0)" title="상세화면 보기" onclick="gfn_getDetail('<c:out value='${itemOnline.masterId }'/>')" ><strong><c:out value='${itemOnline.title }'/></strong></a>
|
|
<ul>
|
|
<li><em>자료유형</em><c:if test="${empty itemOnline.typeDivNm }">-</c:if><c:out value='${itemOnline.typeDivNm }'/></li>
|
|
<li><em>주제분야</em><c:if test="${empty itemOnline.subjectNmUp }">-</c:if><c:out value='${itemOnline.subjectNmUp }'/></li>
|
|
<li><em>생산기관</em><c:if test="${empty itemOnline.orgNm }">-</c:if><c:out value='${itemOnline.orgNm }'/></li>
|
|
<li><em>생산년도</em><c:if test="${empty itemOnline.creatYyyy }">-</c:if><c:out value='${itemOnline.creatYyyy }'/></li>
|
|
</ul>
|
|
<div class="btn-box">
|
|
<div class="view"><a href="javascript:void(0)" title="새창 열림" onclick="gfn_showDocPdf('<c:out value='${itemOnline.interfaceId }'/>','<c:out value='${itemOnline.masterId }'/>','<c:out value='${itemOnline.typeDivCd}'/>','<c:out value='${itemOnline.dtlsTypeDivCd}'/>')">원문보기</a></div>
|
|
<div class="RIS"><a href="javascript:void(0)" onclick="gfn_showRis('<c:out value='${itemOnline.masterId }'/>')">RIS</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div id="onlineBannerPage" class="pagination">
|
|
<div class="swiper-pagination"></div>
|
|
<div class="loop-count">
|
|
<canvas id="swieper-timer4" width="32" height="32"></canvas>
|
|
<button class="remote remote-online"><span></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="more-btn"><a href="javascript:void(0)" onclick="location.href='/search/searchList.do?collection=lib_online';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt="더보기"></span></a></div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 섹션5 -->
|
|
<c:if test="${fn:length(listKeywords) > 0 }">
|
|
<section id="sec5" class="sec sec5">
|
|
<h2 class="blind">키워드 섹션영역</h2>
|
|
<div class="inner">
|
|
<div class="keyword-box">
|
|
<h3 class="title"><span>AI 추천</span> 키워드</h3>
|
|
<p class="desc">어떤 자료들을 소장 중인지 키워드로 살펴보세요!</p>
|
|
<ul class="list-tag">
|
|
<c:forEach var="itemKeyword" items="${listKeywords }">
|
|
<li><a href="javascript:void(0)" title="<c:out value='${itemKeyword.keyName }'/>" onclick="fn_search('<c:out value='${itemKeyword.keyName }'/>')"># <c:out value='${itemKeyword.keyName }'/></a>
|
|
</li>
|
|
</c:forEach>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 섹션6 -->
|
|
<section id="sec6" class="sec sec6">
|
|
<h2 class="blind">커뮤니티 섹션영역</h2>
|
|
<div class="inner">
|
|
<div class="Fl notice">
|
|
<div class="ti"><span>공지사항</span></div>
|
|
<div class="con">
|
|
<c:forEach var="itemAncmnt" items="${listAncmnt }">
|
|
<div class="list">
|
|
<a href="javascript:void(0)" onclick="fn_viewAncmnt('<c:out value='${itemAncmnt.articleId}'/>')">
|
|
<div class="box"><p><c:out value='${fn:substring(itemAncmnt.regDd,8,10) }'/></p><p> <c:out value='${fn:substring(itemAncmnt.regDd,2,4) }'/>.<c:out value='${fn:substring(itemAncmnt.regDd,5,7) }'/></p></div>
|
|
<div class="text">
|
|
<p><c:if test='${itemAncmnt.notiYn == "Y"}'>[공지]</c:if><c:out value='${itemAncmnt.title}' escapeXml='false' />
|
|
<c:if test='${itemAncmnt.attachYn == "Y"}'><img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></c:if></p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="more"><a href="javascript:void(0)" onclick="location.href='/bbs/listAncmnts.do';" title="공지사항 더보기"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
|
|
</div>
|
|
<div class="Fl qna">
|
|
<div class="ti"><span>Q&A</span></div>
|
|
<div class="con">
|
|
<c:forEach var="itemQna" items="${listQna }">
|
|
<div class="list">
|
|
<a href="javascript:void(0)" onclick="fn_viewQna('<c:out value='${itemQna.articleId}'/>', '<c:out value='${itemQna.secretYn}'/>', '<c:out value='${itemQna.myQnaYn}'/>')">
|
|
<div class="box"><p><c:out value='${fn:substring(itemQna.regDd,8,10) }'/></p><p> <c:out value='${fn:substring(itemQna.regDd,2,4) }'/>.<c:out value='${fn:substring(itemQna.regDd,5,7) }'/></p></div>
|
|
<div class="text">
|
|
<p><c:out value='${itemQna.title}' escapeXml='false' />
|
|
<c:if test='${itemQna.secretYn == "Y"}'><img src="/images/icon/icon-password.png" class="pw" alt="잠금 아이콘"></c:if>
|
|
</p>
|
|
</div>
|
|
<c:if test='${itemQna.answerYn == "Y"}'>
|
|
<div class="answer suc">
|
|
<p>답변완료</p>
|
|
</div>
|
|
</c:if>
|
|
<c:if test='${itemQna.answerYn != "Y"}'>
|
|
<div class="answer">
|
|
<p>답변대기</p>
|
|
</div>
|
|
</c:if>
|
|
</a>
|
|
</div>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="more"><a href="javascript:void(0)" onclick="location.href='/bbs/listQnas.do';" title="Q&A 더보기"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 섹션7 -->
|
|
<section id="sec7" class="sec sec7">
|
|
<h2 class="blind">중간배너 섹션영역</h2>
|
|
<div class="inner">
|
|
<div class="middle-banner">
|
|
<h3>회원가입만 하면 발급되는<br><strong>간편 온라인 회원증!</strong></h3>
|
|
<p>문화원 소장자료관 회원가입 시 해당 문화원에서<br>사용할 수 있는 온라인 회원증이 발급됩니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<sec:authorize access="isAuthenticated()">
|
|
<button type="button" id="mo-member-btn" class="member-btn" onclick="fn_getMemberCard();">회원증 보러가기</button>
|
|
</sec:authorize>
|
|
<script>
|
|
|
|
/* 메인슬라이드 */
|
|
var myswiper = new Swiper(".MainSwiper", {
|
|
loop: false,
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
centeredSlides: true,
|
|
autoplay: {
|
|
delay: 4000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: '.pagination .swiper-pagination',
|
|
type: 'fraction',
|
|
}
|
|
});
|
|
|
|
$(function(){
|
|
$(window).resize(function() {
|
|
|
|
var windowWidth = $(window).width();
|
|
var _slidesPerView = 5;
|
|
var _slidesPerViewpopula = 4;
|
|
var _slidesPerViewOnline = 7;
|
|
var _spaceBetween = 30;
|
|
var _lenght = 5;
|
|
var _centeredSlides = false;
|
|
var _loop = false;
|
|
|
|
if (windowWidth <= 768) {
|
|
_loop = false;
|
|
_slidesPerView = 1;
|
|
_slidesPerViewpopula = 1;
|
|
_slidesPerViewOnline = 1;
|
|
_spaceBetween = 20;
|
|
_centeredSlides = false;
|
|
_lenght = 1;
|
|
}
|
|
if (windowWidth >= 769) {
|
|
_loop = false;
|
|
_slidesPerView = 3;
|
|
_slidesPerViewpopula = 2;
|
|
_slidesPerViewOnline = 3;
|
|
_spaceBetween = 30;
|
|
_centeredSlides = false;
|
|
_lenght = 3;
|
|
}
|
|
if (windowWidth >= 1400) {
|
|
_loop = false;
|
|
_slidesPerView = 5;
|
|
_slidesPerViewpopula = 4;
|
|
_slidesPerViewOnline = 7;
|
|
_spaceBetween = 30;
|
|
_centeredSlides = false;
|
|
_lenght = 5;
|
|
}
|
|
|
|
/* 문화원s pick */
|
|
var pickswiper = new Swiper('.pickSwiper', {
|
|
loop : _loop,
|
|
slidesPerView : 5,
|
|
spaceBetween : 30,
|
|
centeredSlides : _centeredSlides,
|
|
autoplay : false,
|
|
navigation : {
|
|
nextEl : ".swiper-button-next",
|
|
prevEl : ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: '.pagination .swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView : 1,
|
|
spaceBetween : 20,
|
|
},
|
|
1400: {
|
|
slidesPerView : 3,
|
|
spaceBetween : 30,
|
|
},
|
|
4989: {
|
|
slidesPerView : 5,
|
|
spaceBetween : 30,
|
|
}
|
|
},
|
|
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 onlineswiper = new Swiper('.onlineSwiper', {
|
|
loop : _loop,
|
|
slidesPerView : _slidesPerViewOnline,
|
|
spaceBetween : _spaceBetween,
|
|
centeredSlides : _centeredSlides,
|
|
autoplay: false,
|
|
navigation : {
|
|
nextEl : ".swiper-button-next",
|
|
prevEl : ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: '.pagination .swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView : 1,
|
|
spaceBetween : 20,
|
|
},
|
|
1400: {
|
|
slidesPerView : 3,
|
|
spaceBetween : 30,
|
|
},
|
|
4989: {
|
|
slidesPerView : 7,
|
|
spaceBetween : 30,
|
|
}
|
|
},
|
|
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 popularswiper = new Swiper('.popularSwiper', {
|
|
loop: _loop,
|
|
slidesPerView : _slidesPerViewpopula,
|
|
spaceBetween : _spaceBetween,
|
|
centeredSlides : _centeredSlides,
|
|
autoplay : false,
|
|
pagination: {
|
|
el: '.pagination .swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView : 1,
|
|
spaceBetween : 20,
|
|
},
|
|
1400: {
|
|
slidesPerView : 4,
|
|
spaceBetween : 30,
|
|
},
|
|
4989: {
|
|
slidesPerView : 4,
|
|
spaceBetween : 30,
|
|
}
|
|
},
|
|
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-main').click(function () {
|
|
if($(this).hasClass('restart')){
|
|
$(this).removeClass('restart');
|
|
myswiper.autoplay.start();
|
|
}else{
|
|
$(this).addClass('restart');
|
|
myswiper.autoplay.stop();
|
|
}
|
|
});
|
|
$('.remote-pick').click(function () {
|
|
if($(this).hasClass('restart')){
|
|
$(this).removeClass('restart');
|
|
pickswiper.autoplay.start();
|
|
}else{
|
|
$(this).addClass('restart');
|
|
pickswiper.autoplay.stop();
|
|
}
|
|
});
|
|
$('.remote-popular').click(function () {
|
|
if($(this).hasClass('restart')){
|
|
$(this).removeClass('restart');
|
|
popularswiper.autoplay.start();
|
|
}else{
|
|
$(this).addClass('restart');
|
|
popularswiper.autoplay.stop();
|
|
}
|
|
});
|
|
$('.remote-online').click(function () {
|
|
if($(this).hasClass('restart')){
|
|
$(this).removeClass('restart');
|
|
onlineswiper.autoplay.start();
|
|
}else{
|
|
$(this).addClass('restart');
|
|
onlineswiper.autoplay.stop();
|
|
}
|
|
});
|
|
|
|
});
|
|
$(window).resize();
|
|
});
|
|
|
|
</script>
|