탭메뉴 슬라이드 적용

<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_LIB_PATH.'/thumbnail.lib.php');

add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);

add_stylesheet('<link rel="stylesheet" type="text/css" href="'.$board_skin_url.'/lightslider.css"/>', 0);

add_javascript('<script type="text/javascript" src="'.$board_skin_url.'/lightslider.js"></script>', 0);

?>

<style>

.boxSelUl {width:100%;text-align: center;}

.boxSelUl li {display:inline-block;cursor: pointer;border:1px solid #e8e8e8;}

.liActive {border:1px solid #3b4d89 !important;}

.hiddenBox {width:900px;margin:0 auto;display: none;}

.hiddenBox:first-child{display:block;}

.lSGallery li {border:1px solid #e8e8e8; box-sizing: border-box;}

.lSGallery .active {border:1px solid #3b4d89 !important; box-sizing: border-box;}

</style>

<h2 id="container_title"><?php echo $board['bo_subject'] ?><span class="sound_only"> 목록</span></h2>

<!-- 게시판 목록 시작 { -->

<div id="bo_gall" style="width:<?php echo $width; ?>">

    <?php if ($is_category) { ?>

    <nav id="bo_cate">

        <h2><?php echo $board['bo_subject'] ?> 카테고리</h2>

        <ul id="bo_cate_ul">

            <?php echo $category_option ?>

        </ul>

    </nav>

    <?php } ?>

      

      <?php

      $sql = " SELECT * FROM g5_area as a LEFT JOIN g5_area_page as ap ON a.ar_code = ap.ar_code ";

      $rows = sql_query($sql);

      

      $list = array();

      while($row = sql_fetch_array($rows))

      {

          $list[] = $row;

      }

      ?>

      <div>

            <ul class="boxSelUl">

                  <?php

                  $liCnt = 0;

                  foreach($list as $key => $val) : ?>

                  <li class="boxSelLi <?= $liCnt == 0 ? "liActive" : "" ?>" data-code="<?= $val["ar_code"] ?>"><img src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image"] ?>"></li>            

                  <?php

                  $liCnt++;

                  endforeach; ?>

            </ul>

      </div>

      

      

      <div style="margin-bottom:50px">

            <?php foreach($list as $key => $val) : ?>

            <div class="hiddenBox box<?= $val["ar_code"] ?>">

            <ul class="sliderBox<?= $val["ar_code"] ?>">

                  <?php if($val["plan_image_sub1"]) : ?>

                  <li data-thumb="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub1"] ?>" data-src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub1"] ?>">

                        <div style="text-align: center;">

                              <img src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub1"] ?>">

                        </div>

                        </li>

                  <?php endif; ?>

                  <?php if($val["plan_image_sub2"]) : ?>

                  <li data-thumb="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub2"] ?>" data-src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub2"] ?>">

                        <div style="text-align: center;">

                              <img src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub2"] ?>">

                        </div>

                  </li>

                  <?php endif; ?>

                  <?php if($val["plan_image_sub3"]) : ?>

                  <li data-thumb="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub3"] ?>" data-src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub3"] ?>">

                              <div style="text-align: center;">

                              <img src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub3"] ?>">

                              </div>

                  </li>

                  <?php endif; ?>

                  <?php if($val["plan_image_sub4"]) : ?>

                  <li data-thumb="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub4"] ?>" data-src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub4"] ?>">

                              <div style="text-align: center;">

                              <img src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub4"] ?>">

                              </div>

                  </li>

                  <?php endif; ?>

                  <?php if($val["plan_image_sub5"]) : ?>

                  <li data-thumb="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub5"] ?>" data-src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub5"] ?>">

                        <div style="text-align: center;">

                              <img src="<?= G5_DATA_URL."/plan/".$val["ar_code"]."/".$val["plan_image_sub5"] ?>">

                        </div>

                  </li>

                  <?php endif; ?>

            </ul>

            </div>      

            <?php endforeach; ?>

      </div>

</div>

<script>

$(document).ready(function(){

      var slider = $('.sliderBox10').lightSlider({

        gallery:true,

        item:1,

        loop:true,

        thumbItem:5,

        slideMargin:0,

        enableDrag: false,

        currentPagerPosition:'left'

    }); 

    $(".boxSelLi").click(function(){

            var code = $(this).attr("data-code");

            $(".boxSelLi").removeClass("liActive");

            $(this).addClass("liActive");

            $(".hiddenBox").hide();

            $(".box"+code).show();

            slider.destroy();

            if (!slider.lightSlider) {

                  slider = $('.sliderBox'+code).lightSlider({

                    gallery:true,

                    item:1,

                    loop:true,

                    thumbItem:5,

                    slideMargin:0,

                    enableDrag: false,

                    currentPagerPosition:'left'

                });

            }

    });

});

</script>

 

 

//첫박스만 출력후 슬라이드 적용->탭클릭시 기존 슬라이드 제거후 새로운탭의 이미지를 슬라이드 적용

//destroy() 슬라이드 삭제 함수