Project captions as cursor inside Carousel

[nncrns]

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!

[mariusjopen]

Dear @nncrns

ah, super good!!!

Thank you for sharing!!

Best!

Marius

[edgrbnz]

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

[vraagje]

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!

[Richard]

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!

[vraagje]

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

[Richard]

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

[vraagje]

@Richard-Keith bump. 🏄‍♂️

[Richard]

Dear @vraagje

Im so sorry!!,
Could you post a link to your website with the carousel in question and i will have a better idea concept of implementing it to your page and trying to get it to function :)

let me know and once again deepest apologies for my terrible reply!

Best
Richard

[Gon]

Hey!

I'm trying to figure out how can i use this code to show the number of the image instead of the caption when hovering over it, but since I'm a total programming noob I had not been able to get it yet.

Could you please help me out?

Thanks in advance,

Best
Gonzalo.