CODEWITHSUNDEEP
jquerycolorboxonload
user1472516
user1472516

Reputation: 3

Colorbox onload works, but overpowers other colorbox calls

I'm trying to get colorbox to load inline HTML (inline_content_1) when the page loads. I am using:

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

However, I also have 4 other inline colorbox calls on the page which do not need to work 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>

The correct inline HTML (inline_content_1) pops up onLoad, but then every colorbox link on the page (inline_content_2,3,4,5) loads 'inline_content_1'.

Please help?

Thanks!

Upvotes: 0

Views: 1932

Answers (2)

Jack
Jack

Reputation: 9538

Right now you are telling all the elements with a class of 'inline' that you want with the selector '#inline_content-1'.

Try this instead:

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

Upvotes: 1

Jasper Mogg
Jasper Mogg

Reputation: 924

Change your selector to use the id of the div you want to come up at onload?

$(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"});
});

Thank you for taking time to think about this! I am currently using:

<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>

Upvotes: 0

Related Questions