This image has an CLASS of colorbox1
Download the colorbox files and add them to your resources. I would grab the jquery.min.js,colorbox.css and the jquery.colorbox.js. Place them in a directory named colorbox. You'll also need the images directory that colorbox uses and add that and everything in it, to the colorbox directory as well.
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="colorbox/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
var jQ = $.noConflict(true);
jQ(document).ready(function(){
jQ(".colorbox1").colorbox({rel:'slideshow1', slideshow:true,maxWidth:'95%', maxHeight:'95%'});
// Make ColorBox responsive
jQ.colorbox.settings.maxWidth = '95%';
jQ.colorbox.settings.maxHeight = '95%';
// ColorBox resize function
var resizeTimer;
function resizeColorBox()
{
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQ('#cboxOverlay').is(':visible')) {
jQ.colorbox.load(true);
}
}, 100);
}
// Resize ColorBox when resizing window or changing mobile device orientation
jQ(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
});
</script>
Next add images to your page using the linked image tool. Give the images a class of colorbox1 or adjust the script to match your class. Add the larger images that match the thumbnails to your resources. Give the thumbnail images the href to its larger image in your resources.
