JQuery를 통한 좌,우 슬라이드 최근게시물 입니다.
음.. 모 사이트에서 영감을 얻어 만들어낸 스킨입니다.
원래 html 로 쓰시던데 전 그냥 최근게시물로 만들었습니다 허허 ;
사용방법은 첨부파일 첨부파일에도 있지만 설명이 있어야 할거 같아서.. ;
이용방법
1. js 폴더를 그누보드 js 폴더에 roll 폴더를 skin/latest 폴더에 넣어주시면 됩니다.
2. 추가 소스코드를 head.sub.php 에 넣어줍니다. 추가 코드는 다음과 같습니다.
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/slide.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/js/script.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/js/cycle.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/js/index.js"></script>
3. 속도 설정은 js 폴더의 cycle 에서 변경 가능합니다. 다음의 코드를 수정하시면 됩니다.
------------------------------------------------------------------------------------
timeout: 200, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // true to start next transition immediately after current one completes
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: 200, // speed of the 'in' transition
speedOut: 200, // speed of the 'out' transition
next: 200, // selector for element to use as event trigger for next slide
prev: 200, // selector for element to use as event trigger for previous slide
------------------------------------------------------------------------------------
4. <?=latest("roll", "게시판 이름", 이미지 출력갯수);?>
또한 투명 배경으로 만들었으니 배경색은 어디든 잘 어울릴거라고(?) 믿고 싶습니다.
뭐 이미지가 맘에 안드시면 새로 만드셔도 ㅠㅠ
euc_kr , UTF-8 둘다 올립니다 ㅎㅎ
원래 html 로 쓰시던데 전 그냥 최근게시물로 만들었습니다 허허 ;
사용방법은 첨부파일 첨부파일에도 있지만 설명이 있어야 할거 같아서.. ;
이용방법
1. js 폴더를 그누보드 js 폴더에 roll 폴더를 skin/latest 폴더에 넣어주시면 됩니다.
2. 추가 소스코드를 head.sub.php 에 넣어줍니다. 추가 코드는 다음과 같습니다.
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/slide.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/js/script.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/js/cycle.js"></script>
<script type="text/javascript" src="<?=$g4[path]?>/js/index.js"></script>
3. 속도 설정은 js 폴더의 cycle 에서 변경 가능합니다. 다음의 코드를 수정하시면 됩니다.
------------------------------------------------------------------------------------
timeout: 200, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // true to start next transition immediately after current one completes
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: 200, // speed of the 'in' transition
speedOut: 200, // speed of the 'out' transition
next: 200, // selector for element to use as event trigger for next slide
prev: 200, // selector for element to use as event trigger for previous slide
------------------------------------------------------------------------------------
4. <?=latest("roll", "게시판 이름", 이미지 출력갯수);?>
또한 투명 배경으로 만들었으니 배경색은 어디든 잘 어울릴거라고(?) 믿고 싶습니다.
뭐 이미지가 맘에 안드시면 새로 만드셔도 ㅠㅠ
euc_kr , UTF-8 둘다 올립니다 ㅎㅎ
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누4 스킨
5,847건스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다. 스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y 그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.
댓글 21개
추천~
추천 ~
제가 찾아 헤매던 것인데, 여기서 찾게되니 감사할 따름입니다.
고맙습니다.
Fade 효과도 좋겠지만, 사진이 옆에서 들어왔다가, (들어왔던 방향이면 좋겠고) 옆으로 사라지는 슬라이드 효과를 나타내게 해볼려고 하는데, 어느쪽으로 해도 Fade In Out 효과만 나는 것 같습니다.
Fade inout 효과도 충분히 좋습니다만, 슬라이드 효과로 조정은 안되는 것인지요?
shuffle 을 적어보세요.
cycle.js 에 예시로 나온 부분이기도 합니다
기가 막히네요.
옵션값 조절만 잘하면 멋진 작품이 나오겠습니다.
고맙습니다.
하나 궁금한게있는데 한화면에 2개를 불러 오고싶으면 어떻게 조절을 해야하나요?
알아봐야 할거 같습니다.
'jQuery'이(가) 정의되지 않았습니다. 라고 나옵니다.
slide.js , cycle,js, index.js 개체가 필요하다고 나오는군요;;ㅜㅜ;;