Project captions as cursor inside Carousel

---

Hi guys,

I am fiddling with the carousel add-on to achieve the following: I want the caption of a project to appear while hovering over its thumbnail image inside a carousel. This is the website so you can get an idea: annesophieoberkrome.com/dev

With the code of this (http://laythemeforum.com:4567/topic/1788/show-caption-as-tooltip-on-mouseover/5) article, I was able to have ALL captions follow the cursor.

But there are two problems:

1. The captions are underneath the carousel and even with z-index I can't get them to the front. I don't understand why. Is there something I'm missing?

2. How can I match the caption to the thumbnail image? As far as I can see, there is no identifying ID or data attribute attached to the caption with which to achieve that.

Or is there some better way of doing what I'm trying to do? I'd be super grateful if somebody could help me out! :) Thank you!

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!

Dear @nncrns

ah, super good!!!

Thank you for sharing!!

Best!

Marius

This is really cool stuff!
💯× Thank you! for sharing!

Dear @nncrns

This sounds so cool for the Carousel plugin!
Only problem is that I can't get it to work when implementing the code on my own page. I copied- pasted the exact code to to my "costum CSS & HTML". And made sure my carousel images had captions.

Can it be that the code doesn't work anymore? that I missed something, or that I have to make some slight changes? (also, I have never seen it working live since the /dev link is offline)

Thank you!

Dear @vraagje

Im taking a look into it and will let you know

In the meantime thanks for using Lay Theme and being Awesome :)

All the best
Richard

P.s @edgrbnz Is always awesome!

Dear @Richard-Keith

Have you had time to look into this code:
Thank you!

@nncrns said in Project captions as cursor inside Carousel:

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;
}

Dear @vraagje

I will take a look into soon and get back to you, apologies for the late reply, forgive me,

Let me know if you have any other questions as well and we can come to a solution! :)

Best wishes & a great weekend

Richard

@Richard-Keith bump. 🏄‍♂️