Just had an idea and managed to solve it! In case anybody is looking for the same thing, this is the solution: I didn't try anymore to work with the existing captions, but rather use them as data input and display the text in a new div following my cursor. I matched the carousel slides with the captions by attaching a numbered data attribute to both of them – this works because the order of the slide elements and caption elements correspond (doesn't make a difference if the carousel has a random order or not).
jQuery
Before window.laytheme.on
//Caption moves with cursor
jQuery(document).bind('mousemove', function(e){
jQuery(".moving-caption").offset({left: e.pageX, top: e.pageY});
});
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
//Attach numbered data attribute to all slides and captions
jQuery(".lay-carousel-slide").each(function(i) {
jQuery(this).attr("data-project","project" + (i+1));
});
jQuery(".single-caption").each(function(i) {
jQuery(this).attr("data-project","project" + (i+1));
});
//Create element for moving caption
jQuery("body").prepend("<p class='moving-caption _Default'></p>");
//Insert the caption text that matches the hovered element
jQuery(".lay-carousel-slide").hover(function(){
var projectNumber = jQuery(this).data("project");
var currentCaption = jQuery(".single-caption[data-project='"+projectNumber+"']").text();
jQuery(".moving-caption").text(currentCaption);
});
}
The CSS:
.moving-caption {
display: block;
position: absolute;
z-index: 10000;
}
Hope it helps!