묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
크롬에서 갤러리 스크롤 소스가 동작을 하지 않아서 애를 먹고 있습니다.
2015.02.11 12:17
첫번째 소스는 scroll1.html 이라고 iframe 안에서 gallery.htm을 불러들여 갤러리를 스크롤 해주고 있는데요 이게 IE11에서는 동작하지만 크롬/파이어팍스에선 동작하지 않습니다. 이게 왜 동작을 하지 않는지 하루 종일 궁리해 봐도 모르겠네요. 어떤 웹표준 문제인것 같은데 어디가 틀렸는지 모르겠습니다.
해당 소스를 링크해 드립니다. http://www.blrun.net/temp/scroll1.html
scroll1.html
<table width="440" border="0" cellspacing="0" cellpadding="0"> <tr> <td width=246 valign="top"> <table width="246" border="0" cellspacing="0" cellpadding="0" height="154"> <tr> <td colspan="3"><img src="/images/gallery/1.gif" width="246" height="21"></td> </tr> <tr> <td width="22"><img src="/images/gallery/3.gif" width="22" height="111"></td> <td width="193" height="111"><iframe border="0" frameborder="0" marginwidth="0" scrolling="no" src="/temp/gallery.htm" width="193" height="111" marginhieght="0" name="main"></iframe></td> <td width="31"><img src="/images/gallery/4.gif" width="31" height="111"></td> </tr> <tr> <td colspan="3"><img src="/images/gallery/2.gif" width="246" height="22"></td> </tr> </table> </td> </tr> </table>
gallery.htm
<html> <head> <title>www.happyscript.com</title> </head> <body> <script language="JavaScript"> var scrollerwidth=193 //SIZE var scrollerheight=111 //SIZE var scrollerbgcolor='FFFFFF' var pausebetweenimages=2000 var slideimages=new Array() slideimages[0]='<img src="/images/gallery/1.jpg" border="0">' slideimages[1]='<img src="/images/gallery/2.jpg" border="0">' slideimages[2]='<img src="/images/gallery/3.jpg" border="0">' if (slideimages.length>1) i=2 else i=0 function move3(whichdiv){ tdiv=eval(whichdiv) if (tdiv.style.pixelLeft>0&&tdiv.style.pixelLeft<=5){ tdiv.style.pixelLeft=0 setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2)",pausebetweenimages) return } if (tdiv.style.pixelLeft>=tdiv.offsetWidth*-1){ tdiv.style.pixelLeft-=5 setTimeout("move3(tdiv)",100) } else{ tdiv.style.pixelLeft=scrollerwidth tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (tdiv2.style.pixelLeft>0&&tdiv2.style.pixelLeft<=5){ tdiv2.style.pixelLeft=0 setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2)",pausebetweenimages) return } if (tdiv2.style.pixelLeft>=tdiv2.offsetWidth*-1){ tdiv2.style.pixelLeft-=5 setTimeout("move4(tdiv2)",100) } else{ tdiv2.style.pixelLeft=scrollerwidth tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (document.documentElement){ move3(first2) second2.style.left=scrollerwidth } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgcolor=&{scrollerbgcolor}; visibility=hide> <layer id="first" left="1" top="0" width="1" height="200" z-index="1" ></layer> <layer id="second" left="0" top="0" width="1" height="200" z-index="1"></layer> </ilayer> <script language="JavaScript"> if (document.documentElement){ document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1;top:0;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">') document.write(slideimages[1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</span>') } </script> </body> </html>
이 문제는 "자객의 눈물" 블로그에서 제공해 주신 자바스크립트를 이용 소스를 개조해 해결했습니다. 다른 분들도 참고바랍니다.
출처: 자객의 눈물