I'm using jssor plugin for slideshow of my content. There is a bunch of configuration options, which is great, but I can't find one for dynamically changing height of slide, and not sure if that is possible at all.
I see that one must specify height and width of outer container, and that slides will take its width and height. But can that be changed on the fly?
Hope the $ScaleHeight api help.
instance.$ScaleHeight(); //Get scaled height
instance.$ScaleHeight(height); //Scale the slider to new height and keep aspect ratio.
Related
I just want to make a fullscreen slideshow with Jssor. But it seems to me the container's width and images' width must be fixed but not percentage. Is it possible at all?
You are right, jssor slider doesn't support percentage width.
What you can do is to make a percentage width div container, and then put jssor inside the container. As jssor slider always scales to fit the parent container, it will meet your needs.
I am using ion-slide-box having multiple slides. One slide has too large content but others have less content. Issue is that all the slides are taking the same height as that of the slide with the largest height and that's why creating an extra scrollable area in other slides.
All slides should take height according to the content, please help me to figure out this problem.
Ion-slide-box always takes the height of longest slide. I explicitly defined the height of each slide and that works for me so far.
I want to implement scrollview in Unity3D 5 UI with horizontal images downloaded from web, they have different random aspect ratios, but I want them to be constant height. And width to be according their aspect ratio, like this:
I tried to use Horizontal Layout Group, but images get too little, so it can all fit in group, when I want them to be constant height and stretch parent's width. So, like, parent's widht is primary and it affects children, but I want children to affect total parent's width (expand it when adding new children images).
Any ideas how to achieve this? Thanks.
You need to use ScrollView with horizontal scrolling enabled and vertical scrolling disabled. Setup your hierarchy as in the image below:
On the GameObject named Content attach Horizontal Layout Group and Content Size Fitter with the following settings:
Then on all your images attach a Layout Element component and during runtime calculate the width using the aspect ratio of the image and height to the Content gameobject and assign this width to Preferred Width property of Layout Element Component: In the following image 300 is the calculated width for the image:
As a result any images you add as child to the Content gameobject will increase their parent's width and also you will be able to scroll horizontally to view all the image.
p.s. I wrote this answer in a hurry. Hopefully it will make sense to you if not let me know and I will improve my answer.
I am using jssor slider .I have a requirement, I used images gallery with thumbnails . When clicked on external button thumbnails should hide and image should align centre in slider and arrows should align left and right to slider.
If you know how to set slider height and width according to window size please help me.
Your slider is made of 'outer container', 'slides' container and 'thumbnail navigator' container. You can adjust layout dynamically.
Refefence: http://www.jssor.com/development/tip-arrange-layout-adjust-size.html
You can scale the slider while window resizes, please note that jssor slider always keeps aspect ratio.
Reference: http://www.jssor.com/development/tip-make-responsive-slider.html
My slides are different sizes, and orientations (some panoramas). I mean all are pics from a photo roll. Nearly all pics are bigger than the viewport in one way or another. I want them to be centered, have a correct aspect ratio, still have touch controls for iPhone, as well as the < > widgets (which go invisible by the way if the image is narrower than the width of the page) for desktop.
I can get full width, by specifying max-width in CSS. Full height is trickier. The "Full Width Slider" demo fixes height at 500px, and trial and error only allows me to change that to another integer number rather than a percentage.
So I'm struggling to tweak the right options, and set the right style/css inline in the HTML. Is there a better demo for me than "Full Width Slider" (http://www.jssor.com/demos/full-width-slider.html)
It'd be great to pinch-zoom into images that are larger than the viewport, but that's secondary to getting my "fit" issues sorted :)
Please set slider size to your screen size, and set $FillMode to 1.
To apply css tricks to set slider size, you can place jssor slider in a wrapper, and then scale the slider to available width of the wrapper.
See,
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(parentWidth);
else
$JssorUtils$.$Delay(ScaleSlider, 30);
}
Reference: jssor full height or full screen slider / possible?