메인베너 2개넣는방법?
본문
mainbanner.10.skin 파일을 카피해서 메인에 배너를 하나더 추가해서 넣었습니다.
각각 배너를 하나씩만 넣으면 잘나오는데 메인페이지에 배너가 2개 노출될경우
그중에 하나가 css 연동이 안되고 깨지는거 같아요.
배너노출 잘되고 다른곳은 이상없는거 같은데,
좌, 우 버튼이 css적용이 안되는거 같아요.
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/style.css">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/boxbanner.mini_top.css">', 0);
?>
<?php
$max_width = $max_height = 0;
$bn_first_class = ' class="sbn_top_first"';
for ($i=0; $row=sql_fetch_array($result); $i++)
{
if ($i==0) echo '<section id="sbn_top_idx" class="sbn_top">'.PHP_EOL.'<h2>쇼핑몰 배너</h2>'.PHP_EOL.'<ul>'.PHP_EOL;
//print_r2($row);
// 테두리 있는지
$bn_border = ($row['bn_border']) ? ' class="sbn_top_border"' : '';;
// 새창 띄우기인지
$bn_new_win = ($row['bn_new_win']) ? ' target="_blank"' : '';
$bimg = G5_DATA_PATH.'/banner/'.$row['bn_id'];
if (file_exists($bimg))
{
$banner = '';
$size = getimagesize($bimg);
if($size[2] < 1 || $size[2] > 16)
continue;
if($max_width < $size[0])
$max_width = $size[0];
if($max_height < $size[1])
$max_height = $size[1];
echo '<li'.$bn_first_class.'>'.PHP_EOL;
if ($row['bn_url'][0] == '#')
$banner .= '<a href="'.$row['bn_url'].'">';
else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
$banner .= '<a href="'.G5_SHOP_URL.'/bannerhit.php?bn_id='.$row['bn_id'].'&url='.urlencode($row['bn_url']).'"'.$bn_new_win.'>';
}
echo $banner.'<img src="'.G5_DATA_URL.'/banner/'.$row['bn_id'].'" width="110" height="80"
alt="'.$row['bn_alt'].'"'.$bn_border.'>';
if($banner)
echo '</a>'.PHP_EOL;
echo '</li>'.PHP_EOL;
$bn_first_class = '';
}
}
if ($i>0) echo '</ul>'.PHP_EOL.'</section>'.PHP_EOL;
?>
<script>
(function($) {
var intervals = {};
var methods = {
init: function(option)
{
if(this.length < 1)
return false;
var $bnnr = this.find("li:has(img)");
var count = $bnnr.size();
var $bnnr_a = $bnnr.find("a");
var width = <?php echo $max_width; ?>;
var height = <?php echo $max_height; ?>;
var wrap_width = this.parent().width();
var c_idx = o_idx = 0;
var el_id = this[0].id;
var $this = this;
if(width > wrap_width) {
height = parseInt(height * (wrap_width / width));
}
width = wrap_width;
this.width(wrap_width).height(height)
.find("ul").width(width).height(height)
.find("li").width(width).height(height);
$bnnr.not(".sbn_top_first").css("left", width+"px");
$bnnr.each(function() {
var $img = $(this).find("img");
var img_width = parseInt($img.attr("width"));
if(img_width > width)
img_width = width;
$img.removeAttr("width");
$img.width(img_width);
});
// 기본 설정값
var settings = $.extend({
interval: 5000,
duration: 1500
}, option);
if(count > 1) {
var slide_button = "<div id=\"sbn_top_btn_p\" class=\"sbn_top_btn\"><button type=\"button\" id=\"sbn_top_btn_prev\" class=\"sbn_top_btn_slide\"><span><</span></button></div>\n";
slide_button += "<div id=\"sbn_top_btn_n\" class=\"sbn_top_btn\"><button type=\"button\" id=\"sbn_top_btn_next\" class=\"sbn_top_btn_slide\"><span>></span></button></div>";
this.find("ul").before(slide_button);
var $bnnr_btn = this.find(".sbn_top_btn_slide");
$bnnr_btn.on("focusin", function() {
clear_interval();
});
$bnnr_btn.on("focusout", function() {
set_interval();
});
}
set_interval();
$(".sbn_top_btn_slide").on("click", function() {
if($this.find(":animated").size() > 0)
return false;
clear_interval();
var id = $(this).attr("id");
if(id.search("prev") > -1) {
right_rolling();
} else {
left_rolling();
}
});
$bnnr.hover(
function() {
clear_interval();
},
function() {
set_interval();
}
);
$bnnr_a.on("focusin", function() {
clear_interval();
});
$bnnr_a.on("focusout", function() {
set_interval();
});
function left_rolling() {
$bnnr.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
$bnnr.not(":visible").css({
display: "none",
left: "+"+width+"px"
});
$bnnr.eq(o_idx).animate(
{ left: "-="+width+"px" }, settings.duration,
function() {
$(this).css("display", "none").css("left", width+"px");
}
);
c_idx = (o_idx + 1) % count;
$bnnr.eq(c_idx).css("display", "block").animate(
{ left: "-="+width+"px" }, settings.duration,
function() {
o_idx = c_idx;
}
);
}
function right_rolling() {
$bnnr.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
$bnnr.not(":visible").css({
display: "none",
left: "-"+width+"px"
});
$bnnr.eq(o_idx).animate(
{ left: "+="+width+"px" }, settings.duration,
function() {
$(this).css("display", "none").css("left", "-"+width+"px");
}
);
c_idx = (o_idx + 1) % count;
$bnnr.eq(c_idx).css("display", "block").animate(
{ left: "+="+width+"px" }, settings.duration,
function() {
o_idx = c_idx;
}
);
}
function set_interval() {
if(count > 1) {
clear_interval();
intervals[el_id] = setInterval(left_rolling, settings.interval);
}
}
function clear_interval() {
if(intervals[el_id]) {
clearInterval(intervals[el_id]);
}
}
},
stop: function()
{
var el_id = this[0].id;
if(intervals[el_id])
clearInterval(intervals[el_id]);
}
};
$.fn.bannerRolling = function(option) {
if (methods[option])
return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
}(jQuery));
$(function() {
$("#sbn_top_idx").bannerRolling();
// 기본 설정값을 변경하려면 아래처럼 사용
//$("#sbn_top_idx").leftRolling({ interval: 6000, duration: 2000 });
});
</script>
어느곳을 수정해야 제대로 css가 적용되나요?
답변 3
크롬 브라우저라 열어서 CSS 파일이 어디를 참조 하는지 확인하시면 됩니다.
변경하고자 하는 엘리멘트에서
우클릭->검사->우측 styles탭에서 파일명 위에 마우스를 대고 있으면
참조하고 있는 파일의 경로가 나옵니다.
테마랑, 일반 CSS랑 경로가 다르기 때문에 적용이 안되셨을 수 있습니다.
위 소스에서 sbn 문자를 sbn1 로 바꾸고 css 경로도 sbn1 로 바꿔서 로드해보세요..
메인베너 원본인 mainbanner.10.skin.php 를 카피해서
sbn를 하나는 sbn_main으로 전부 바꾸고 또하나는 sbn_top으로 변경을 했어요.
혹시몰라서 sbn_top을 sbn1_top로 전부 변환해봤는데 아무런 변화는 없네요.
script 부분 때문인거 아닌가 생각되는데요.
전혀 볼줄을 몰라서....
자체수정..
처음댓글을 달아주신분을 채택해드렸습니다.
$.fn.leftRolling = function(option) {
if (methods[option])
return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
}(jQuery));
$(function() {
//$("#sbn_top_idx").bannerRolling();
$("#sbn_top_idx").leftRolling({ interval: 7000, duration: 2000 });
// 기본 설정값을 변경하려면 아래처럼 사용 (스크립트에 있는 bannerRolling를 leftRolling으로 변경해야함)
//$("#sbnz_top_idx").leftRolling({ interval: 6000, duration: 2000 });
});
</script>
소스에 달려있는 주석대로 변경을 해주니 재대로 되는거 같네요.
-- 오류가 나길래 댓글을 지웠는데, 다른부분의 문제길래 댓글을 다시 달았습니다
메인베너를 2개이상 사용하실분은 적용해보세요.
답변을 작성하시기 전에 로그인 해주세요.
