====== Colorbox in course format ======

===== Using the colorbox pop-up =====
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:
<code>
$(".iframe").colorbox({
    //Different settings here.
});
</code>

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

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:
<code>
<div class='test'>div1</div>
<div class='test'>div2</div>
<div class='test'>div3</div>
</code>

Javascript:
<code>
$(".test").colorbox({
    iframe: true,
    rel: 'test'
});
</code>

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