0
홈 페이지의 미리보기 이미지가 Fancybox 내에있는 .cycle jquery 슬라이드 쇼가 포함 된 별도의 페이지를로드하는 포트폴리오 웹 사이트에서 작업했습니다. .cycle 슬라이드 쇼의 화살표는 투명 상자의 가장자리에서 떠있는 것처럼 보이는 투명한 배경 위에 있습니다. 이제 사파리 또는 오페라를 사용할 때 페이지가 제대로로드되기 전에 전체 iframe이 흰색으로 깜박입니다.Fancybox iframe에서 배경이 흰색으로 깜박임
나는 내 연구를 수행했으며이 문제는 iframe (http://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/)으로 인해 발생한다는 것을 알아 냈습니다.). 그러나 내 iframe이 Fancybox를 통해로드되는 동안 css-tricks.com에 명시된 해결책은 적용되지 않습니다. 나는 또한 css-tricks.com에서 무한 루프 블로그가 제시 한 해결책을 시도해 왔지만 운이 없었습니다.
도움이 될 것입니다. index.html을
<!DOCTYPE HTML>
<head>
<title>Forbes Massie</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#content a").fancybox({
'padding' : 0,
'margin' : 0,
'width' : 1036,
'height' : 628,
'autoScale' : false,
'easingIn' : 'fade',
'easingOut' : 'none',
'opacity' : true,
'type' : 'iframe',
'centerOnScroll' : true,
'overlayOpacity' : '0.8'
});
});
</script>
</head>
slideshow.html의
헤드
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<style type="text/css">
body {
background-color:transparent;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function() {
$('#fade').fadeIn(700);
});
$('.slideshow').cycle({
prev: '#prev1',
next: '#next1',
timeout: 0,
speed: 500,
after: onAfter
});
if ($('.slideshow') && ($('.slideshow').children().length == 1)) {
$('#prev1').hide();
$('#next1').hide();
}
});
function onAfter(curr,next,opts) {
var caption = (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
</script>
<title>slideshow10</title>
</head>
<body>
<div id="fade">
<a href="#" id="prev1"><div class="arrows_prev"></div></a>
<div id="box">
<div class="text">
<span class="slideshow_p">Title</span>
<br/>
<h2>Competition, Tate Modern, London</h2>
<br/>
<span class="slideshow_p">Client</span>
<br/><h2>Carmody Groarke Architects</h2>
</div>
<div class="slideshow">
<img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant_competition_external.jpg" alt="" />
<img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant Competition_Internal.jpg" alt="" />
</div>
<div id="line"> </div>
</div>
<a href="#" id="next1"><div class="arrows_next"></div></a>
</div>
</body>
</html>
나는 www.adamellison.co.uk/ftp/forbes_massie_website/index.html에서이 사이트를 볼 수 있다는 것을 잊어 버렸다. –