php 파일로 팝업을 띄우려고 하는데.. 채택완료

기존에 슬라이드를 이용해서 게시판에서 돌리면 잘 돌아갑니다.

이걸 메인화면에 php파일을 새로 만들어서 팝업을 띄우려고

php파일을 새로 만들어서 소스 그대로 복사후에

include_once('./_head.php'); 와

include_once('./_tail.php'); 을 지워줬더니 슬라이드가 안돌아갑니다. 

테스트해보니 tail을 지웠을땐 상관없는데 head를 지웠을때 안돌아가는걸 확인하였습니다.

------------------ 팝업창을 띄울 소스입니다. head와 tail이 포함되어있는상황  ----------

<?php

include_once('./_common.php');

$group['gr_subject'] = '문화컨텐츠';

$board['bo_table'] = "sub03_01";

$board['bo_subject'] ='그림동화';

include_once('./_head.php');

?>

<script type="text/javascript" src="/js/jquery.bxslider.js"></script>

<link rel="stylesheet" href="/css/jquery.bxslider.css" />

<style type="text/css">

#container_title{display:none !Important;}

.main_slider {width:100%;position:relative;}

#bx-pager{display:none; text-align:center;width:70%; margin:auto; position:absolute; bottom:30px; left:15%; right:15%; }

#bx-pager h1 {display:inline-block; color:#fff; background:#4d6611; padding:5px 10px; font-size:25px }

#bx-pager h1{ opacity:0.5; }

#bx-pager .active h1{ opacity:1; }

.bxslider li {float:left; position:absolute; left:0;} 

@media (max-width:767px) {

.main_slider > .bx-wrapper .bx-controls-direction a {display:none;}

#bx-pager {display:none; text-align:center;width:90%; margin:auto; position:absolute; bottom:5%; left:5%; right:5%; }

#bx-pager h1 {display:inline-block; color:#fff; background:#4d6611; padding:1% 2%; font-size:1em }

}

@media (max-width:567px) {

#bx-pager {display:none; text-align:center;width:90%; margin:auto; position:absolute; bottom:5%; left:5%; right:5%; }

}

</style>

<div class="main_slider" style="position:relative; width:100%; height:100%; ">

    <ul class="bxslider">

        <li><img src="/theme/basic/img/sub/book0.jpg" /></li>

<li><img src="/theme/basic/img/sub/book1.jpg" /></li>

<li><img src="/theme/basic/img/sub/book2.jpg" /></li>

         <li><img src="/theme/basic/img/sub/book3.jpg" /></li>

            <li><img src="/theme/basic/img/sub/book4.jpg" /></li>

         <li><img src="/theme/basic/img/sub/book5.jpg" /></li>

         <li><img src="/theme/basic/img/sub/book6.jpg" /></li>

         <li><img src="/theme/basic/img/sub/book7.jpg" /></li>

    </ul>

    <div id="bx-pager" style="z-index:70;">

        <a data-slide-index="0" href=""><h1>1</h1></a>

        <a data-slide-index="1" href=""><h1>2</h1></a>

        <a data-slide-index="2" href=""><h1>3</h1></a>

        <a data-slide-index="3" href=""><h1>4</h1></a>

        <a data-slide-index="4" href=""><h1>5</h1></a>

        <a data-slide-index="5" href=""><h1>6</h1></a>

        <a data-slide-index="6" href=""><h1>7</h1></a>

        <a data-slide-index="7" href=""><h1>8</h1></a>

    </div>

</div>

<script type="text/javascript">

$('.bxslider').bxSlider({

  pagerCustom: '#bx-pager',

  mode : 'fade',

  controls:true,

  auto: true,

  autoControls: true

});

$(".main_slider").hover(function(){

    $("#bx-pager").fadeIn("slow");

},function(){

    $("#bx-pager").fadeOut("slow");

});

</script>

<?php

include_once('./_tail.php');

?>