With the Colorbox function, we can create links to images that expand and appear over the content of the page. This is useful for image thumbnails, and works well as an alternative to taking a user to the image file.
To start, copy/paste the code below into the Javascript of the site (under 'Appearance' -> 'Settings').
WDN.initializePlugin('modal', [function() {
var $ = require('jquery'); {
$('.img-expand').colorbox({rel: 'expand'}); {
}]);
In this example, any anchor (<a>) with class img-expand will display as a larger image in the same page.
Now, wrap your image in an achor to the image and give the image the img-expand class.
<a href="images/why.jpg" class="img-expand">
<img src="images/why.jpg" alt="Ag Communications Building" />
</a>
We can use this anchor class on non-image elements as well. Multiple anchors with the img-expand class will allow users to scroll through the images with navigation to the top left of the image.
<ul>
<li><a href="images/east-campus.jpg" class="img-expand">East Campus</a></li>
<li><a href="images/hero-studio.jpg" class="img-expand">Market Journal Studio</a></li>
</ul>