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.
SVGs are not responsive by default, and because of their particular features it's not possible to make their scaling automatic either. LayerSlider resizes the layer itself, but your SVG does not follow up on that size change.
Ok, I understand. To bypass that by applying CSS transform scale() to my image. I want to calculate a proportion based on the slider height : $("#slider").height(); But I need to fire the script after the slider is initilized, to get the computed height (not the slider height of the DOM). So I want to fire a function when the slider is ready. I see sliderDidLoad in the API, but I don't know how to use it. There is no real examples in the doc. Do I use it that way?
The offline documentation in the plugin's package contains all information on the API, its events, functions and methods. There are also code examples included. I'd recommend to read that through carefully, you can find every information on how to utilize the API.
The "Using API Events from external code" part is relevant here. We are using jQuery's event handling functions, and here's an example that we started for you:
Hi,
I have a photo with a SVG clippath applied to it, as a layerslider layer.
The problem I have is that the image and clippath don't scale down in responsive, when window is resize.
Did you make experimentations with this ?
This is the link: http://dev.barnston-ouest.ca/test-layerslider-clippath.php
Hello benlaf,
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.
SVGs are not responsive by default, and because of their particular features it's not possible to make their scaling automatic either. LayerSlider resizes the layer itself, but your SVG does not follow up on that size change.
There are practices to make SVGs responsive, for example like this: https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
In case it's too complicated for you, we'd recommend to use normal images instead.
Ok, I understand.
To bypass that by applying CSS transform scale() to my image.
I want to calculate a proportion based on the slider height : $("#slider").height();
But I need to fire the script after the slider is initilized, to get the computed height (not the slider height of the DOM).
So I want to fire a function when the slider is ready.
I see sliderDidLoad in the API, but I don't know how to use it. There is no real examples in the doc.
Do I use it that way?
jQuery(document).ready(function() {
jQuery("#slideshow").layerSlider({
autoStart: true,
skinsPath: '/assets/layerslider/skins/',
sliderDidLoad: function scaleMyImage()
});
});
The offline documentation in the plugin's package contains all information on the API, its events, functions and methods. There are also code examples included. I'd recommend to read that through carefully, you can find every information on how to utilize the API.
You could also take a look at the online documentation for the WP version. The API is the same: https://layerslider.kreaturamedia.com/documentation/#api-examples
The "Using API Events from external code" part is relevant here. We are using jQuery's event handling functions, and here's an example that we started for you:
jQuery('#layerslider').on('sliderDidLoad', function( event, slider) {
var height = jQuery( slider.target ).height();
// ...
});