|
|
@@ -20,12 +20,333 @@
|
|
|
|
|
|
<th:block layout:fragment="content">
|
|
|
<div id="container" class="container brand_main">
|
|
|
- <h1>브랜드 메인</h1>
|
|
|
+ <div class="wrap ">
|
|
|
+ <th:block th:if="${brandMainLayoutList}" th:each="brandMainLayoutData, mainStat : ${brandMainLayoutList}" th:with="contentsLoc=${#strings.replace(brandMainLayoutData.contentsLoc,'SBM','')},contentsTitle=${brandMainLayoutData.contentsTitle}">
|
|
|
+ <th:block th:if="${brandMainLayoutData.ContentsList != null and !brandMainLayoutData.ContentsList.empty}">
|
|
|
+ <th:block th:if="${contentsLoc=='004'}">
|
|
|
+ <!-- 1. 비주얼 슬라이드 -->
|
|
|
+ <div class="content wide main_visual brand_visual">
|
|
|
+ <div class="cont_head dpnone">
|
|
|
+ <p class="t_c">비주얼 슬라이드</p>
|
|
|
+ </div>
|
|
|
+ <div class="cont_body">
|
|
|
+ <div class="swiper-container post-visual">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <th:block th:each="ContentsData, ContentsStat : ${brandMainLayoutData.ContentsList}">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
|
|
|
+ <div class="txtWrap">
|
|
|
+ <dl class="w">
|
|
|
+ <dd th:text="${ContentsData.strTitle1}"></dd>
|
|
|
+ <dd class="txt_xs" th:text="${ContentsData.subText1}"></dd>
|
|
|
+ </dl>
|
|
|
+ <a th:href="${ContentsData.strVar1}"><button type="button" class="btn"><span>VIEW MORE</span></button></a>
|
|
|
+ </div>
|
|
|
+ <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ <!-- If we need pagination -->
|
|
|
+ <div class="swiper-controls">
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ <div class="slide-curb">
|
|
|
+ <div class="slide-curb-play sbtn01_play">슬라이드 재생</div>
|
|
|
+ <div class="slide-curb-pause sbtn01_stop">슬라이드 정지</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- If we need navigation buttons -->
|
|
|
+ <div class="swiper-button-prev sbtn01_lb"></div>
|
|
|
+ <div class="swiper-button-next sbtn01_rb"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ <th:block th:if="${contentsLoc=='005'}">
|
|
|
+ <!-- brand_info -->
|
|
|
+ <th:block th:each="ContentsData, ContentsStat : ${brandMainLayoutData.ContentsList}">
|
|
|
+ <div class="content brand_info">
|
|
|
+ <div class="cont_body clear">
|
|
|
+ <div class="brand_tit">
|
|
|
+ <p th:text="${contentsTitle}"></p>
|
|
|
+ <a th:href="${ContentsData.strVar1}">브랜드 사이트</a>
|
|
|
+ </div>
|
|
|
+ <div class="brand_desc">
|
|
|
+ <p class="cate" th:text="${ContentsData.strTitle1}"></p>
|
|
|
+ <p class="desc" th:text="${ContentsData.subText1}"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ <!-- 가로 긴 배너 슬라이드 -->
|
|
|
+ <!-- 브랜드 배너 -->
|
|
|
+ <th:block th:if="${contentsLoc=='006'}">
|
|
|
+ <div class="content wide main_1stage">
|
|
|
+ <div class="cont_head dpnone">
|
|
|
+ <p class="t_c">배너 슬라이드</p>
|
|
|
+ </div>
|
|
|
+ <div class="cont_body">
|
|
|
+ <div class="swiper-container post-bnnWide">
|
|
|
+ <div class="swiper-wrapper ">
|
|
|
+ <th:block th:each="ContentsData, ContentsStat : ${brandMainLayoutData.ContentsList}">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a th:href="${ContentsData.strVar1}">
|
|
|
+ <div class="bnnbox" style="background:#e3e7ea;">
|
|
|
+ <div class="txtWrap">
|
|
|
+ <p th:text="${ContentsData.strTitle1}"></p>
|
|
|
+ <!--<p>아우터 + 이너 단독세일</p>-->
|
|
|
+ <button type="button" class="btn">VIEW MORE</button>
|
|
|
+ </div>
|
|
|
+ <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-button-prev "></div>
|
|
|
+ <div class="swiper-button-next "></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+
|
|
|
+ </th:block>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<script th:inline="javascript">
|
|
|
/*<![CDATA[*/
|
|
|
-
|
|
|
+var brandMainLayoutList = [[${brandMainLayoutList}]];
|
|
|
+console.log('brandMainLayoutList::'+brandMainLayoutList);
|
|
|
+
|
|
|
+$(document).ready( function() {
|
|
|
+
|
|
|
+ // 컨텐츠 호출
|
|
|
+ $("#br_header").load("br_head.html");
|
|
|
+ $("#footer").load("foot.html");
|
|
|
+
|
|
|
+ /* SLIDE - BRAND_VISUAL */
|
|
|
+ var br_post_slide = new Swiper('.brand_main .brand_visual .post-visual', {
|
|
|
+ loop: true,
|
|
|
+ spaceBetween: 60,
|
|
|
+ speed : 1000,
|
|
|
+ autoplay: {
|
|
|
+ delay: 3000,
|
|
|
+ disableOnInteraction: false,
|
|
|
+ },
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.brand_main .brand_visual .swiper-button-next',
|
|
|
+ prevEl: '.brand_main .brand_visual .swiper-button-prev',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: '.brand_main .brand_visual .swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionStart: function () {
|
|
|
+ //$('.brand_main .post-visual .swiper-slide-prev .txtWrap').hide();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ //VISUAL SLIDE Control - PAUSE
|
|
|
+ $(document).on('click','.brand_main .brand_visual .slide-curb-pause',function(e){
|
|
|
+ br_post_slide.autoplay.stop();
|
|
|
+ $(this).hide();
|
|
|
+ $('.brand_main .brand_visual .slide-curb-play').show();
|
|
|
+ });
|
|
|
+
|
|
|
+ //VISUAL SLIDE Control - PLAY
|
|
|
+ $(document).on('click','.brand_main .brand_visual .slide-curb-play',function(e){
|
|
|
+ br_post_slide.autoplay.start();
|
|
|
+ $(this).hide();
|
|
|
+ $('.brand_main .brand_visual .slide-curb-pause').show();
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /* SLIDE - NEW ITEMS */
|
|
|
+ var br_trendy_slide = new Swiper('.brand_main .new_item .swiper-container', {
|
|
|
+ watchSlidesProgress: true,
|
|
|
+ watchSlidesVisibility: true,
|
|
|
+ allowTouchMove: false,
|
|
|
+ speed : 1000,
|
|
|
+ autoplay: {
|
|
|
+ delay: 3000,
|
|
|
+ disableOnInteraction:false,
|
|
|
+ },
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.new_item .swiper-button-next',
|
|
|
+ prevEl: '.new_item .swiper-button-prev',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: '.new_item .swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ spaceBetween: 22,
|
|
|
+ });
|
|
|
+
|
|
|
+ br_trendy_slide.on('slideChange', function () {
|
|
|
+ var newitemIndex = br_trendy_slide.activeIndex;
|
|
|
+ var slideWidth = $(".new_item .swiper-slide-visible").eq(0).width() + 22;
|
|
|
+
|
|
|
+ $(".new_item .swiper-slide").removeClass('scaleBig');
|
|
|
+ $(".new_item .swiper-slide-visible").eq(0).addClass('scaleBig');
|
|
|
+ $(".new_item .swiper-slide-visible").eq(3).addClass('scaleBig');
|
|
|
+
|
|
|
+ $(".new_item .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
|
|
|
+ });
|
|
|
+
|
|
|
+ br_trendy_slide.on('reachEnd', function () {
|
|
|
+ var newitemIndex = br_trendy_slide.activeIndex + 1;
|
|
|
+ var slideWidth = $(".new_item .swiper-slide-visible").eq(0).width() + 22;
|
|
|
+
|
|
|
+ $(".new_item .swiper-slide").removeClass('scaleBig');
|
|
|
+ $(".new_item .swiper-slide-visible").eq(1).addClass('scaleBig');
|
|
|
+ $(".new_item .swiper-slide-visible").eq(4).addClass('scaleBig');
|
|
|
+
|
|
|
+ $(".new_item .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /* SLIDE - WIDE BANNER */
|
|
|
+ var br_bn_slide = new Swiper ('.brand_main .main_1stage .post-bnnWide', {
|
|
|
+ loop: true,
|
|
|
+ slidesPerView: 1,
|
|
|
+ speed : 1500,
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.main_1stage .swiper-button-next',
|
|
|
+ prevEl: '.main_1stage .swiper-button-prev',
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /* SLIDE - BEST ITEMS */
|
|
|
+ var br_best_slide = new Swiper('.brand_main .best_item .swiper-container', {
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.best_item .swiper-button-next',
|
|
|
+ prevEl: '.best_item .swiper-button-prev',
|
|
|
+ },
|
|
|
+ slidesPerView: 5,
|
|
|
+ spaceBetween: 22,
|
|
|
+ pagination: {
|
|
|
+ el: '.best_item .swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /* SLIDE - MD’S PICK */
|
|
|
+ var br_md_slide = new Swiper('.brand_main .md_item .swiper-container', {
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.md_item .swiper-button-next',
|
|
|
+ prevEl: '.md_item .swiper-button-prev',
|
|
|
+ },
|
|
|
+ slidesPerView: 5,
|
|
|
+ spaceBetween: 22,
|
|
|
+ pagination: {
|
|
|
+ el: '.md_item .swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /* SLIDE - SPECIAL SHOP */
|
|
|
+ $('.brand_main .special_shop .spe_pr_list .spe_sl').hide();
|
|
|
+ $('.brand_main .special_shop .spe_pr_list .spe_sl').eq(0).show();
|
|
|
+
|
|
|
+ var br_special_left_slide = new Swiper('.brand_main .special_shop .spe_thumb .swiper-container', {
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.brand_main .special_shop .swiper-button-next',
|
|
|
+ prevEl: '.brand_main .special_shop .swiper-button-prev',
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionStart: function () {
|
|
|
+ $('.brand_main .spe_pr_list .spe_sl').hide();
|
|
|
+ $('.brand_main .spe_pr_list .spe_sl').eq(br_special_left_slide.activeIndex).show();
|
|
|
+ },
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".brand_main .special_shop .spe_pr_list .spe_sl .swiper-container").each(function(index, element){
|
|
|
+ var $this = $(this);
|
|
|
+ $this.addClass('spe' + index);
|
|
|
+
|
|
|
+ var br_special_right_slide = new Swiper('.spe' + index, {
|
|
|
+ observer: true,
|
|
|
+ observeParents: true,
|
|
|
+ watchSlidesProgress: true,
|
|
|
+ watchSlidesVisibility: true,
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ freeMode: true,
|
|
|
+ spaceBetween: 20,
|
|
|
+ scrollbar: {
|
|
|
+ el: $('.spe' + index).siblings('.swiper-scrollbar'),
|
|
|
+ hide: false,
|
|
|
+ },
|
|
|
+ watchOverflow: true,
|
|
|
+ });
|
|
|
+
|
|
|
+ br_special_right_slide.on('slideChange', function () {
|
|
|
+ $(".special_shop .spe_sl .spe" + index).find(".swiper-slide").removeClass('view');
|
|
|
+ $(".special_shop .spe_sl .spe" + index).find(".swiper-slide-visible").eq(0).addClass('view');
|
|
|
+ $(".special_shop .spe_sl .spe" + index).find(".swiper-slide-visible").eq(1).addClass('view');
|
|
|
+ $(".special_shop .spe_sl .spe" + index).find(".swiper-slide-visible").eq(2).addClass('view');
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ /* SLIDE - BRAND_LOOKBOOK */
|
|
|
+ var br_lookbook_slide = new Swiper('.brand_main .br_lookbook .swiper-container', {
|
|
|
+ loop: true,
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ spaceBetween: 20,
|
|
|
+ speed : 800,
|
|
|
+ autoWidth: true,
|
|
|
+ autoHeight: true,
|
|
|
+ centeredSlides: true,
|
|
|
+ autoplay: false,
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.brand_main .br_lookbook .swiper-button-next',
|
|
|
+ prevEl: '.brand_main .br_lookbook .swiper-button-prev',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: '.brand_main .br_lookbook .swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ // BRAND_LOOKBOOK > picker - 룩북_피커_상품정보 팝업
|
|
|
+ $(document).on('click','#btn_lookbook_picker01',function(e){
|
|
|
+ $("#brLookbookPopup").modal("show");
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /* SLIDE - BRAND_TV */
|
|
|
+ var br_tv_slide = new Swiper ('.brand_main .main_tv .post-tv', {
|
|
|
+ loop: true,
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ spaceBetween: 60,
|
|
|
+ centeredSlides: true,
|
|
|
+ autoplay: false,
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.brand_main .main_tv .swiper-button-next',
|
|
|
+ prevEl: '.brand_main .main_tv .swiper-button-prev',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: '.main_tv .swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+});
|
|
|
/*]]>*/
|
|
|
</script>
|
|
|
|
eskim