Vertical images look too small in the carousel!!
-
Hi, everybody:
This time I have an issue with the carousel used to view galleries: http://lydialavin.com/2014/02/15/hijas-de-la-lluvia/#jp-carousel-1705Specifically, I want the vertical images to look a bit bigger when viewed in the carousel. The bottom margin has too many pixels.
Besides, the “view full size” button is hidden; one has to scroll down in order to press it. It is also hard to scroll down because the browser thinks i’m clicking the next image.
So, in short:
How can I make the vertical images in the carousel larger (in height AND width) – by reducing the bottom margin? How can I change the position of the “view full size” button so that it is more accessible?I hope this enigma can be solved! :D
Thanks!!!!!!
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Please see my answers below!
How can I make the vertical images in the carousel larger (in height AND width) – by reducing the bottom margin?
You can change the size of your carousel images using the following CSS code:
.jp-carousel-slide img {
display: block;
width: 150% !important;
height: 150% !important;
max-width: 150% !important;
max-height: 150% !important;
}Just a note, the 150% is adjustable depending on how much larger you would like the images to be.
How can I change the position of the “view full size” button so that it is more accessible?
Can you let me know what screen size and browser you’re using? On my side, the “View Full Size” button is appearing correctly towards the bottom of the image. Did you want to boost the link up higher on the page or simply enlarge the text?
-
Wow! I’m gonna use the code you gave me. :D
And yes, I want to boos the link up higher on the page.Let me see how it looks after modifying the size of the images…
-
Sounds great! Yes, if you still want to move the link up higher on the page, let me know.
-
Hey, Jeremy! I tried the recommended code, and the size of the images didn’t change!
I also tried the following code, just in case, and it didn’t work…
.jp-carousel-slide {
background-size: 300% 300% ;
}D:
:D -
Hey! I tried the following code:
.jp-carousel-slide {
width: 300% !important;
height: 300% !important;
}And it worked!!!
jajaja
Just that 300% is tooooo much.Let me keep on experimenting…
-
Jeremy, when I apply the code I just to told you above, the image gets deformed… REALLY DEFORMED.
-
Hi!
The deformation should only occur if the width and height are adjusted separately. Also, to your other message, 300% is definitely going to be a little bit to big. I would suggest something perhaps in the 130% range. Please see the code below:
.jp-carousel-slide img { display: block; width: 150% !important; height: 150% !important; max-width: 200% !important; max-height: 200% !important; }The width and height need to be the same. The max-width and max-height just need to be a bit above the width/height to make the attribute valid.
Does that make sense?
-
Jeremy! The code you gave me didn’t work on my site! It has zero effect… nothing changes.
Why? D:
I tried the following code as well, and the image got much bigger but deformed:
`.jp-carousel-slide {
display: block;
width: 150% !important;
height: 150% !important;
max-width: 200% !important;
max-height: 200% !important;
}Thanks a lot!
-
Hi there,
I apologize for not realizing this sooner. Gallery image sizes are set to fill the full content width of your theme. As discussed in the FAQ here, it currently isn’t possible to change the size of the image:
http://en.support.wordpress.com/slideshows/
The issue with the vertical images is the height of the image. The height currently takes up the entire size of the frame. So, extending the height isn’t an option. Therefore, when the width is changed, the image is distorted.
Again, I’m sorry for not realizing this sooner and having you test out various CSS codes!
-
-
Jeremy! The article you gave me is talking about the gallery type “slideshow”. I think it’s different from the carousel used in mosaic galleries.
Do the same “rules” (of size) apply for the carousel? -
Hi!
Yes, I’m sorry. I double-checked, and it looks like this currently isn’t possible. The size of the image in the carousel is served up depending on a few factors including the size of the view window and the original size of the photo. There isn’t a safe way to manually adjust the image size as it depends on too many other viewing factors.
I apologize that I couldn’t be more help!
-
-
I apologize I couldn’t help more. Let me know if you need any additional help customizing your site!
- The topic ‘Vertical images look too small in the carousel!!’ is closed to new replies.
WordPress.com Forums 