Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Project captions as cursor inside Carousel

    Addons
    6
    11
    442
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • N
      nncrns last edited by

      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!

      1 Reply Last reply Reply Quote 1
      • N
        nncrns last edited by

        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!

        1 Reply Last reply Reply Quote 1
        • mariusjopen
          mariusjopen Global Moderator last edited by

          Dear @nncrns

          ah, super good!!!

          Thank you for sharing!!

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply Reply Quote 1
          • edgrbnz
            edgrbnz last edited by

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

            ✦ ✦ ✦

            1 Reply Last reply Reply Quote 0
            • V
              vraagje last edited by

              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!

              1 Reply Last reply Reply Quote 0
              • Richard
                Richard Global Moderator last edited by 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!

                V 1 Reply Last reply Reply Quote 1
                • V
                  vraagje @Richard last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • Richard
                    Richard Global Moderator last edited by

                    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

                    V 1 Reply Last reply Reply Quote 0
                    • V
                      vraagje @Richard last edited by

                      @Richard-Keith bump. 🏄‍♂️

                      1 Reply Last reply Reply Quote 0
                      • Richard
                        Richard Global Moderator last edited by

                        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

                        1 Reply Last reply Reply Quote 0
                        • G
                          Gon last edited by

                          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.

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post

                          Before you post

                          Use the Search Feature. Maybe there is already a solution to your issue.

                          1. Update Lay Theme and all Lay Theme Addons
                          2. Disable all Plugins
                          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                          4. Now see if your problem solved itself
                          5. Go here, see if your problem is listed here:
                          Troubleshooting

                          When you post:
                          1. Post a link to where the problem is
                          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                          Thanks!

                          Online Users

                          M
                          Y
                          A
                          K
                          M
                          P

                          Recent Topics

                          • K

                            Unable to update lay theme / to login wp admin

                          • S

                            Theme crashed - because of Polylang?

                          • A

                            New button feature not available

                          • A

                            carousel addon not working after update

                          laytheme.com