I stumbled upon a solution for handling multiple colorboxes on the same webpage over at this Stack Overflow post
function applyColorboxTheme() {
var selectedTheme = $(this).attr("data-theme");
$(".colorboxTheme").attr("disabled", "disabled");
$("#" + selectedTheme).removeAttr("disabled");
}
function resetColorboxTheme() {
$(".colorboxTheme").attr("disabled", "disabled");
$(".colorboxTheme.default").removeAttr("disabled");
}
$(document).ready(function(){
$("a.colorbox").colorbox({
onOpen: applyColorboxTheme,
onClosed: resetColorboxTheme,
iframe:true,
innerWidth:940,
innerHeight:375,
loop: true,
slideshow: false,
slideshowAuto: true,
slideshowSpeed: 2500,
slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
});
});
While this code snippet works well, it only allows for styling the colorboxes differently using separate CSS files. However, all colorboxes are still bound to the same behavioral options in the JavaScript. Is there a way to have distinct CSS and JS settings for each colorbox instance?