When I use the following code recommended on the jssor site (below) to make the slider reactive it ends up breaking the image ratios if I set this to $FillMode:1 (contain (keep aspect ratio and put all inside slide)). I am guessing there is something that is being calculated in the background after the images are loaded but before the responsive code below is triggered which I could potentially call again to avert this issue by recalculating new ratios for the images but I have no idea where to start with this one, any help or pointers much appreciated!
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
The $FillMode and responsive code work separately in different way.
$FillMode indicates the way to fill image in each slide.
responsive code scales the whole slider according to the logic you specified in ScaleSlider function.
Related
I have two pictures of different dimensions meant to be rendered as per the screen size of the phone the app is being run on which I suppose is something that can be achieved using MediaQuery in the following way:
if(MediaQuery.of(context).size.height < initialSize) {
return Image.asset('Image meant for smaller screens')
} else {
return Image.asset('Image meant for bigger screens')
}
What I don't understand is what initialSize value I should be putting in to check and resize accordingly? Hope I have been able to make my question clear!
initialSize differentiate the small image and large image screen based on screen height.
Let say if device's height is less than 200px we want to show X image, else show Y image.
Image getImage() {
if (MediaQuery.of(context).size.height < 200) {
return Image.asset('Image meant for smaller screens');
} else {
return Image.asset('Image meant for bigger screens');
}
}
You need to choose how you like to define small and large screen image, like here 200, initialSize.
While in editor, everything's working fine, but when I build the game to my phone, the background seems to be short on top and bottom side.
This is a screenshot from the phone build.
This is a screenshot from Unity.
I checked all sizes and they were all the same - 800x1280. I think the problem started to happen when I made the cloudy background infinitely move with a quad.
Checked everywhere, can't seem to pin-point the problem.
You should resize the background according to screen size. You can do that through code. If you are using Sprite Renderer, you can follow this link to do so. Here's the main codes needed to resize a sprite according to the above link.
void Awake() {
SpriteRenderer spriteRenderer = GetComponent<SpriteRenderer>();
float cameraHeight = Camera.main.orthographicSize * 2;
Vector2 cameraSize = new Vector2(Camera.main.aspect * cameraHeight, cameraHeight);
Vector2 spriteSize = spriteRenderer.sprite.bounds.size;
Vector2 scale = transform.localScale;
if (cameraSize.x >= cameraSize.y) { // Landscape (or equal)
scale *= cameraSize.x / spriteSize.x;
} else { // Portrait
scale *= cameraSize.y / spriteSize.y;
}
}
Or if you are using a UI Panel under Canvas to draw the background, you can set the anchors on the edge points and set the Canvas's UI Scale Mode to Scale With Screen Size
I have defined two crop variants “default” and “isotope”. The “default” contains some basic aspect rations like 1:1, 3:4, 16:9 and so on. The “isotope” variant only contains one aspect ratio 1:1, which is also defined as default (selectedRatio = 1:1). In my case, this definition is done by PageTS, which looks like this:
TCEFORM.sys_file_reference.crop.config.cropVariants {
default {
title = Default desktop
selectedRatio = NaN
allowedAspectRatios {
NaN {
title = Frei
value = 0.0
}
1:1 {
title = 1:1
value = 1.0
}
3:2 {
title = 3:2
value = 1.5
}
2:3 {
title = 2:3
value = 0.6666666667
}
4:3 {
title = 4:3
value = 1.3333333333
}
3:4 {
title = 3:4
value = 0.75
}
16:9 {
title = 16:9
value = 1.7777777778
}
}
}
isotope {
title = Auswahl für Isotope Plugin
selectedRatio = 1:1
allowedAspectRatios {
1:1 {
title = 1:1
value = 1.0
}
}
}
}
After adding this piece of code, the variants appears in all places, where file references can be defined, like inside e.g. news records (from news extension).
Now, after adding an image to a news record and clicking on the image manipulation button, I can select the new defined “isotope” crop variant and choose the desired 1:1 (square) crop area. So far so good.
My problem is now, that I don’t get the right output, when using this crop variant inside my fluid template using the the standard image viewhelper from TYPO3.
This:
<f:image image="{image}" cropVariant="isotope" maxWidth="400" />
don't generates square images, which I would expect.
If the source image has an aspect ratio of 4:3, I get flat-pressed rectangles, if the source image has an aspect ratio of 3:4, I get sky scrapers.
I also tried every possible combination of min/max/width/height attributes with/without additional "c", with no luck.
Sometime the result looks better for 4:3 source images, sometime for 3:4 images.
But I could no found a solution to get square (cropped) images for all kind of aspect ratios
[EDIT 04.07.2017]
Further experiments show different behaviors with different types of source image formats.
If the images are jpgs, I must set width="400c" and height="400c" to get square images. If the source images are pngs, a simple maxWidth="400" together with the cropVariant="isotope" do the job. Gif-Images seems to follow there own laws, which I have not yet looked through.
[EDIT 08.07.2017]
My current experience, after building an extension to test hundred of possible combinations: gif cropping is currently not working like expected.
To make things worse, the generated gif images are displayed differently in different browsers.
An example is this generated image:
View this image in FF, Chrome, Safari to see the different
I am trying to use de Image Button on LIBGDX to create a button based on two images.
Using add to second image, works fine, but have one problem.
The images are of different sizes.
Note: I am testing with the same picture to see the result
Is there a way to correct this? Using some scale to the images?
levelsTexture = new Texture(Gdx.files.internal("level1.png"));
levels = new TextureRegion(levelsTexture).split(TILE_WIDTH, TILE_HEIGHT);
ImageButton levels_image = new ImageButton(new TextureRegionDrawable(new
TextureRegion(levels[0][0])));
levels_image.add(new Image (levels[0][0]));
stage.addActor(levels_image);
levels_image.setScale(2f);
The problem:
ImageButton is an extension of the Table class and typically the ImageButton images are set as the background. Using the "add" method for the second image like you did might work kind of, but it behaves differently than setting the background and it also might not be what you want if you want the the second image to also change when you click the button.
The easiest way to add two images to a single ImageButton would be to simply combine the two images in Photoshop (or equivalent) and use that single image on the ImageButton.
The more advanced (and more flexible) method would be to combine the two images programmatically and use this as the background for your ImageButton. This can be done by creating a custom class which extends BaseDrawable and have it take two Images in the constructor. If you want your images stacked on top of each other, set the minHeight of your custom drawable class to be the combined height of your two images. Then override the draw method and draw your two images on top of each other like this:
#Override
public void draw(Batch batch, float x, float y, float width, float height){
img1.getDrawable().draw(batch, x, y, img1.getWidth(), img1.getHeight());
img2.getDrawable().draw(batch, x, y+img1.getHeight(), img2.getWidth(), img2.getHeight());
}
}
The ImageButton takes a Drawable in its constructor, so you can pass this object right into the button when you create it and both of your Images should appear in the button and they will be treated as one.
I've done something similar to make a background for a table using multiple Images and this method works great.
I wrote my own SpriteButton class in which I implement this method for scaling my textures.
private Dimension getScaledDimension(Dimension imgSize, Dimension boundary) {
int original_width = imgSize.width;
int original_height = imgSize.height;
int bound_width = boundary.width;
int bound_height = boundary.height;
int new_width = original_width;
int new_height = original_height;
// first check if we need to scale width
if (original_width > bound_width) {
//scale width to fit
new_width = bound_width;
//scale height to maintain aspect ratio
new_height = (new_width * original_height) / original_width;
}
// then check if we need to scale even with the new height
if (new_height > bound_height) {
//scale height to fit instead
new_height = bound_height;
//scale width to maintain aspect ratio
new_width = (new_height * original_width) / original_height;
}
return new Dimension(new_width, new_height);
}
Then finally you draw the texture with the output dimension as as size to draw.
sb.begin();
sb.draw(this.texture2, this.x, this.y, dim_size_new.width, dim_size_new.height);
sb.end();
So you could technically draw the second image to the size of the the first image, if the first image size is correct.
Your implementation will look different from mine but you should be able to figure it out form here on out.
I'm trying to animate a canvas on three different layers on the onmousedown and ontouchstart. The three canvas go from left to right at a different speed to give a perspective effect as long as the onmouseup or ontouchend are not fired.
I am using #-webkit-keyframes css to do my animations:
#-webkit-keyframes aCarsRight
{
from{background-position: 0px 0px;}
to{background-position: 640px 0px;}
}
.cars_move_right
{
-webkit-animation-name: aCarsRight;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
}
What I would like to do is get the current background-position of the three layers prior to disabling the pan animation and set them manually so when I remove the .cars_move_right class from my div is stays in the same position instead of rolling back to its default position.
Is there a way to get the background-position or just a work around to get what I want? The page is meant for iPhone and iPod Touch.
Thanks !
I found something interesting. Instead of grabbing the background-position, stop the animation and set the background-position to my divs, I pause the animation.
document.getElementById('global').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_cars').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_car').style.webkitAnimationPlayState = 'paused';
Haven't had the chance to test it on iPhone yet.
And, here's a method that seems to work cross-browswers to get any property:
window.getComputedStyle(document.getElementById('div'))['background-position'];
Have you tried:
var blah = ele.style.backgroundPosition;
That will return it like "10px 57px"
If the css rule has a hyphen in it then afaik in Javascript the hyphen is removed and camel case applied.
I found that I can use this to get the property I couldn't get with [mydiv].style.[property]
function getProperty(property, div)
{
return window.getComputedStyle(document.getElementById(div))[property];
}