슬라이드 새로고침시 모든 이미지 잠깐 보였다 사라지는 증상.. 해결가능할까요
본문
오픈소스를 사용하던중에, 새로고침을 하면 해당 슬라이드의 모든 이미지가 전부 보여졌다가
사라지는 증상이 있어 이게 제가 뭔가를 잘못만졌나 싶었는데 도저히 모르겠더라구요..
<!-- 롤링 배너 -->
<div id="webwileaf" class="webwidget_slideshow_dot">
<!--@js(/js/webwidget_slideshow_dot.js)-->
<!--@js(/js/webwid.js)-->
<!--@css(/css/webwidget_slideshow_dot.css)-->
<ul>
<li><a href="link1" title="Name"><img src="/img/ha1.jpg" width="100" height="180"/></a></li>
<li><a href="link2" title="Name"><img src="/img/ha2.jpg" width="100" height="180"/></a></li>
<li><a href="link3" title="Name"><img src="/img/ha3.jpg" width="100" height="180"/></a></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
<style>
.webwidget_slideshow_dot{ padding: 0px; margin: 0px; margin-top:5px; width:100px;height:180px; position: relative; font-family: Arial,Sans-Serif; font-size: 13px; float:right;}
.webwidget_slideshow_dot a{ text-decoration: none; display:none;}
.webwidget_slideshow_dot a:hover{ text-decoration: underline;}
.webwidget_slideshow_dot .slides_box{ padding: 0px; margin: 0px; overflow: hidden; position: absolute;}
.webwidget_slideshow_dot .title_thumb_box{ width: 100%; position: absolute; bottom: 0px;}
.webwidget_slideshow_dot .title_thumb_box .title_box{ padding: 5px;}
.webwidget_slideshow_dot .title_thumb_box .thumb_box{ text-align: center; height: 25px;}
.webwidget_slideshow_dot .title_thumb_box .thumb_box span{ margin-right: 5px; margin-left: 5px;}
.webwidget_slideshow_dot .title_thumb_box .thumb_box span img{ cursor: pointer; }
.webwidget_slideshow_dot img{ padding: 0px; margin: 0px; border: none;overflow:hidden;}
.webwidget_slideshow_dot ul{ padding: 0px; margin: 0px; position: absolute; list-style: none;}
.webwidget_slideshow_dot ul li{ padding: 0px; margin: 0px; float: left;}
.webwidget_slideshow_dot ul li a{ display: block; }
</style>
$(function() {
$("#webwileaf").webwidget_slideshow_dot({
slideshow_time_interval: '2000',
slideshow_window_width: '100',
slideshow_window_height: '180',
slideshow_title_color: '#ff3366',
directory: 'img/'
});
});
(function(a){
a.fn.webwidget_slideshow_dot=function(p){
var p=p||{};
var m=p&&p.slideshow_time_interval?p.slideshow_time_interval:"2000";
var q=p&&p.slideshow_window_width?p.slideshow_window_width:"100";
var r=p&&p.slideshow_window_height?p.slideshow_window_height:"400";
var sf=p&&p.soldeshow_foreColor?p.soldeshow_foreColor:"transparent";
var stc=p&&p.slideshow_title_color?p.slideshow_title_color:"#17CCCC";
var d=p&&p.directory?p.directory:"img/";
q += "px";
r += "px";
var v;
var w=-1;
var x=a(this);
var y=x.find("ul:first").children("li").length;
if(x.find("ul").length==0||x.find("li").length==0){
x.append("Require content");
return null
}
init();
play();
function init(){
x.find("ul:first").wrap('<div class="slides_box"></div>');
x.css("width",q).css("height",r);
x.find(".slides_box").css("width",q).css("height",r);
x.find("ul:first").width(parseInt(q)*y);
x.find("ul:first").children("li").css("width",q).css("height",r);
x.find("ul:first").children("li").children("a").children("img").css("width",q).css("height",r);
x.find(".slides_box").after('<div class="title_thumb_box"></div>');
x.find(".title_thumb_box").append('<div class="title_box"></div>');
x.find(".title_thumb_box").append('<div class="thumb_box"></div>');
x.find(".thumb_box").append('<span><img src="'+d+'/carousel_back_normal.png" alt="previous" class="thumb_p"/></span>');
x.find(".title_thumb_box").css("background-color",sf);
for (i = 0; i <= y-1; i++)
{
x.find(".thumb_box").append('<span><img src="'+d+'carousel_circle_normal.png" class="thumb_num" alt="'+i+'" /></span>');
}
}
<정상 슬라이드 이미지>
<새로고침하거나 사이트 재접속하면 1~2초간 나왔다 사라지는 뒷 이미지>
답변 2
테스트를 하면서 진행해야 하는데, 아마도 스타일 문제로 보입니다.
스타일 소스를 배너상단으로 올려서 우선 테스트 해보시면 될 듯 합니다.
또는 <a href=~~~~ style="display:none;"> 이런식으로 인라인으로 스타일 추가해서 테스트 바랍니다.
혹시 해결하셨나요?
답변을 작성하시기 전에 로그인 해주세요.