슬라이드스킨 중복사용질문드려요
본문
안녕하세요 초보입니다.ㅠㅠ
마음에 드는슬라이더 스킨을사용했는데요
같은스킨은 같은페이지에 두개넣고싶은데 같은슬라이더 두개넣으면 슬라이드가 망가지네요
방법이없나요??
폴더를 복사해서 폴더명을바꿔서 사용해봤는데 안되네여 ㅠㅠ
소스첨부할게요
<?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" 이란 문자를 받을 수 있게 해서 중복으로 자바스트립트 호출을 방지해야 할 것 같네요
제가초보라ㅠㅠㅠ 조금만더알려주시면안될까여..??부탁드릴게여..