Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

N

nncrns

@nncrns
About
Posts
3
Topics
2
Shares
0
Groups
0
Followers
0
Following
0

Posts

Recent Best Controversial

  • Project captions as cursor inside Carousel
    N 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!

    Addons

  • Project captions as cursor inside Carousel
    N nncrns

    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!

    Addons
  • Login

  • Don't have an account? Register

  • Login or register to search.
  • First post
    Last post
0
  • Recent
  • Tags
  • Popular
  • Users
  • Search