외부로그인
메세지 개수 표기 메시지있을시 사운드 작동 //죄송합니다 . 파일 업로드 안햇엇네요 ...
슬라이더로 많이 이용하고, 쉽게 적용할 수 있는 bxslider를 이용해서 슬라이더를 넣는 방법입니다.
index.php / head.php / theme/basic/index.php / 게시판(list.skin.php/view.skin.php/write.skin.php)등 어디에도 쉽게 넣을 수 있습니다.
이전에 비슷한 내용을 올렸었는데 theme에서는 제대로 작동하지 않아서 테스트해보고 다시 올린것 입니다.
압축을 풀면 나오는 jquery_bxslider폴더를 root에 올립니다.(adm과 같은 레벨)
아래 코드를 슬라이더를 넣고자 하는 위치에 붙여넣기 합니다. 경로는 root/jquery_bxslider폴더 에서 가져오는 것으로 정하시면 됩니다.(예: theme/private_school/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/hakmundang/1.png"></li>
<li><img src="../../jquery_bxslider/images/hakmundang/2.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/3.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/4.png" /></li>
</ul>
<script> $(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'vertical',
slideMargin: 5
});
});
</script>
<!--bxslider end -->
* 테마를 사용하시는 경우에도 root에 올리고 링크해야합니다. jquery_bxslider폴더를 테마폴더안에 넣고 적용해보니 그림이 주루룩나오고 적용이 안되는 것을 확인했습니다.
* 한 화면에 두개이상의 슬라이드를 사용하는경우에 움직임을 다르게 (하나는 수동, 하나는 자동) 할 경우에는 <ul class="bxslider">의 .bxslider이름을 서로 다르게 하면됩니다.
* image대신에 동영상을 넣는 경우는 <il>안에 <video>를 사용하여 넣으면 됩니다.
<li>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</li>
- 동영상확장자(mp4를 많이사용해서 .ogg를 생략해도 재생이 됩니다)
.ogg: Developed by the Xiph.Org Foundation. Supported by HTML5.
.mp4: Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.
* image대신에 youtube영상을 넣는 경우: <li>안에 <iframe>을 사용하여 넣으면 됩니다. 유튜브화면에서 마우스우클릭- 소스코드복사하면 유튜브소스가 <iframe>으로 복사됩니다. 이것을 <li>안에 붙여넣기 하면됩니다. 크기나 배치등은 <style>로 조정하면 됩니다.
<li>
<li><iframe style="width: 500px; height: 300px; ; margin-left:100px;" src="https://www.youtube.com/embed/ve0EKXjlIO0" frameborder="0" gesture="media" allowfullscreen></iframe>
</li>
* theme/private_school/index.php에 넣는 경우
* 게시판에 슬라이드 넣는 경우(
* 자세한 사용법은 첨부한 메모장을 참고하시기 바랍니다.
감사합니다.
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누보드5 스킨
2,753건좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
최신글
최신글이면 홈페이지 작업의 진행상태를 %로 나타내며 다음 게시물이 롤업이 됍니다. 게시판의 작업진행을 보여주는 게시판과 같이 쓰면 돼는 최신글입니다. 게시판 링크 https://s...
레이아웃
쪽지 알림 Message-Toaster-For-jQuery admin / 1111
게시판
# 갤러리 스킨을 기본으로 한 학원 선생님 소개 게시판입니다. * skin/gallery 스킨을 기본으로 해서 변형한것입니다. 따라서 이미지폭, 높이, 한페이지에 나오는 이미...
갤러리
목록에서 이미지&제목&내용이 보이는 롤링 갤러리입니다. 사용자는 볼수만 있게 목록권한 1만 주시고 나머지는 관리자 권한 주시면 됩니다. 관리자는 아래에 목록이 따로 보이므로 글...
갤러리
안녕하세요 오늘 2년전에 만든 갤러리 스킨을 올려봅니다. 본 스킨은 모차마님의 베이직 갤러리를 바탕하여 만든 스킨이므로 먼저 모차마님 한테 감사의 인사를 드립니다. K ...
게시판
그림자 밟기 님의 주간 일정 게시판 (비동기) 스킨을 이용하여 식단표를 만들어 보았습니다. https://sir.kr/g5_skin/16464?sfl=wr_subject%7C%7C...
전체검색
슬라이더로 많이 이용하고, 쉽게 적용할 수 있는 bxslider를 이용해서 슬라이더를 넣는 방법입니다. index.php / head.php / theme/basic/index.p...
게시판
https://sir.kr/qa/210890 글을 등록할 게시판을 선택하여 글을 올릴 수는 없나요?
갤러리
https://sir.kr/g5_skin/12821?sca=%EA%B0%A4%EB%9F%AC%EB%A6%AC&page=2 위토즈 님 스킨 변형해서 올려봅니다 ~ 썸네일 하...
댓글 61개
혹시 반응형일때 브라우져창크기를 줄이면 이미지 화살표버튼 위치가 아래로 내려가고 메인슬라이드이미지는 안보였다가 새로고침 또는 이미지 오토로딩으로 될때 다시 사이즈가 정상적으로 보이는데 저만 그런건가요?
감사합니다.
이미지를 어떻게 넣나요 ?
그리고 <li><img src="jquery_bxslider/images/suzy.png"></li> 식으로 불러옵니다
아주 멋집니다 수고 하세요~~
공유 감사드려요 ^^
감사합네당^&^
해결 했네요ㅎㅎ
감사합니다.
<script> $(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 15000,
});
});
</script>