최신글 상단에 슬라이드 넣기 정보
최신글 최신글 상단에 슬라이드 넣기
관련링크
본문
슬라이드로 많이 이용하는 bxslider(http://bxslider.com)를 사용하여 최신글에 슬라이드를 넣는 방법입니다.
bxslider를 압축해제하여 jquery_bxslider 그누보드 root에 업로드한후
index.php파일 안에 아래의 슬라이드 호출코드를 삽입하면 됩니다.
<!--bxslider start --------------------------------------------------->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="jquery_bxslider/images/view/img_fjords_600_400.jpg"</li>
<li><img src="jquery_bxslider/images/view/img_lights_600_400.jpg" /></li>
<li><img src="jquery_bxslider/images/view/img_forest_600_400.jpg" /></li>
<li><img src="jquery_bxslider/images/view/img_mountains_600_400.jpg" /></li>
</ul>
<script> $(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<!--bxslider end --------------------------------------------------->
자세한 내용은 첨부한 메모장을 참고하시면 됩니다.
감사합니다.
* 테마에 bxslider 적용하기:
jquery_bxslider 테마에 적용하기:경로를 루트에 올리고 경로를 변경하지 않고
테마적용이나 아웃로그인적용시에도 루트경로를 그대로 사용하니까 작동을 하네요.
http://webguide.co.kr 현재화면이 테마적용한 화면입니다.(2017.9.7)
경로문제인것 같습니다.
* outlogin.skin.1.php
<!--bxslider start --------------------------------------------------->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<h1>small slide</h1>
<ul class="bxslider">
<li><img src="../../images/small_view/v1.png"</li>
<li><img src="../../images/small_view/v2.png" /></li>
<li><img src="../../images/small_view/v3.png" /></li>
<li><img src="../../images/small_view/v4.png" /></li>
</ul>
<script> $(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<!--bxslider end --------------------------------------------------->
* theme index.php
<!--bxslider start --------------------------------------------------->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="jquery_bxslider/images/01.jpg"</li>
<li><img src="jquery_bxslider/images/02.jpg" /></li>
<li><img src="jquery_bxslider/images/03.jpg" /></li>
<li><img src="jquery_bxslider/images/04.jpg" /></li>
</ul>
<h1>small slide</h1>
<ul class="bxslider">
7
댓글 전체
테마사용중이라서 테마 index.php에 본문 소스를 넣었는데요.
이미지4장이 그냥 주루룩 나오네요. js 가 적용안되는것 같은데 아무리 비교해봐도 하라는데로 다 한것 같은데 ㅠㅠ 어떻하쥬.
경로문제인지...저도 초보라 양해부탁드립니다.
bxslider.com 여기가서 옵션설정에보면 설정하는 방법이 나옵니다.
# jquery_bxslider 테마에 적용하기:경로를 루트에 올리고 경로를 변경하지 않고
테마적용이나 아웃로그인적용시에도 루트경로를 그대로 사용하니까 작동을 하네요.
http://webguide.co.kr 현재화면이 테마적용한 화면입니다.(2017.9.7)
경로문제인것 같습니다.
* outlogin.skin.1.php
<!--bxslider start --------------------------------------------------->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<h1>small slide</h1>
<ul class="bxslider">
<li><img src="../../images/small_view/v1.png"</li>
<li><img src="../../images/small_view/v2.png" /></li>
<li><img src="../../images/small_view/v3.png" /></li>
<li><img src="../../images/small_view/v4.png" /></li>
</ul>
<script> $(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<!--bxslider end --------------------------------------------------->
* theme index.php
<!--bxslider start --------------------------------------------------->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="jquery_bxslider/images/01.jpg"</li>
<li><img src="jquery_bxslider/images/02.jpg" /></li>
<li><img src="jquery_bxslider/images/03.jpg" /></li>
<li><img src="jquery_bxslider/images/04.jpg" /></li>
</ul>
<h1>small slide</h1>
<ul class="bxslider">