영카트 shop 폴더의 maintype30.inc.php 스킨 파일의 코드를 jQuery를 이용한 코드로 수정했습니다.
기존 코드를 사용했을 경우 상품이미지가 많으면 IE에서 스크롤링 속도가 현저하게 느려지는 현상을 해결합니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// marquee 태그를 사용하지 않고 자바스크립트로 이미지가 여러개씩 롤링되도록 함
// 출력되는 테이블의 높이
$marquee[height] = 170;
// include 될때 마다 다른 아이디를 부여 (여러곳에서 이 페이지를 include 할 경우를 대비함)
$uni = uniqid("");
?>
<style type="text/css">
#mtype<?php echo $type; ?>_wrap { position: relative; top: 0; left: 0; width: 100%; height: <?php echo $marquee[height]; ?>px; overflow: hidden; }
#mtype<?php echo $type; ?>_wrap .list { position: absolute; top: <?php echo $marquee[height]; ?>px; left: 0; width: 100%; height: <?php echo $marquee[height]; ?>px; }
</style>
<div id="mtype<?php echo $type; ?>_wrap">
<div class="list">
<?php
$width = (int)(100 / $list_mod);
for($i=0; $row=sql_fetch_array($result); $i++) {
$href = "<a href='$g4[shop_path]/item.php?it_id=$row[it_id]' class=item>";
if($i % $list_mod == 0) {
if($i > 0) {
echo "</tr>\n";
echo "</table>\n";
echo "</div>\n";
echo "<div class=\"list\">\n";
}
echo "<table width='100%' height='$marquee[height]px' cellpadding=1 cellspacing=0 border=0>\n";
echo "<tr>\n";
}
echo "<td width='$width%' valign=top>\n";
echo "<table width='100%' cellpadding=1 cellspacing=0 border=0>\n";
echo "<tr><td align=center>$href".get_it_image($row[it_id]."_s", $img_width, $img_height)."</a></td></tr>\n";
echo "<tr><td align=center>$href".addslashes($row[it_name])."</a></td></tr>\n";
//echo "<tr><td align=center><span class=amount>".display_amount(get_amount($row), $row[it_tel_inq])."</span></td></tr>\n";
echo "</table>\n";
echo "</td>\n";
?>
<?php
}
if (($cnt = $i%$list_mod) != 0)
for ($m=$cnt; $m<$list_mod; $m++)
echo "<td> </td>\n";
if($i > 0) {
echo "</tr>\n";
echo "</table>\n";
} else {
echo "<p>상품이 없습니다.</p>";
}
?>
</div>
</div>
<script type="text/javascript">
(function($) {
var intervals = {};
var methods = {
init: function(option)
{
var $list = this.find(".list");
var height = 0;
var count = $list.size();
var c_idx = o_idx = 0;
var fx = null;
var el_id = this[0].id;
$list.each(function() {
var h = $(this).outerHeight(true);
if(h > height)
height = h;
});
// 기본 설정값
var settings = $.extend({
interval: 4000,
duration: 1000
}, option);
$list.eq(0).css("top", "0px");
if(count < 2)
return;
set_interval();
$list.hover(
function() {
clear_interval();
},
function() {
set_interval();
}
);
function top_rolling() {
$list.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
$list.eq(o_idx).animate(
{ top: "-="+height+"px" }, settings.duration,
function() {
$(this).css("display", "none").css("top", height+"px");
}
);
c_idx = (o_idx + 1) % count;
$list.eq(c_idx).css("display", "block").animate(
{ top: "-="+height+"px" }, settings.duration,
function() {
o_idx = c_idx;
}
);
}
function set_interval() {
if(count > 1) {
clear_interval();
intervals[el_id] = setInterval(top_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.topRolling = 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() {
$("#mtype<?php echo $type; ?>_wrap").topRolling();
});
</script>
댓글 3개
게시글 목록
| 번호 | 제목 |
|---|---|
| 1790 | |
| 1788 | |
| 1786 | |
| 1782 | |
| 1780 | |
| 1778 | |
| 1767 | |
| 1762 | |
| 1754 | |
| 1748 | |
| 1739 | |
| 1736 | |
| 1735 | |
| 1731 | |
| 1717 | |
| 1712 | |
| 1704 | |
| 1700 | |
| 1696 | |
| 1682 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기