슬라이드스킨 중복사용질문드려요

슬라이드스킨 중복사용질문드려요

QA

슬라이드스킨 중복사용질문드려요

본문

안녕하세요 초보입니다.ㅠㅠ

마음에 드는슬라이더 스킨을사용했는데요

같은스킨은 같은페이지에 두개넣고싶은데 같은슬라이더 두개넣으면 슬라이드가 망가지네요

방법이없나요??

폴더를 복사해서 폴더명을바꿔서 사용해봤는데 안되네여 ㅠㅠ

 

소스첨부할게요

 

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

$img_w = 1144; // 이미지($img) 가로 크기
$img_h = 700; // 이미지($img) 세로 크기
?>

<style type="text/css">

.content-main{position:relative; width:1144px; height:700px;  margin-left:auto; margin-right:auto; margin-top:50px;}
.content-btn{
    position:absolute;
    width:100px;
    height:411px;
    z-index:10;
    cursor:pointer;
}
.prev-btn{
    left:-140px;
    top:0;
}
.next-btn{
    right:-140px;
    top:0;
}
.btn-img{
    opacity:0.9;
    display:block;
    position:absolute;
    left:0;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.list{
    width:800px;
    height:411px;
}
.list li{
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}

</style>

<script type="text/javascript">
;(function($){
    var Carousel = function(con){
        var self = this;
        this.con = con;
        this.setDirect();
        this.conItem = con.find("ul.list");
        this.prev = con.find(".prev-btn");
        this.next = con.find(".next-btn");
        this.conItems = con.find("li");
        this.conItemFirst = this.conItems.first();
        this.conItemLast = this.conItems.last();
        this.flag = true;
        this.settings = {
            width:900,            
            height:4110,          
            postWidth:1144,         
            postHeight:700,       
            scale:0.8,
            speed:600,
            verticalAlign:'center',
            autoPlay:true,
            delay:5000
        }
        $.extend(this.settings,this.getSetting());
        this.setSettingValue();
        this.setPostOther();
        this.next.on("click",function(){
            if(self.flag){
                self.flag = false;
                self.rotate("left");
            }

        });
        this.prev.on("click",function(){
            if(self.flag){
                self.flag = false;
                self.rotate("right");
            }
        });
        if(this.settings.autoPlay){
            this.autoPlay();
            this.con.hover(function(){
                window.clearInterval(self.timer);
            },function(){
                self.autoPlay();
            });
        }

    }

    Carousel.prototype = {
        setDirect:function(){
            var prev = $("<div></div>").addClass("content-btn prev-btn").append($("<img/>").attr("src","<?=$latest_skin_url?>/img/left.png").addClass("btn-img"));
            this.con.prepend(prev);
            var next = $("<div></div>").addClass("content-btn next-btn").append($("<img/>").attr("src","<?=$latest_skin_url?>/img/right.png").addClass("btn-img"));
            this.con.append(next);
        },
        autoPlay:function(){
            var self = this;
            this.timer = window.setInterval(function(){
                self.next.click();
            },this.settings.delay);
        },
        rotate:function(dir){
            var _this = this;
            var zIndex = []
            if(dir === "left"){
                this.conItems.each(function(){
                    var prev = $(this).prev().get(0)?$(this).prev():_this.conItemLast;
                    zIndex.push(prev.css("zIndex"));
                    $(this).animate({
                        width:prev.width(),
                        height:prev.height(),
                        top:prev.css("top"),
                        left:prev.css("left"),
                        opacity:prev.css("opacity")
                    },_this.settings.speed,function(){
                        _this.flag = true;
                    });
                });
                this.conItems.each(function(i){
                    $(this).css({zIndex:zIndex[i]})
                });
            }else  if(dir === "right"){
                this.conItems.each(function(){
                    var next = $(this).next().get(0)?$(this).next():_this.conItemFirst;
                    zIndex.push(next.css("zIndex"));
                    $(this).animate({
                        width:next.width(),
                        height:next.height(),
                        top:next.css("top"),
                        left:next.css("left"),
                        opacity:next.css("opacity")
                    },_this.settings.speed,function(){
                        _this.flag = true;
                    });
                });
                this.conItems.each(function(i){
                    $(this).css({zIndex:zIndex[i]})
                });
            }
        },
        setPostOther:function(){
            var self =this,
                sliceItem = this.conItems.slice(1),
                sliceLength = sliceItem.length,
                rightItem = sliceItem.slice(0,sliceLength/2),
                leftItem = sliceItem.slice(sliceLength/2),
                level = Math.floor(sliceLength/2),
                llevel = level,
                rw = this.settings.postWidth,
                rh = this.settings.postHeight,
                gap = (this.settings.width - this.settings.postWidth)/2/level;
            rightItem.each(function(i){
                rw = rw*self.settings.scale;
                rh = rh*self.settings.scale;
                var j = i;
                $(this).css({
                    zIndex:--level,
                    width:rw,
                    height:rh,
                    left:(self.settings.width + self.settings.postWidth)/2 + gap*(++i) - rw,
                    top:self.setVerticalAlign(rh),
                    opacity:1/(++j)
                });
            });
            var lw = rightItem.last().width(),
                lh = rightItem.last().height();
            leftItem.each(function(i){
                $(this).css({
                    zIndex:level++,
                    width:lw,
                    height:lh,
                    left:gap*i,
                    top:self.setVerticalAlign(lh),
                    opacity:1/llevel--
                });
                lw = lw/self.settings.scale;
                lh = lh/self.settings.scale;
            });
        },
        setVerticalAlign:function(h){
            if(this.settings.verticalAlign === "middle"){
                return (this.settings.height - h)/2;
            }else if(this.settings.verticalAlign === "top"){
                return 0;
            }else if(this.settings.verticalAlign === "bottom"){
                return this.settings.height - h;
            }else {
                return (this.settings.height - h)/2;
            }
        },
        setSettingValue:function(){
            this.con.css({
                width:this.settings.width,
                height:this.settings.height
            });
            this.conItem.css({
                width:this.settings.width,
                height:this.settings.height
            });
            var w = (this.settings.width - this.settings.postWidth)/2;
            this.prev.css({
                width:w,
                height:this.settings.height,
                zIndex:Math.ceil((this.conItems.length)/2)
            });
            this.prev.find("img").css({
                width:w,
                height:w,
            });
            this.next.css({
                width:w,
                height:this.settings.height,
                zIndex:Math.ceil((this.conItems.length)/2)
            });
            this.next.find("img").css({
                width:w,
                height:w
            });
            this.conItemFirst.css({
                top:0,
                left:w,
                width:this.settings.postWidth,
                height:this.settings.postHeight,
                zIndex:this.conItems.length
            });
        },
        getSetting:function(){
            var con = this.con.attr("data-setting");
            if(con && con!==""){
                return $.parseJSON(con);
            }else {
                return "";
            }
        }
    }

    Carousel.init = function(carousel){
        var _this = this;
        carousel.each(function(){
            new _this($(this));
        });
    }
    window.Carousel = Carousel;
})(jQuery)

</script>

<div class="carousel content-main">
 <ul class="list">
  <?php
  for($i=0; $i<count($list); $i++){
   $thumbs = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $img_w, $img_h, false, true);
  if($thumbs['src']) {
   $img = $thumbs['src'];
  }?> 
  <li><img src="<?=$img?>" alt="<?=$list[$i]['subject']?>" /></li>
  <?}?>
 </ul>
</div>

<script type="text/javascript">
var setting = {
 width:1244,
 height:270,
 postWidth:1144,
 postHeight:270,
 scale:0.8,
 speed:600,
 verticalAlign:"center"
}
$(".carousel").attr("data-setting",'{ "width":1244,"height":700,"postWidth":1144}')
Carousel.init($(".carousel"))
</script>

 

 

스킨불러올때

   <!-- New배너 -->
 <div class="newbanner_wrap">
  <?php echo latest_category("color_overlay_pic1", "banner", "메인스페셜2", 7, 70); ?>
 </div>

   <!-- New배너 -->
 <div class="newbanner_wrap">
  <?php echo latest_category("color_overlay_pic2", "banner", "메인스페셜3", 7, 70); ?>
 </div>

 

이 질문에 댓글 쓰기 :

답변 2

$bo_table이 다르다면 이렇게 수정해 보세요
<div class="carousel content-main <?php echo $bo_table?>">

 

$(".carousel<?php echo '.'.$bo_table;?>").attr("data-setting",'{ "width":1244,"height":700,"postWidth":1144}')
Carousel.init($(".carousel<?php echo '.'.$bo_table;?>"))

latest_category 함수에서 인수로 롤링하려는 "carousel" 이란 문자를 받을 수 있게 해서 중복으로 자바스트립트 호출을 방지해야 할 것 같네요 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT