I really cant seem to figure out what is the id of the content?

Enable Colorbox inline
This enables custom links that can open inline content in a Colorbox. Add the class "colorbox-inline" to the link and build the url like this "?width=500&height=500&inline=true#id-of-content". Other modules may activate this for easy Colorbox integration.

Load inline content in a Colorbox:
----------------------------------
Check the "Enable Colorbox inline" option in Colorbox settings.

This enables custom links that can open inline content in a Colorbox. Inline in this context means some part/tag of the current page, e.g. a div. Replace "id-of-content" with the id of the tag you want to open.

Add the class "colorbox-inline" to the link and build the url like this "?width=500&height=500&inline=true#id-of-content".

Other modules may activate this for easy Colorbox integration.

Comments

frjo’s picture

frjo CreditAttribution: frjo commented

Colorbox inline is for opening some content on the same page (hens inline) in a Colorbox.

Let say you placed the folloring div somewhere on your page:

<div style="display: none;"><div id="test">Testing inline</div></div>

The "display: none" is so the content is hidden from view on the page.

You then place a link like this on the same page:

<a class="colorbox-inline"  href="?width=600&height=400&inline=true#test">Test inline Colorbox</a>

Clicking it will open the div with id "test" in a Colorbox.

frjo’s picture

frjo CreditAttribution: frjo commented
Status: Active » Closed (fixed)
benjifisher’s picture

benjifisher
he/him or they/them
Primary language English
Location Boston area
CreditAttribution: benjifisher commented

This example was very helpful. It would be more helpful if it were added to the documentation (perhaps the README file). Before I found this, I tried<div style="display: none;" id="test">Testing inline</div> and that did not work.

mesh’s picture

mesh CreditAttribution: mesh commented

display:none is going to hide the container with the id itself. you can do - 

	<div style="display:none;">
		<div id="container">
			<!-- your content -->
		</div>
	</div>
	<a href="?width=500&inline=true#container">Click here..</a>
new123456789’s picture

new123456789 CreditAttribution: new123456789 commented

Sorry, I am still struggling with this module.

So, this code goes to the Body field of the node, is that correct???

But where does the link below need to go:
Click here..

I am using Views to display a list of images, but how on eart do I link them to the body of their own nodes?