Фон мигает белым с помощью iframe Fancybox - PullRequest
Новая
       4

Фон мигает белым с помощью iframe Fancybox

0 голосов
/ 15 декабря 2010

Я работал на веб-сайте портфолио, где миниатюры на домашней странице загружают отдельную страницу, содержащую слайд-шоу jcycle. .Cycle, в Fancybox .Стрелки для слайд-шоу .cycle находятся на прозрачном фоне и выглядят так, как будто они плавают за гранью необычной рамки.Теперь проблема заключается в том, что при использовании сафари или оперы весь iframe мигает белым, прежде чем страница загружается правильно.

Я провел исследование и выяснил, что эта проблема вызвана iframe (http://css -трюками)..com / сниппеты / html / Get-избавиться-от-белых флеш-когда-IFrame-нагрузок /).Однако, поскольку мои iframes загружаются через Fancybox, решение, указанное на css-tricks.com, не применяется.Я также пробовал решение, предложенное блогом Infinite Loop на 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>

1 Ответ

0 голосов
/ 24 апреля 2011

Отредактируйте свойство # fancybox-external background в файле fancybox css, чтобы изменить цвет фона по умолчанию для iframe.

...