[이윰] owl.carousel 플러그인을 이용한 최신글 이미지 슬라이더 스킨

페이지 정보

루루아빠 3,320 2015.09.04 06:14

첨부파일

평점

  • - 평점 : 0점 (0명 참여)

본문

owl.carousel 플러그인을 이용한 최신글 이미지 슬라이더 스킨

owl.carousel 플러그인을 이용한 최신글 슬라이더 스킨


  • 본 스킨은 owl.carousel 플러그인을 이용하여 모바일과 피시에서 스와이프(swipe)가 지원됩니다.
  • 스킨 기본 설정은 위 샘플 gif 에서 보이는 것처럼 피시에선 4개의 이미지를 모바일에선 2개의 이미지를 한 화면에 표시합니다.
  • 새로운 게시물일 경우 오른쪽 상단에 NEW 클래스를 적용하여 새로 올라온 글임을 나타냅니다.

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

{latest->latest_eyoom('custom_image_slider','title=게시판 제목||bo_table=추출 게시판명||count=뽑을 갯수||cut_subject=20||img_view=y||bo_direct=n||img_width=600')}

추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,289,441
레벨 96
경험치 1,386,036

Progress Bar 63%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

자료실 게시판에서 다양한 자료를 공유하실 수 있습니다. 공유 자료는 형식에 구애를 받지 않습니다.

  • 포인트 배포가 가능합니다. 포인트를 걸고 자료를 업로드 하시면 다운로드 발생 시 배포한 회원님께 100%의 포인트가 적립됩니다.
  • 적립된 포인트는 향후 사용가능하도록 하겠습니다.
  • 저작권이 있는 자료는 무단으로 배포하실 수 없으니 주의하여 주시길 바랍니다.
배포되는 자료는 일일이 필터링 할 수 없으며 문제발생 시 책임을 지지 않습니다.
회원님들간의 자발적인 정화와 참여를 부탁드립니다.
Total 611 페이지