Question

我无法将colorbox.js集成到我已经获得工作的网站中，因为我无法显示任何内容（尽管我希望它能够显示视频）。任何人都可以看看我的代码并告诉我我做了什么？

HTML

<div id="bl_hp_quickLinkBoxLeftThree">
    <a class='inline' href="#inline_content">Open Sesame!</a>
</div><!-- #bl_hp_quickLinkBoxLeftThree -->
<div id="bl_hp_quickLinkBoxRightThree">
    <p>This is some content</p>
</div><!-- #bl_hp_quickLinkBoxRightThree -->
<img src="./images/quicklinks/verso.png" />

<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff;'>
        <video controls="controls" poster="/videos/Company_video_EN_VERSION.jpg" style="width:100%" title="1280">
            <source src="/videos/Company_video_EN_VERSION.m4v" type="video/mp4" /><source src="/videos/Company_video_EN_VERSION.webm" type="video/webm" />
            <source src="/videos/Company_video_EN_VERSION.ogv" type="video/ogg" /><source src="/videos/Company_video_EN_VERSION.mp4" />
            <object type="application/x-shockwave-flash" data="/videos/flashfox.swf" width="1280" height="720" style="position:relative;">
                <param name="movie" value="/videos/flashfox.swf" /><param name="allowFullScreen" value="true" />
                <param name="flashVars" value="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=false&amp;poster=/videos/Company_video_EN_VERSION.jpg&amp;src=Company_video_EN_VERSION.m4v" />
                <embed src="/videos/flashfox.swf" width="1280" height="720" style="position:relative;"  flashVars="controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=false&amp;poster=/videos/Company_video_EN_VERSION.jpg&amp;src=Company_video_EN_VERSION.m4v"   allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
                <img alt="Company video EN VERSION" src="/videos/Company_video_EN_VERSION.jpg" style="position:absolute;left:0;" width="100%" title="Video playback is not supported by your browser" />
            </object>
        </video>
    </div>
</div>

Javascript （显然我已经加载了JQuery脚本，后面跟着colorbox脚本）

$(".inline").colorbox({inline:true, width:"50%"});

Answer 1

愚蠢的错误是因为它是一个迟到的编码会话，我只需要将它包装在onload中，就像这样：

$(document).ready(function(){
    $(".inline").colorbox({inline:true, width:"50%"});
});

无法加载colorbox js

1 个答案: