Full screen images in carousel
-
The full width option has been enabled in my settings. But it’s not really full width when the carousel is opened. I want my images to stretch from one end of the screen to another while the previous and next arrows hover on them, but a little bit smaller in size.
Any ideas on how to achieve this?
The blog I need help with is: (visible only to logged in users)
-
HI there, this would be problematic at best. Cubic continually adjusts the size of the slideshow slide area based on the browser window/screen height and widths so that it is always as big as it can be with the Carousel design. If you inspect the .jp-carousel-transitions .jp-carousel-slide div (best to detach the inspector frame so it doesn’t take up browser window space) and look at the sizes listed in the element section at the top of the CSS area, and then adjust the browser window width, you will see that it will recalculate and change the slide size each time you adjust the browser window. I tried overriding those in CSS and setting them both to 100%, or auto, but the image gets distorted on smaller screens.
-
Aw… bummer. If you couldn’t figure out, I’m sure a noob like me will end up getting my head stuck in the toaster while trying to fix it. Anyway, thanks for trying. If there are any alternatives to the jp-carousel that I might be able to use to achieve what I’m looking at, do let me know. Else please go ahead and close this topic on my behalf. Thanks again.
-
Or may be, just may be, increase the height alone further and let the carousel decide the height according? I’m sorry I’m just thinking out loud here. Even the tallest of my images are getting limited to 767px on my 1920X1080px screen. If I can increase the height a little bit more and let the carousel handle the width, even that might be close to what I was looking for. Any scope for that?
-
Any change we make to either the height or width will cause distortion on the images on smaller screens since we are setting a fixed height or width in the CSS and then the software can’t change things. I can’t find a way to increase the size without causing distortion on smaller screen/window sizes.
The only thing we could do would be to limit that change to a certain browser window width or height using a media query, but I don’t thing that would gain us much. If someone had their browser window off by even a single pixel, they wouldn’t see that increase.
I can work out a bit of code if you wish to try this. Can you give me a link to a page with a gallery/carousel on it? I found one the other day, but can’t find it again.
-
Oh thank you so much. What you said was pure silver lining for me. Here’s the link. http://wp.me/P2doZL-PN
-
@irfarious, I’m sorry, but I just can’t get this to work as I thought I might be able to. Any change I make to width and/or height ends up with distortion of the image at anything but the exact size of my browser window.
-
Oh, I see. It’s ok, no problem. Thank you so much for trying. Really appreciate it. I just have one more thing on my mind. Tried it on my own but I wan not able to get exactly what I want.
When opening a post, you can see that the post title appear on top of the featured image, near the top border. Can I make it appear on the bottom, at the same gap from the bottom border?
-
It’s appearing on the face of my subjects on most cases which is just turning me off. I’m sure that must be the reaction from the audience as well.
-
You know, I tried a slightly different tact on the slideshow size, which seems to work reasonably well. I’ve limited this change to 1000px and wider screens.
@media screen and (min-width: 1000px) { .jp-carousel { transform: scale(1.15); } .jp-carousel-next-button span, .jp-carousel-previous-button span { opacity: 0.7 !important; } }On the post title on single post pages, you can give this a try. It seem to work, but make sure and view a good selection of posts with images, and also view things on tablets and phones in portrait and landscape orientation.
.single .has-post-thumbnail .entry-header { top: 900px !important; } -
I tried your code but sorry, did not work :(.
I was thinking, apart from tampering with the image size in the carousel, may be even the position of the comments box should be considered. May be it’s blocking the expansion of the carousel image size. I’m just thinking out loud here.
And about the post tittle, that did not work, either. I tried something similar to your code before I checked with you. IT was bringing down the post tittle but that only worked on a particular resolution. On bigger resolution it was positioning the tittle in mid way. When I adjust according to the big resolution it would move way down, in the body of the post on smaller screens. Anyway to show the post tittle it’s right place?
-
This is what I see using the .entry-header code in your customizer with the following code.
.single .has-post-thumbnail .entry-header { top: 900px !important; }On the @media screen and… rule, it has to be min-width, not max-height. I changed that in your customizer to give it a try and it works.
-
I should note that it makes the images bigger, but it does not make they entirely full height of the browser window. Also, your browser window will have to be set wider than 1000px for you to be able to see the change.
-
Hi Irfan,
I was able to recreate that issue with a smaller browser window height.
In this case it might be better to override the top positioning and position the title off the bottom. Can you try the CSS below and see if it helps?
.single .has-post-thumbnail .entry-header { top: inherit !important; position: inherit !important; bottom: 135px; } -
Hi Kevmarsden
Thanks for the code. It worked, although there is a little side effect to it. It’s creating extra gap between the featured image and the body of the post, where the post content starts. So I tried to reduce that gap by using this code.
.entry-author, .entry-content, .entry-footer { max-width: 1650px; width: 100%; padding-top: 0px; }But there is still some gap. Is there a way to fix this?
-
Hi Irfan
I see that you changed the margin-top of the content area to -50px. Is that working for you?
-
Sorry, I should’ve given a response earlier. Yes, it’s working. It is shifting a little up and down due to the size of the featured image but I can live with that. Thanks so much for your help.
There was also one more question that I had asked in this thread about making carousel images expand to full screen. Do you think it’s possible in anyway?
-
Hi Irfan,
Have you tried changing the scale value in the CSS that Richard provided? Increasing it to around 1.3 might help.
-
I did but like he said, it’s not increasing the image resolution, it’s just stretching the current carousel image resolution, making the images loose quality.
Also this is something that I just noticed. The tittle on pages with no featured images is being pushed down into the body of the content. I am guessing it might be due to the code which was used to bring down the tittle to the bottom of the featured image, or may be not, I’m not really sure. Can you please help me with it?
- The topic ‘Full screen images in carousel’ is closed to new replies.
WordPress.com Forums 
