owl.carousel 플러그인을 이용한 최신글 뉴스 스티커 > 시즌3 공유자료실

본문 바로가기

시즌3 공유자료실

owl.carousel 플러그인을 이용한 최신글 뉴스 스티커

배포파일 : owl.carousel.zip (20.8K)
다운로드횟수 : 13|최종수정일 : 2015-09-03 14:48:26
배포파일 : custom_text_slider.zip (1.1K)
후원포인트 : 2,000포인트|다운로드횟수 : 3|최종수정일 : 2015-09-03 14:48:26

본문


  • 본 스킨은 owl.carousel 플러그인을 이용하여 모바일과 피시에서 스와이프(swipe)가 지원됩니다.
  • last.skin.html의 하단부 스크립트 소스를 수정하여 속도 조절을 할 수 있습니다. 

1. 첫번째 자료 owl.carousel.zip을 다운받아 압축을 풀어 그누보드5/eyoom/theme/설치된 테마/plugins 폴더에 붙혀넣습니다.
2. 그누보드5/eyoom/theme/설치된 테마/layout/head_bs.html 을 열어 상단에 아래 소스를 참조하여 추가합니다.


<?php if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
add_stylesheet('<link rel="stylesheet" href="../plugins/owl.carousel/owl-carousel/owl.carousel.css" type="text/css" media="screen">',0);
?>

3.  그누보드5/eyoom/theme/설치된 테마/layout/tail_bs.html 을 열어 <script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script> 을 검색하여 적당한 위치에 다음 소스를 추가합니다.

<script type="text/javascript" src="../plugins/owl.carousel/owl-carousel/owl.carousel.min.js"></script>

4. custom_text_slider.zip 을 다운받아 압축을 풀어 그누보드5/eyoom/theme/설치된 테마/skin_bs/latest 에 붙혀 넣습니다.
5. 사용할 페이지에 다음 소스를 활용합니다.

<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=100')}-->


참고적으로 이 최신글 사용시 높이나 간격이 맞질 않아 margin값을 수정하셔야 할 경우가 있을 겁니다.
다음과 같은 방식으로 응용해보세요.

피시에서 보기 응용 : 네비메뉴 상단 빈 공간에 위치 시키고자 할때


<div class="col-sm-8 hidden-sm hidden-xs" style="margin-top: 값px;">
<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=100')}-->
</div>
모바일에서 보기 응용 : 전체 넓이에 위치시키고자 할때

<div class="col-xs-12" style="margin-top: 0px; margin-bottom: 0px;">
<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=45')}-->
</div>
더불어 list.skin.html 소스 중

<div class="owl-slider-text" style="bottom:값px;height:값px">
의 "값"의 수치를 조정해서 사용자 환경에 맞게 수정하세요.

1
로그인 후 추천 또는 비추천하실 수 있습니다.

댓글목록13

비즈팔님의 댓글

profile_image
좋은 자료 공개해 주셔서 감사합니다.
요즘 이것저것 손댈일이 많아서 작은 팁하나도 못하고 있네요.^^

축하합니다. 첫댓글 포인트 67포인트를 획득하였습니다.

shadow님의 댓글의 댓글

profile_image
요즘 "이윰"님이 바쁘신지 변화가 없는 듯 해서 홈에서 사용하는 자료를 하나씩 올려보고 있네요.
잘 지내시죠?
"이윰넷"에 자주 들려서 훌륭한 팁 좀 많이 올려주세요^^;

joosam님의 댓글

profile_image
shadow님 설치 적용 문의 드립니다... 베이직 테마 메인은 사이드메뉴를 적용 안한 경우 입니다..
인덱스에서 margin-top: 10px; margin-bottom: 10px을 주고
list.skin.html에서도 bottom:10px;height:10px 값을 주었는요
<div class="col-xs-12" style="margin-top: 0px; margin-bottom: 0px;">
<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=45')}-->
</div> 이걸 적용 했구요... 상단이 조금 가려져서 보이는데요.. 텍스트 크기문제인가요?

shadow님의 댓글의 댓글

profile_image
뽑아오는 글 자체 상단이 일부 가려져 보인다는 말씀이신가요?
최신글을 어느 부분에 삽입하셨는지요?

joosam님의 댓글

profile_image
- 첨부파일 : 1111111.jpg (23.6K) - 다운로드
인덱스 적용 <div class="basic-bs-body"> 바로 아래 <div class="col-xs-12" style="margin-top: 0px; margin-bottom: 0px;">
<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=45')}-->
</div> 로 적용해 놓았습니다..
제외할 게시판명도 궁금한데요...제외할 게시판명을 모두 써야 하는건가요? board1,board2,board3 < 요런식으로

가려진 부분 이미지 입니다.

shadow님의 댓글의 댓글

profile_image
제외할 게시판은 말씀하신대로 하시는게 맞습니다.
그리고 가려지는 부분은 샘플 사이트를 봐야 알 것 같은데요? 어쩌지요?

shadow님의 댓글의 댓글

profile_image
스킨의 style.css 중 .custom-text-slider 의 padding 값을 다음처럼 수정해보세요.

수정 전

padding: 5px 5px 13px 5px;
수정 후

padding: 13px 5px 13px 5px;

joosam님의 댓글

profile_image
shadow님 고맙습니다~~~  역시나 입니다~~  적용 게시판을 공지등의 특정 게시판으로 하려면 어찌 해야 되나요?
많은 질문 죄송합니다~~

shadow님의 댓글

profile_image
bo_exclude 값을 bo_include로 수정하시고 포함하고자하는 테이블(게시판)명을 입력하시면 됩니다.
그리고 위에 적어드린 값 padding: 13px 5px 13px 5px; 의 의미는 padding: 상단과의 간격px 오른쪽과의 간격px 하단과의 간격px 왼쪽과의 간격px;
이니 입맞에 맞게 수정하셔요.

joosam님의 댓글의 댓글

profile_image
꼼꼼한 적용 팁 고맙습니다~~  늦은 댓글 죄송합니다~~

회색늑대님의 댓글

profile_image
작은 움직임이 사이트를 지루하지 않게 만드네요.

축하합니다. 행운의 포인트 10포인트를 획득하였습니다.

woong님의 댓글

profile_image
좋은 자료 감사합니다.

오늘도좋은날님의 댓글

전체 7 건 - 1 페이지
사이트 내 전체검색