PC환경 쇼핑몰 메인 페이지 이미지 슬라이더2 정보
PC환경 쇼핑몰 메인 페이지 이미지 슬라이더2관련링크
http://bikedb.co.kr/ver2/shop
830회 연결
첨부파일
본문
기존의 FlexSlider는 커뮤니티 페이지( http://bikedb.co.kr/ver2 )로 이동시켰습니다.
http://sir.co.kr/bbs/board.php?bo_table=yc5_tip&wr_id=25&page=1
Flux-Slider을 이용한 이미지 슬라이더 입니다. 크롬이나 파이어폭스로 확인해 보세요.
IE8 이하 버전은 지원하지 않습니다.
관리자 배너관리 부분과 lib 파일 수정은 아래 글을 참조하시면 됩니다.
http://sir.co.kr/bbs/board.php?bo_table=yc5_tip&wr_id=25&page=1
Flux-Slider-master 폴더를 Plugin 폴더 밑에 만든후 링크된 주소에 파일을 다운받아 업로드해 주세요.
css/default_shop.css 파일에 아래 부분을 추가합니다.
div#slider {-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;padding:0 0 10px; !important;overflow:hidden}
div#slider ul.pagination{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;padding:10px 0 !important;overflow:hidden}
div#slider ul.pagination li{text-indent:10000px;height:8px;width:8px;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;background:rgba(0, 0, 0, 0.6);-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.1)}
div#slider ul.pagination li.current{background:rgba(255, 0, 0, 0.8)}
shop/index.php 파일에 아래 부분을 추가합니다.
<!-- 메인이미지 시작 { -->
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Use Zepto for best performance on WebKit based browser -->
<!--<script src="js/zepto/zepto.js" type="text/javascript" charset="utf-8"></script>-->
<!-- Use jQuery for best compatibility with other CSS3 enabled browsers -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo G5_URL; ?>/plugin/Flux-Slider-master/js/flux.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//if(!flux.browser.supportsTransitions)
//alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: true
});
});
</script>
<div id="slider">
<?php echo display_banner_maintop('메인상단', '2'); ?>
</div>
<!-- } 메인이미지 끝 -->
첨부된 파일(boxbanner.maintop2.skin.php)을 skin/shop/basic 폴더안에 넣어주세요.
* 그누보드5 에도 적용 가능합니다.
http://sir.co.kr/bbs/board.php?bo_table=yc5_tip&wr_id=25&page=1
Flux-Slider을 이용한 이미지 슬라이더 입니다. 크롬이나 파이어폭스로 확인해 보세요.
IE8 이하 버전은 지원하지 않습니다.
관리자 배너관리 부분과 lib 파일 수정은 아래 글을 참조하시면 됩니다.
http://sir.co.kr/bbs/board.php?bo_table=yc5_tip&wr_id=25&page=1
Flux-Slider-master 폴더를 Plugin 폴더 밑에 만든후 링크된 주소에 파일을 다운받아 업로드해 주세요.
css/default_shop.css 파일에 아래 부분을 추가합니다.
div#slider {-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;padding:0 0 10px; !important;overflow:hidden}
div#slider ul.pagination{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;padding:10px 0 !important;overflow:hidden}
div#slider ul.pagination li{text-indent:10000px;height:8px;width:8px;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;background:rgba(0, 0, 0, 0.6);-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.1)}
div#slider ul.pagination li.current{background:rgba(255, 0, 0, 0.8)}
shop/index.php 파일에 아래 부분을 추가합니다.
<!-- 메인이미지 시작 { -->
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Use Zepto for best performance on WebKit based browser -->
<!--<script src="js/zepto/zepto.js" type="text/javascript" charset="utf-8"></script>-->
<!-- Use jQuery for best compatibility with other CSS3 enabled browsers -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo G5_URL; ?>/plugin/Flux-Slider-master/js/flux.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//if(!flux.browser.supportsTransitions)
//alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: true
});
});
</script>
<div id="slider">
<?php echo display_banner_maintop('메인상단', '2'); ?>
</div>
<!-- } 메인이미지 끝 -->
첨부된 파일(boxbanner.maintop2.skin.php)을 skin/shop/basic 폴더안에 넣어주세요.
* 그누보드5 에도 적용 가능합니다.
추천
2
2
댓글 8개
소스 좀 수정했습니다.
IE8에서 A태그 Link 문제 처리했습니다.
IE8에서 A태그 Link 문제 처리했습니다.
너무 좋아요,,,
이게 기본 기능에 포함되면 좋겠구만 ^^
이게 기본 기능에 포함되면 좋겠구만 ^^
배너부분만 인덱스에 출력하려면 어떻게 해야 하나요.
다른것까지 다 딸려오던데..
다른것까지 다 딸려오던데..
배너관리에서 이미지와 URL 등록후 '메인상단'으로 선택하세요. 관리자 배너관리에서 한 줄 추가됩니다.
잘됩니다. 근데...화면 바귀는 속도는 어디서 수정하나요?
http://sir.co.kr/bbs/board.php?bo_table=yc5_tip&wr_id=25
관리자 배너관리 부분과 lib 파일 수정을 하고
지금 있는 페이지 아래 내용부분을 따라했는데 아무것도 안뜨네요.. 무슨 문제일까요.. 스킨설정을 따로 해줘야 하는건가요?
스킨들을 다 확인해봤는데 boxbanner.maintop2.skin 이 스킨은 따로 보여지는게 없네요..ㅠㅠ
너무 초보적인 질문 죄송해요...
http://hjin2013.dothome.co.kr/shop/
관리자 배너관리 부분과 lib 파일 수정을 하고
지금 있는 페이지 아래 내용부분을 따라했는데 아무것도 안뜨네요.. 무슨 문제일까요.. 스킨설정을 따로 해줘야 하는건가요?
스킨들을 다 확인해봤는데 boxbanner.maintop2.skin 이 스킨은 따로 보여지는게 없네요..ㅠㅠ
너무 초보적인 질문 죄송해요...
http://hjin2013.dothome.co.kr/shop/
감사합니다
2014년 글인데 지금 적용해도 잘 되네요..
감사합니다
감사합니다