Question

我正在尝试让colorbox在页面加载时加载内联HTML（inline_content_1）。我正在使用：

$(document).ready(function(){
   $(".inline").colorbox({inline:true, width:"440px"});
   $(".inline").colorbox({href:"#inline_content_1", open:true, width:"330px", height:"640px"});
});

但是，我在页面上还有其他4个内联颜色框调用，不需要在onload上工作：

<div id='inline_content-2'>...html...</div>
<div id='inline_content-3'>...html...</div>
<div id='inline_content-4'>...html...</div>
<div id='inline_content-5'>...html...</div>

正确的内联HTML（inline_content_1）会弹出onLoad，但页面上的每个颜色框链接（inline_content_2,3,4,5）都会加载'inline_content_1'。

请帮帮忙？

谢谢！

Answer 1

现在，您通过选择器“#inline_content-1”告诉所有具有“内联”类的元素。

请改为尝试：

$(document).ready(function(){
   $(".inline").colorbox({inline:true, width:"440px"});
   $.colorbox({inline:true, href:"#inline_content_1", open:true, width:"330px", height:"640px"});
});

Answer 2

更改您的选择器以使用您想要在onload上找到的div的ID？

$(document).ready(function(){
    $(".inline #inline_content-1").colorbox({inline:true, width:"440px"});
    $(".inline #inline_content-1").colorbox({href:"#inline_content_1", open:true, width:"330px", height:"640px"});
});

感谢您花时间考虑这个问题！我目前正在使用：

<link rel="stylesheet" href="/colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        $(".inline").colorbox({inline:true, width:"440px"});
        $(".inline #inline_content_onload").colorbox({href:"#inline_content_onload", open:true, width:"330px", height:"640px"});
    });
</script>
<div style='display:none'>
    <div id='inline_content-1'> HTML here</div>
</div>
<div style='display:none'>
    <div id='inline_content-2'> HTML here</div>
</div>
<div style='display:none'>
    <div id='inline_content-3'> HTML here</div>
</div>
<div style='display:none'>
    <div id='inline_content-4'> HTML here</div>
</div>

<div style='display:none'>
    <div id='inline_content_onload'> HTML onload here</div>
</div>

Colorbox onload可以工作，但会超过其他颜色框调用

2 个答案: