Ultimo is an excellent Magento theme that we’ve used for a number of builds. For one build, we wanted to add a gallery with lightbox functionality to a CMS page using Colorbox. The implementation is pretty simple, but took us a little digging, so we’ve compiled the exact steps here.

1) Ultimo doesn’t load the javascript and css files for colorbox on CMS pages, so the first step is to add the necessary code to the CMS page. Go to CMS > Pages and select the desired page. Then select Design from the left menu and in the XML Layout Update field, enter the below code and save.

<reference name="head">
	<action method="addItem">
		<type>js</type>
		<script>infortis/jquery/plugins/jquery.colorbox.min.js</script>
	</action>
	<action method="addItem">
		<type>skin_css</type>
		<css>css/infortis/_shared/colorbox.css</css>
	</action>
</reference>

2) Then go to Content and add the images you want to display as shown below. If you want users to be able to cycle through the images make sure to include group-1 in the class for each a element.

<a class="gallery group-1" href="image1.jpg">image1.jpg</a>
<a class="gallery group-1" href="image2.jpg">image2.jpg</a>
<a class="gallery group-1" href="image3.jpg">image3.jpg</a>

3) Next, add the below javascript directly after the images.

<script>
  jQuery("a.gallery").colorbox({ rel:"group1" });
</script>

4) Save and check the CMS page on the frontend to verify that everything is working correctly. Refer to the Colorbox documentation if you’d like to make additional customizations.