Javascript / Fancybox错误? [英] Javascript/Fancybox Error?
问题描述
在我的页面上,我在主图像下方有6个框,使用JS可以获得很好的淡入效果。在此页面上,我还在页面开头处使用Fancybox Load(使用onload)来显示用户需要查看的图像。
On my page I have 6 boxes below a main image that uses JS to have a nice fade in effect. On this page I also have Fancybox Load at the start of the page (using onload) to show an image that the user needs to see.
问题是当用户首次加载页面时,其中一个框几乎不会显示此问题的截图: http://screencast.com/t/ROU61nMSgzy
The issue is when the user first loads the page one of the boxes will barely show here is a screenshot of the issue: http://screencast.com/t/ROU61nMSgzy
问题是如何解决这样这个问题不会发生?注意:一旦页面被缓存,这个问题就不会发生。
The question is how do I resolve this so this issue does not happen? Note: Once the page is cached this issue does not happen.
以下是方框的JS:
var $j = jQuery.noConflict();
$j(document).ready(function(){
Engine.Initialize();
if( !$j('body').hasClass('index') && !$j('body').hasClass('homepage') ) {
}
});
var Engine = {
Initialize: function() {
Engine.Homepage_Animation();
},
Homepage_Animation: function() {
if( !$j.browser.msie ) {
$j('#homepage-main-item img').hide().fadeIn(700, function(){
$j(this).css('display', 'block');
$j('#homepage-boxes .boxes').each(function(i) {
$j(this).delay(100 * i).animate({
opacity: 1
}, 300);
});
});
} else {
$j('#homepage-main-item img').css('display', 'block');
$j('#homepage-boxes .boxes').css('opacity', 1);
}
},
}
这里是Fancybox的JS。
Here is the JS for the Fancybox.
<script type="text/javascript" >
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#start").fancybox({
'padding' : 0
});
});
</script>
Fancybox的HTML
HTML for Fancybox
<div class="hide">
<img src="/Images/skin/spacer1x1.png" onload="$j('#start').trigger('click');" />
<a href="#welcome" id="start"></a>
<img id="welcome" usemap="#Map" alt="PLEASE VIEW PAGE WITH IMAGES ON" src="/Images/start/start.png" />
<map id="Map" name="Map">
<area alt="See Message Examples" href="/artistphotos/" coords="29,431,301,465" shape="rect" />
<area alt="Enter Site" href="javascript:$j.fn.fancybox.close();" coords="436,433,567,464" shape="rect" />
</map>
</div>
感谢您的帮助=>
推荐答案
如果你想首先运行fancybox,请使用fancybox onComplete回调:
If you want fancybox to run first, use the fancybox onComplete callback:
$j(document).ready(function(){
$j('#start').fancybox({
'onComplete': function () {
Engine.Initialize();
}
});
});
否则,在调用自定义初始化函数后放入fancybox代码:
otherwise, put the fancybox code in after calling your custom init function:
$j(document).ready(function(){
Engine.Initialize();
$j("#start").fancybox({
'padding' : 0
});
});
这篇关于Javascript / Fancybox错误?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!