On your demo LayerSlider v6 slider you have a layer called Gradient that covers the falling images with a nice semi transparent CSS tint. I would like to duplicate this look but have URL links associated to the falling images. However, I noticed URL links on these images are not clickable/enabled when the Gradient layer is visible or active. When the Gradient layer is hidden/disabled the images can be clicked and the links are followed without any problem. Can you suggest a method that allows the Gradient layer to be visible and the image URL links followed?
I discovered a solution via the Firefox web console that involves inserting a "pointer-events: none;" into the Style class of the Gradient layers ls-wrapper. Please see attached image, but I'm unable to reproduce this fix using Layerslider's Admin area.
Transform Origin, found in the Transitions tab is the only style value I found from the layers ls-wrapper container that can be edited in Admin. Can you open up ls-wrapper to allow for other style changes?
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
I'd recommend to resolve this by rearranging layers or changing the layout a bit, so the linked layer can be on top or in a position where it's not covered. In almost every case it's possible to pull this off, so there is no need for advanced customization.
But if you really want to, you can use custom attributes for this purpose. Please see attached screenshot. Basically, on layers where you DON'T want to click, you need to enter style and pointer-events: none; to the attribute name and value and enable the "On parent" checkbox, in the Link & Attributes tab -> Custom Attributes section.
Alternatively, you could create an empty text or HTML layer, set its sizes, position it where you want and link it. As it's empty, it will be transparent, so you can position it to the top of the layers list. This should achieve the required results too, but it's a bit limited regarding interaction.
Thank you for responding and your suggestions but I'm still having trouble getting this to work.
I aleady attempted using the Custom Attributes fields to add "pointer-events: none;" but this option does NOT add "pointer-events: none;" to the layer specific <div class=ls-wrapper container. Parent or Non-Parent. "pointer-events: none;" NEEDS to be inside <div class=ls-wrapper as a style for it to work correctly.
Can I give you my login details so you can show a way? I'm sure lots of other people are interested in this.
I am only working on your own demo slider to iron out issues, so there is no risk of damaging anything.
I've installed a script that seeks out the layer specific ls-wrapper element containing the Gradient element container and applied pointer-events: none; to that layer .
It would be nice if you could write layer specific Pointer-Events control into LayerSlider in a future version.
Thank you for the feedback. Glad you could solve this.
Regardless, we still believe that what you're looking for can be achieved by simply changing up the layout.
If we understood your original comment correctly, all you need to is put that gradiant layer at the bottom of the layers list. You can do that by grabbing the layer and pulling it to the bottom of the list. The code we provided is only for edge cases. It is not necessary if we're right about what you want to achieve.
The wrapper element you mentioned is a necessary element for the functioning of the slider, so you cannot apply CSS on it. It's not a visualization element, but an important element for functionality.
I think you misunderstood my need. I wanted to have the pseudo visual lighting effect of the Gradient layer over most elements, including the linked images to create a sense of depth on that slide, whilst, also allowing the falling linked images to be clicked and followed.The Gradient effect is lost by moving the Gradient down the layer stack because it would only affect the background.
Your Layerslider code already writes semi-custom CSS properties into the highest layer specific element via the "ls-wrapper in-and-out" Class and "z-index" variable.The Transform Origin property (found in the Transitions Tab) is one example that can be edited in the users Admin area. I am simply asking that you expand on this functionality so custom CSS can also be tested there. Layerslider already allows full custom CSS to be inserted in the higher parent element Classes. E.g. Custom Slide Properties found in the Slides tab under Show More Options. Can we not have Custom Layer Properties please?
If you open up the layers for custom properties you will have less support requests like mine and customers with cooler looking sliders making your product look even more fantastic! :-)
Thank you for the feedback and for the clarification. It seems like you ran into an edge case. We will try to come up with a better workaround for this in the future, but until then you can use the following example code:
In the Event Callbacks tab you need to copy this code to the slideTimelineDidCreate event. After this, apply pointer-none class to any layer that you want to click through in the Link & Attributes -> Common Attributes tab. And all should be good.
On your demo LayerSlider v6 slider you have a layer called Gradient that covers the falling images with a nice semi transparent CSS tint.
I would like to duplicate this look but have URL links associated to the falling images.
However, I noticed URL links on these images are not clickable/enabled when the Gradient layer is visible or active.
When the Gradient layer is hidden/disabled the images can be clicked and the links are followed without any problem.
Can you suggest a method that allows the Gradient layer to be visible and the image URL links followed?
I discovered a solution via the Firefox web console that involves inserting a "pointer-events: none;" into the Style class of the Gradient layers ls-wrapper.
Please see attached image, but I'm unable to reproduce this fix using Layerslider's Admin area.
Transform Origin, found in the Transitions tab is the only style value I found from the layers ls-wrapper container that can be edited in Admin.
Can you open up ls-wrapper to allow for other style changes?
Hello MrSzeles,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
I'd recommend to resolve this by rearranging layers or changing the layout a bit, so the linked layer can be on top or in a position where it's not covered. In almost every case it's possible to pull this off, so there is no need for advanced customization.
But if you really want to, you can use custom attributes for this purpose. Please see attached screenshot.
Basically, on layers where you DON'T want to click, you need to enter style and pointer-events: none; to the attribute name and value and enable the "On parent" checkbox, in the Link & Attributes tab -> Custom Attributes section.
Alternatively, you could create an empty text or HTML layer, set its sizes, position it where you want and link it. As it's empty, it will be transparent, so you can position it to the top of the layers list. This should achieve the required results too, but it's a bit limited regarding interaction.
Hi Attila,
Thank you for responding and your suggestions but I'm still having trouble getting this to work.
I aleady attempted using the Custom Attributes fields to add "pointer-events: none;" but this option does NOT add "pointer-events: none;" to the layer specific <div class=ls-wrapper container. Parent or Non-Parent. "pointer-events: none;" NEEDS to be inside <div class=ls-wrapper as a style for it to work correctly.
Can I give you my login details so you can show a way? I'm sure lots of other people are interested in this.
I am only working on your own demo slider to iron out issues, so there is no risk of damaging anything.
Sure, we can take a look at your setup if you create a temporary WP login for us!
Make sure to set the message to private, so others can't see the login details.
Thank you. My colleagues and I will look into this to see what we can find, and get back to you shortly.
Feel free to look at my solution here: http://szeles.co.uk/?i=2
I've installed a script that seeks out the layer specific ls-wrapper element containing the Gradient element container and applied pointer-events: none; to that layer .
It would be nice if you could write layer specific Pointer-Events control into LayerSlider in a future version.
Best regards
Alex
Thank you for the feedback. Glad you could solve this.
Regardless, we still believe that what you're looking for can be achieved by simply changing up the layout.
If we understood your original comment correctly, all you need to is put that gradiant layer at the bottom of the layers list. You can do that by grabbing the layer and pulling it to the bottom of the list. The code we provided is only for edge cases. It is not necessary if we're right about what you want to achieve.
The wrapper element you mentioned is a necessary element for the functioning of the slider, so you cannot apply CSS on it. It's not a visualization element, but an important element for functionality.
I think you misunderstood my need. I wanted to have the pseudo visual lighting effect of the Gradient layer over most elements, including the linked images to create a sense of depth on that slide, whilst, also allowing the falling linked images to be clicked and followed.The Gradient effect is lost by moving the Gradient down the layer stack because it would only affect the background.
Your Layerslider code already writes semi-custom CSS properties into the highest layer specific element via the "ls-wrapper in-and-out" Class and "z-index" variable.The Transform Origin property (found in the Transitions Tab) is one example that can be edited in the users Admin area. I am simply asking that you expand on this functionality so custom CSS can also be tested there. Layerslider already allows full custom CSS to be inserted in the higher parent element Classes. E.g. Custom Slide Properties found in the Slides tab under Show More Options. Can we not have Custom Layer Properties please?
If you open up the layers for custom properties you will have less support requests like mine and customers with cooler looking sliders making your product look even more fantastic! :-)
Thank you for the feedback and for the clarification. It seems like you ran into an edge case. We will try to come up with a better workaround for this in the future, but until then you can use the following example code:
function( event, slider ) { jQuery('.pointer-none', slider.target ).each( function() { jQuery( this ) .removeClass('pointer-none') .parents('.ls-wrapper:last') .css('pointer-events', 'none'); }); }In the Event Callbacks tab you need to copy this code to the slideTimelineDidCreate event. After this, apply pointer-none class to any layer that you want to click through in the Link & Attributes -> Common Attributes tab. And all should be good.