이미지 롤링 문제 정보
이미지 롤링 문제
관련링크
http://인기쇼핑몰.한국
71회 연결
본문
http://sir.co.kr/bbs/board.php?bo_table=g4_plugin&wr_id=1398&page=2&sca=&sfl=&stx=&spt=0&page=2&cwin=#c_1527
꼬을님이 올려주신 플러그인 을 메인에 적용시켰습니다.
1. 크롬에서는 잘 움직이는데 ie 에서는 고정으로 보입니다.
ie 에서도 움직이게 하려면 어디를 고쳐야 하나요?
2. ["/main_banner/main1.jpg","http://google.com"]
이렇게 이미지를 나오게는 했는데... 클릭시 링크로 이동은 됩니다. 링크 이동시 새창으로 열수 있도록 좀 도와 주시기 바랍니다.
꼬을님이 올려주신 플러그인 을 메인에 적용시켰습니다.
1. 크롬에서는 잘 움직이는데 ie 에서는 고정으로 보입니다.
ie 에서도 움직이게 하려면 어디를 고쳐야 하나요?
2. ["/main_banner/main1.jpg","http://google.com"]
이렇게 이미지를 나오게는 했는데... 클릭시 링크로 이동은 됩니다. 링크 이동시 새창으로 열수 있도록 좀 도와 주시기 바랍니다.
댓글 전체
<!doctype html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>main banner</title>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
</head>
<body topmargin="20" leftmargin="20">
<style>
.RollingImg{
display:inline-block;
// float:left;
// border: 1px solid #CCC;
width:250px;
height:310px;
}
.RollingImg:hover{
opacity: .5;
}
.RollingSmalling{
margin-left: -180px;
}
#DvRollingImage{
border: 0px solid #000;
width:970px;
height:310px;
overflow:hidden;
white-space:nowrap;
}
</style>
<script>
var eOnMouse = false;
var sItemList = [
["/main_banner/main1.jpg","google.com"]
,["/main_banner/main2.jpg","nate.com"]
,["/main_banner/main3.jpg","nate.com"]
,["/main_banner/main4.jpg","naver.com"]
,["/main_banner/main5.jpg","yahoo.co.kr"]
,["/main_banner/main6.jpg","daum.net"]
,["/main_banner/main7.jpg","google.com"]
,["/main_banner/main8.jpg","nate.com"]
];
var sItemIdx = 0;
$(function() {
// Handler for .ready() called.
var sHTML = "";
for(var i=0 ; i<sItemList.length ; i++ )
{
if(i)
sHTML += "<div class='RollingImg'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
else
sHTML += "<div class='RollingImg RollingSmalling'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
}
$("#DvRollingImage").html(sHTML);
var ti= setTimeout("FnMovingSlider()",50);
$("#DvRollingImage").mouseover(function(){
eOnMouse = true;
}).mouseout(function(){
eOnMouse = false;
var ti= setTimeout("FnMovingSlider()",50);
});
});
function FnMovingSlider()
{
var wid = $(".RollingSmalling").innerWidth();
if(wid > 1)
{
wid = wid-1;
$(".RollingSmalling").css("width", wid );
}else{
$(".RollingSmalling")
.next().addClass("RollingSmalling")
.prev().remove()
wid = $(".RollingSmalling").innerWidth();
var htmlStr = $("#DvRollingImage").html();
$("#DvRollingImage").html(htmlStr + "<div class='RollingImg'><a href='"+sItemList[sItemIdx][1]+"'><img src='"+sItemList[sItemIdx][0]+"' border='0'></a></div>");
sItemIdx++;
if(sItemIdx >= sItemList.length)
sItemIdx=0;
}
if( !eOnMouse )
var ti= setTimeout("FnMovingSlider()",50);
}
</script>
<div id="DvRollingImage"></div>
</body>
</html>
손좀 봐주세요. ^^;
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>main banner</title>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
</head>
<body topmargin="20" leftmargin="20">
<style>
.RollingImg{
display:inline-block;
// float:left;
// border: 1px solid #CCC;
width:250px;
height:310px;
}
.RollingImg:hover{
opacity: .5;
}
.RollingSmalling{
margin-left: -180px;
}
#DvRollingImage{
border: 0px solid #000;
width:970px;
height:310px;
overflow:hidden;
white-space:nowrap;
}
</style>
<script>
var eOnMouse = false;
var sItemList = [
["/main_banner/main1.jpg","google.com"]
,["/main_banner/main2.jpg","nate.com"]
,["/main_banner/main3.jpg","nate.com"]
,["/main_banner/main4.jpg","naver.com"]
,["/main_banner/main5.jpg","yahoo.co.kr"]
,["/main_banner/main6.jpg","daum.net"]
,["/main_banner/main7.jpg","google.com"]
,["/main_banner/main8.jpg","nate.com"]
];
var sItemIdx = 0;
$(function() {
// Handler for .ready() called.
var sHTML = "";
for(var i=0 ; i<sItemList.length ; i++ )
{
if(i)
sHTML += "<div class='RollingImg'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
else
sHTML += "<div class='RollingImg RollingSmalling'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
}
$("#DvRollingImage").html(sHTML);
var ti= setTimeout("FnMovingSlider()",50);
$("#DvRollingImage").mouseover(function(){
eOnMouse = true;
}).mouseout(function(){
eOnMouse = false;
var ti= setTimeout("FnMovingSlider()",50);
});
});
function FnMovingSlider()
{
var wid = $(".RollingSmalling").innerWidth();
if(wid > 1)
{
wid = wid-1;
$(".RollingSmalling").css("width", wid );
}else{
$(".RollingSmalling")
.next().addClass("RollingSmalling")
.prev().remove()
wid = $(".RollingSmalling").innerWidth();
var htmlStr = $("#DvRollingImage").html();
$("#DvRollingImage").html(htmlStr + "<div class='RollingImg'><a href='"+sItemList[sItemIdx][1]+"'><img src='"+sItemList[sItemIdx][0]+"' border='0'></a></div>");
sItemIdx++;
if(sItemIdx >= sItemList.length)
sItemIdx=0;
}
if( !eOnMouse )
var ti= setTimeout("FnMovingSlider()",50);
}
</script>
<div id="DvRollingImage"></div>
</body>
</html>
손좀 봐주세요. ^^;
한두군데 고쳐서 IE에서 사용할 수 있는게 아닙니다
이미지 스크롤은 자료실에 수두룩할텐데 다른 걸로 해보세요
링크 새창이야 _blank만 추가하면 될테죠
<a href='"+sItemList[i][1]+"' target=_blank>
이미지 스크롤은 자료실에 수두룩할텐데 다른 걸로 해보세요
링크 새창이야 _blank만 추가하면 될테죠
<a href='"+sItemList[i][1]+"' target=_blank>
균이님 댓글 감사합니다.
그런데 꼬을님 올려주신 플러그인은 테스트 페이지가 익스에서도 잘 움직이거든요.
그래서 저도 잘 움직일거라 믿었는데 그게 아니네요. ㅎㅎ 그래도 누군가 댓글 달아주셔서 감사하게 생각하고 포기하도록 하겠습니다. 감사합니다.
그런데 꼬을님 올려주신 플러그인은 테스트 페이지가 익스에서도 잘 움직이거든요.
그래서 저도 잘 움직일거라 믿었는데 그게 아니네요. ㅎㅎ 그래도 누군가 댓글 달아주셔서 감사하게 생각하고 포기하도록 하겠습니다. 감사합니다.
소스를 처음부터 끝까지 복사하지말고 이렇게 해보세요
<html> ~ </html>까지 몽땅 복사하지말고 <style>부터 </body> 바로 윗줄 까지 붙여넣기
hesd.sub.php 에서 doctype부분을 아래 코드로 변경
<!doctype html><html>
수정
.RollingImg:hover{
opacity: .5; filter:alpha(opacity=50);
}
변경
var sItemIdx = 0;
var ti;
$(function() {
// Handler for .ready() called.
var sHTML = "";
for(var i=0 ; i<sItemList.length ; i++ )
{
if(i)
sHTML += "<div class='RollingImg'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
else
sHTML += "<div class='RollingImg RollingSmalling'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
}
$("#DvRollingImage").html(sHTML);
ti= setTimeout("FnMovingSlider()",50);
$("#DvRollingImage").mouseover(function(){
eOnMouse = true;
clearTimeout(ti);
}).mouseout(function(){
eOnMouse = false;
ti= setTimeout("FnMovingSlider()",50);
});
});
function FnMovingSlider()
{
var wid = $(".RollingSmalling").innerWidth();
if(wid > 2)
{
wid = wid-1;
$(".RollingSmalling").css("width", wid );
}else{
$(".RollingSmalling").next().addClass("RollingSmalling").prev().remove()
wid = $(".RollingSmalling").innerWidth();
var htmlStr = $("#DvRollingImage").html();
$("#DvRollingImage").html(htmlStr + "<div class='RollingImg'><a href='"+sItemList[sItemIdx][1]+"'><img src='"+sItemList[sItemIdx][0]+"' border='0'></a></div>");
sItemIdx++;
if(sItemIdx >= sItemList.length) sItemIdx=0;
}
if( !eOnMouse )
ti= setTimeout("FnMovingSlider()",10);
}
<html> ~ </html>까지 몽땅 복사하지말고 <style>부터 </body> 바로 윗줄 까지 붙여넣기
hesd.sub.php 에서 doctype부분을 아래 코드로 변경
<!doctype html><html>
수정
.RollingImg:hover{
opacity: .5; filter:alpha(opacity=50);
}
변경
var sItemIdx = 0;
var ti;
$(function() {
// Handler for .ready() called.
var sHTML = "";
for(var i=0 ; i<sItemList.length ; i++ )
{
if(i)
sHTML += "<div class='RollingImg'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
else
sHTML += "<div class='RollingImg RollingSmalling'><a href='"+sItemList[i][1]+"'><img src='"+sItemList[i][0]+"' border='0'></a></div>";
}
$("#DvRollingImage").html(sHTML);
ti= setTimeout("FnMovingSlider()",50);
$("#DvRollingImage").mouseover(function(){
eOnMouse = true;
clearTimeout(ti);
}).mouseout(function(){
eOnMouse = false;
ti= setTimeout("FnMovingSlider()",50);
});
});
function FnMovingSlider()
{
var wid = $(".RollingSmalling").innerWidth();
if(wid > 2)
{
wid = wid-1;
$(".RollingSmalling").css("width", wid );
}else{
$(".RollingSmalling").next().addClass("RollingSmalling").prev().remove()
wid = $(".RollingSmalling").innerWidth();
var htmlStr = $("#DvRollingImage").html();
$("#DvRollingImage").html(htmlStr + "<div class='RollingImg'><a href='"+sItemList[sItemIdx][1]+"'><img src='"+sItemList[sItemIdx][0]+"' border='0'></a></div>");
sItemIdx++;
if(sItemIdx >= sItemList.length) sItemIdx=0;
}
if( !eOnMouse )
ti= setTimeout("FnMovingSlider()",10);
}
균이님 감사합니다.
제가 이쪽으로 까막눈이다보니 잘 안되네요.
이리저리 만지다가 약간 움직이기는 했습니다.
꼬을님이 올려주신 파일 원본은 j_rolling.htm 인데
그걸 j_rolling.php 로 저장해서
<? include_once("$g4[path]/include/j_rolling.php"); ?>
이렇게 불러냈었거든요.
그러다가 혹시나 해서
<? include_once("$g4[path]/include/j_rolling.htm"); ?>
이렇게 파일명을 htm 으로 바꿨더니 익스에서도 조금 움직(이다 말아버립니다.) 합니다.
아무래도 .... 뭐가 뭔지 모르겠습니다. ㅎㅎ ;;;;
아무튼 이렇게 신경써 주시고 댓글까지 달아주셔서 무척 감사하게 생각합니다.
감사합니다. ^^
제가 이쪽으로 까막눈이다보니 잘 안되네요.
이리저리 만지다가 약간 움직이기는 했습니다.
꼬을님이 올려주신 파일 원본은 j_rolling.htm 인데
그걸 j_rolling.php 로 저장해서
<? include_once("$g4[path]/include/j_rolling.php"); ?>
이렇게 불러냈었거든요.
그러다가 혹시나 해서
<? include_once("$g4[path]/include/j_rolling.htm"); ?>
이렇게 파일명을 htm 으로 바꿨더니 익스에서도 조금 움직(이다 말아버립니다.) 합니다.
아무래도 .... 뭐가 뭔지 모르겠습니다. ㅎㅎ ;;;;
아무튼 이렇게 신경써 주시고 댓글까지 달아주셔서 무척 감사하게 생각합니다.
감사합니다. ^^
아.. 그리고 혹시 이게 관련이 있는지 모르겠네요.
처음 그누보드 설치하고 자동등록방지 코드가 보이질 않아서..
호스팅 업체에서 그누보드를 덧씌워주었더니 코드가 보였습니다.
처음 그누보드 설치하고 자동등록방지 코드가 보이질 않아서..
호스팅 업체에서 그누보드를 덧씌워주었더니 코드가 보였습니다.
