Docs - Colorbox

Simple image example

Add pi-colorbox class to your links to enable colorbox

<a href="img_external/gallery/sensuality-at-the-sea.jpg" class="pi-colorbox">

Groups

For using groups add data-colorbox-group="group1" attribute with group name to each link.

<a href="img_external/gallery/sensuality-at-the-sea.jpg" class="pi-colorbox" data-colorbox-group="group1">

Group 1

Group 2

Short description

You can add short description inside colorbox popup. Just add "title" to your link.

One image but more images inside colorbox

You can have 1 image visible and a lot of images inside colorbox. Just create more empty links with right "href" and "data-colorbox-group" atributes.

<a href="img_external/gallery/selecting-pencil1.jpg" class="pi-colorbox" data-colorbox-group="group3"></a>
<a href="img_external/gallery/selecting-pencil2.jpg" class="pi-colorbox" data-colorbox-group="group3"></a>
<a href="img_external/gallery/selecting-pencil3.jpg" class="pi-colorbox" data-colorbox-group="group3"></a>
<a href="img_external/gallery/selecting-pencil4.jpg" class="pi-colorbox" data-colorbox-group="group3"></a>

Videos

Youtube/Vimeo video inside colorbox popup. Add data-video-size="500,315" atribute with comma separated width/height

<a href="//player.vimeo.com/video/103092939?byline=0&amp;portrait=0&amp;badge=0" class="pi-colorbox" data-video-size="560,315">