CODEWITHSUNDEEP
javascriptjqueryhtmlcsscolorbox
Blake Bowman
Blake Bowman

Reputation: 311

Colorbox.js inline content won't show

I am trying to use the inline content function with colorbox.js but it just doesn't seem to show up when using the inline function, although all other functions are working properly. I am using the unedited JS and CSS files. Here's is the code:

JS

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

HTML

<a class="inline" href="#inline_content"><li><h1>Content</h1></li></a>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff; color:#000;'>   
<p>Hello! This is content </p> 
</div>
</div>

Upvotes: 2

Views: 709

Answers (2)

Ale S
Ale S

Reputation: 1

You can use the href.

For example:

<a href="#myForm" class="inline">

Then, you could have this:

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

Upvotes: 0

Ivan
Ivan

Reputation: 10392

The inline options requires you to also set the href option.

If true, content from the current document can be displayed by passing the href property a jQuery selector, or jQuery object.

// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});
// Using a jQuery object: var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});

See the documentation.

Upvotes: 2

Related Questions