Colorbox in course format

The colorbox pop-up is used in different course formats.

The colorbox creates a 'pop-up' and can display content. It will display based on a class and it uses the href element for the content of the pop-up.

Colorbox js code:

$(".iframe").colorbox({
    //Different settings here.
});

Element:

<a href='http://google.com' class='iframe'>Click here for colorbox</a>

So the example above creates the homepage of Google in the pop-up.

The “rel” element creates the relation for grouped elements, with previous and next buttons. So say for instance you want all div with class 'test', you can add rel:'test'. Make sure you don't use an id here, because an id should be unique.

Html:

<div class='test'>div1</div>
<div class='test'>div2</div>
<div class='test'>div3</div>

Javascript:

$(".test").colorbox({
    iframe: true,
    rel: 'test'
});

If you don't want other elements you can give a false value to the rel setting.