I would like to make a simple carousel slideshow, without lightbox, which automatically starts with filling the complete space, no cropping of images, just scaling longest edge to 100%.
Can you please share your WP credentials here, because I need to login to your site and test this issue. Your information is safe here (private) in this thread.
To include your credentials click Insert Credentials button in editor toolbar. (See how)
So now the carousel fully fits the window viewport width. The height is relative to the image height so that cannot be constrained.
P.S: You are using an old version of our theme 2.7.6, the latest version for the moment is 2.9 (read release notes), please update your theme first and then the premium plugins too.
After you update the theme, there is a chance that we also updated some of the plugins that we offer. To update those plugins to the latest version that we support, just go to Appearance > Install Plugins.
I would like both landscape and portrait images to be fully contained to the edges, now it is cropped by the screen, but not seeing part of the image is not an option. Right now it's not working at all. With the css I added it was working and all images were contained?
Could you check the resolution of the image as well? when I load on my screen the image quality is crap, the original images should be loaded, and they should be at least 2400 by 1600 pixels. When I add -1, to let it load full height, it stops working, also in your edit.
I think you wanted the images to be fully stretched to window edge, so that was what I did. If you want the images to be expanded to the browser edge then the vertical scroll is necessary based on image height. If you don't want that to happen then you can stick with object-fit: contain; option.
Thx, could you check one more thing regarding the position of the caption? It would be great if it is locked onto the bottom of browser frame, with an offset from the bottom and left, so it's always on the same spot, independent from the images.
Now it's relative to the image, which results in different non-consistent positions.
I have tried to add fixed position but it didn't worked because the carousel uses transform to rotate the slides and thus fixed position fails to stay in the same position.
The only solution is to make the caption absolute position so it will slide together with image like it is currently in your site.
I would like the movie to be full screen without crop as well, initally the video was quite small, so I added css to get a max-width of 100%, however, when the browser is landscape and height is smaller, the play button falls off, how do I make this video behave the same way as images? I tried "object-fit: contain;" but it doesn't work.
Next to that, sometimes the video starts autoplaying, sometimes not, how does this happen? can I make it autoplay all the time?
Regarding your further questions, kindly open a new ticket and post your request so it will be helpful for the other users to take advantage of searching them on the forum. We’re glad to help you in your new thread.
Hi,
I would like to make a simple carousel slideshow, without lightbox, which automatically starts with filling the complete space, no cropping of images, just scaling longest edge to 100%.
http://www.claar.be/newwip/portfolio/carousel-2/
Is this possible? I tried with css but can't figure it out.
The arrows could be centered vertically as well.
Thanks in advance.
best regards,
Vincent
Hi Vincent,
Can you please share your WP credentials here, because I need to login to your site and test this issue. Your information is safe here (private) in this thread.
To include your credentials click Insert Credentials button in editor toolbar. (See how)
Hi Vincent,
I have disabled some of your style:
(view large image)
The CSS is still there, I have just added an extra X to prevent style to be applied. Also added this CSS:
(view large image)
And this JS code:
(view large image)
So now the carousel fully fits the window viewport width. The height is relative to the image height so that cannot be constrained.
P.S: You are using an old version of our theme 2.7.6, the latest version for the moment is 2.9 (read release notes), please update your theme first and then the premium plugins too.
After you update the theme, there is a chance that we also updated some of the plugins that we offer. To update those plugins to the latest version that we support, just go to Appearance > Install Plugins.
Hi Arlind,
I think it's not fully what I meant.
I would like both landscape and portrait images to be fully contained to the edges, now it is cropped by the screen, but not seeing part of the image is not an option. Right now it's not working at all. With the css I added it was working and all images were contained?
Could you check the resolution of the image as well? when I load on my screen the image quality is crap, the original images should be loaded, and they should be at least 2400 by 1600 pixels.
When I add -1, to let it load full height, it stops working, also in your edit.
Thanks
Hi Vincent,
I think you wanted the images to be fully stretched to window edge, so that was what I did. If you want the images to be expanded to the browser edge then the vertical scroll is necessary based on image height. If you don't want that to happen then you can stick with object-fit: contain; option.
As for the image quality I have added this code:
add_filter( 'kalium_single_portfolio_gallery_image', function( $size ) { if ( 'type-3' === kalium()->acf->get_field( 'item_type' ) ) { return 'original'; } return $size; } );And it turned image quality to uploaded ones.
As for the carousel type, can you tell me which one are you going to use? The first one you had, or the one I have implemented?
Hi Arlind,
Thanks for the full size images.
As for the position, I don't want the image cropped, so object-fit: contain is the idea.
Could you update it to the carousel like the first I had?
Best regards,
Vincent
Hi Vincent,
I have made the carousel like it was before. I hope you like it.
Hi Arlind,
Thx, could you check one more thing regarding the position of the caption? It would be great if it is locked onto the bottom of browser frame, with an offset from the bottom and left, so it's always on the same spot, independent from the images.
Now it's relative to the image, which results in different non-consistent positions.
Thx in advance.
Hi Vincent,
I have tried to add fixed position but it didn't worked because the carousel uses transform to rotate the slides and thus fixed position fails to stay in the same position.
The only solution is to make the caption absolute position so it will slide together with image like it is currently in your site.
Hi Arlind,
How do I do that with absolute position?
Thx
Hi Vincent,
I have checked in our default demo it works in fixed mode:
https://d.pr/v/2EYvDu
You can see the captions doesn't move with image.
Demo can be seen here:
https://demo.kaliumtheme.com/photography/#morning-beach
I guess this is what you wanted as result.
Hi Arlind,
I have a question with a vimeo link.
Check out http://claar.be/newwip and then the first post top left "Villa Azur"
http://www.claar.be/newwip/#azur
I would like the movie to be full screen without crop as well, initally the video was quite small, so I added css to get a max-width of 100%, however, when the browser is landscape and height is smaller, the play button falls off, how do I make this video behave the same way as images? I tried "object-fit: contain;" but it doesn't work.
Next to that, sometimes the video starts autoplaying, sometimes not, how does this happen? can I make it autoplay all the time?
Best regards,
Vincent
Hi Vincent,
Regarding your further questions, kindly open a new ticket and post your request so it will be helpful for the other users to take advantage of searching them on the forum. We’re glad to help you in your new thread.
Will set this ticket as solved from here.