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?
Related
First of all, sry for my English mistakes, I'm not a native English speaker.
I'm trying to make an UI which is composed of a canvas within different gameObject, and I would like that my canvas scales to the dimension of the screen but keeps its original resolution (16x9 portrait). If it is displayed on a tablet resolution (4x3) then an image is displayed in the space that is not covered by the canvas.
But actually all I've got is a canvas which scales to every resolution, and it changes the aspect of its child (for example a square becomes a rectangle).
Thank you for showing interest in my query!
UI's are heavy beasts. Canvas in Unity have a component attached to themm called Canvas Scaler which is set by default on Constant Pixel Size. You may try to set this property on Scale With Screen Size and then specify the base resolution you want to work with (usually 1920x1080 is a console standart). This is your first step
Then, to avoid strange Image scaling, you may check the property Preserve Aspect, this way the ration of the Sprite into your Image will remain the same indepently of the ratio of the Image
Last, you may play a bit with anchors but this is another story, you should let those at plain center at the beginning and come back to it when you will feel ready
Hope that helped ;)
Your canvas should have a component called Canvas Scaler. Here it should say Constant Pixel Size, change this to Scale With Screen Size and it should lock the Canvas to be the same width / height as the screen. If you want to lock an image to a specific width/height ratio, go to the Image component on the image and check the Preserve Aspect checkbox. This way if you have a 100x100 image, the images width will always be the same as the height. If you have a 200x100 image, the images width will always be twice the height, etc etc etc.
A designer I'm working with wants to have a UIImageView be at a specific y position, with a specific width/height depending on the iphone size. I've done research and I haven't been able to find anything online that allows me to do so with constraints on the story board. I want to avoid having to use code because throughout the rest of the app there are a lot of similar situations. In the past I've made different storyboards for each phone size to accommodate for the specificity our clients request, but I want to avoid doing this because it feels like bad practice. Is this even possible?
This can be completely handled in the Interface Builder. Follow the steps below.
1) Add your UIImageView to the ViewController
2) Set constraints for Width, Height, Vertically Align and Horizontally Align
3) You can adjust the Y position in the Size Inspector of the view.
4) Now switch to Assistant Editor and choose 'Preview' and add different screen sizes to see the auto layout in action.
All of this will set a static image size of 250x200, horizontally centered, and vertically at 1/4 of the screen height.
Little-known capability of constraints are that you can set view positions, or in your case sizes, by way of ratios against other views.
With just your image view selected, the tie-fighter :) constraints button lets you specify absolute positions & sizes: do that to set your desired y-position. But then select both your image view and its enclosing parent view, then the pop up for that same button now enables the equal height/width buttons. Add those constraints and then edit the constraint to change the 1:1 ratio to whatever ratio you need.
Excuse my lack of screenshots, posting from my phone.
I have a 700x1280 image and my design resolution is 700x1280.
I am not providing separate assets for each device that I target rather i will use one Resource which contains all my assets.
The problem:
When I set my design resolution I pass a ResolutionPolicy::FIXED_WIDTH meaning from what I understand it will scale the width with no bordering but the height may be bordered. But all I see is a fixed width but the height of the image goes out of the screen i.e it's not making the height fit in the screen like FIXED_WIDTH is supposed to do?
FIXED_WIDTH only promises to keep the width using the full physical width of the screen but doesn't promise that the height will stay the same i.e it may go out of the screen. For portrait mode FIXED_HEIGHT is the way to go because your height on any device is definitely bigger than that of the width so by using FIXED_HEIGHT the width will never go out of screen, it's a bummer but that's what you have to do!
Well, I am not expecting anyone else but jssor himself again to help me out with the best image slider plugin he made(jssor helped me earlier on stackoverflow). I wanted to make the jssor carousel responsive in terms of reducing the number of images shown inside the slide. As of now, the size of the images inside the carousel gets reduced as we move on to smaller resolution devices. However, at some point, this images look real tiny and are not desirable. This issue can be fixed, if we reduce the number of images shown inside the carousel for smaller screens. Like if we are showing 5 images on a larger screen, how do we show only 2 for considerable lower screens?
Waiting on you jssor!!! Keep on the good work you've done!
You know all elements in the slider will scale while window resizing.
As you set small size of your slider, and it scales to bigger size, the arrows looks bigger then.
2 ways to prevent it from scaling bigger.
first, Make the original size of slider bigger, it will prevent the slider from displaying with large scale ratio.
second, Suppress the arrows from scaling explicitly with data-noscale="1".
<span data-u="arrowleft" class="jssora13l" style="top:0px;left:30px;width:40px;height:50px;" data-noscale="1"></span>
<span data-u="arrowright" class="jssora13r" style="top:0px;right:30px;width:40px;height:50px;" data-noscale="1"></span>
Example: suppress arrows from scaling - jssor slider
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.