CSS for adding full image gallery slide show
-
I want to add a slide show to my pages in my site and I don’t like the default slideshow. The image is too small and I don’t like the area around the image.
I just want a full image slideshow (with out any slide show border, etc). I’ve looked at this site , http://www.w3schools.com/w3css/w3css_slideshow.asp and I’ve tried the ‘manual slideshow example.”
I think I need to add code to my site CSS page but not sure how and also define a class to point to for site pages. e.g. how I can do this per page and not for Site. I want to be able to leverage this gallery class as I like.
Thanks
The blog I need help with is: (visible only to logged in users)
-
Hi there, can you point me to a page on your site that has a slideshow on it and I’d be happy to see what I can do to help with this?
-
Yes I have published a protected Projects Page (in draft). https://iamtheveronique.com/portfolio/dreams-deferred/
The password is ‘w0rdpre$$’
-
Hi, and thanks for the link. The gallery software looks at the images you have chosen for your slideshow and based on the sizes, creates a bounding box with fixed dimensions so that the size of the slideshow frame doesn’t change, which can be disconcerting to visitors. It also creates image files, on the fly to fit within that bounding box.
We can remove the black border and background color and adjust the bottom padding a bit to get a bit more width and height on the images. Add the following to your custom CSS and see what you think.
.slideshow-window { border: none !important; background-color: rgba(0, 0, 0, 0) !important; padding-bottom: 75% !important; } -
Thanks for the response. You’re suggesting I do this to my overall site custom CSS? One question I had was is there a way that I can define the specs of individual galleries per a page or a project page (and not for the overall gallery feature that will impact all all of my site).
Also, I wanted to be able to add additional specs such as “slideshow indicators particularly the one with the ‘circles’) which is defined here in the link that I shared, https://www.w3schools.com/w3css/w3css_slideshow.asp
-
The images are still too small. I would like to have them near the individual images sizes.
Prior question:
Thanks for the response. You’re suggesting I do this to my overall site custom CSS? One question I had was is there a way that I can define the specs of individual galleries per a page or a project page (and not for the overall gallery feature that will impact all all of my site).Also, I wanted to be able to add additional specs such as “slideshow indicators particularly the one with the ‘circles’) which is defined here in the link that I shared, https://www.w3schools.com/w3css/w3css_slideshow.asp
-
To limit the change to only a certain page, you can include the unique post id CSS class from the opening body html tag on the page so the CSS selector looks like this for the dreams deferred page.
.postid-2095 .slideshow-windowThe slideshow has next and previous arrows near the bottom of the images. Since the slideshow operation is controlled by the Jetpack plugin, we have limited options for changing the behavior and/or appearance. You can set it to not autostart by adding autostart=”false” to the gallery slideshow shortcode so that it looks like this.
[gallery ids="2112,2111,2110,2109,2108,2107,2106,2105" type="slideshow" autostart="false"]
Switch to the Text tab in the page editor and you can edit the shortcode if you wish.We can make the next/previous and pause buttons at the bottom of the slideshow darker with the following CSS, if you wish.
body.postid-2095 div div.slideshow-controls a { background-color: #000 !important; }If you can let me know how you wish things to operate and look, I can see if I can figure out how to make that happen, but we are limited on the changes we can make, especially when it comes to changing functionality.
-
Thanks again. I’ll try that but, I really would like help on the image size as well. I would like my image size to be near true size, similar to this gallery in this artist’s site, http://www.creativesilence.net. Thanks!
-
1) I want to be able to show the image in its full size. I’ve updated the media settings to increase the max height and width but, still no changes.
– I want to remove the comments field that is associated with the image attachments. If I do this, would this allow for the images to also expand to their full size afterwards.
e.g. see this gallery, https://iamtheveronique.com/portfolio/dreams-deferred/?iframe=true&theme_preview=true#jp-carousel-2111
and here’s the full size of that image, https://iamtheveronique.files.wordpress.com/2017/02/final-vae_mark_1_mg_5940.jpg
I want the gallery to show the full size versions of each image.
2) Furthermore, I would like to not have the spacing that is in between the images in the carousel. I want them to have no spacing between the images similar to the site I gave above, http://www.creativesilence.net.
3) Also, for the top and bottom border, once I removed the comment field, I want to have a smaller border on the top/bottom of the page as well.
-
Sorry for the multiple posts but, just remember also a separate question.
1a) when I added “autostart to false” on the Projects Page, it removed my slideshow and put it in more of a grid instead of a slideshow. Please take a look at this.
1) I want to be able to show the image in its full size. I’ve updated the media settings to increase the max height and width but, still no changes.
– I want to remove the comments field that is associated with the image attachments. If I do this, would this allow for the images to also expand to their full size afterwards.
e.g. see this gallery, https://iamtheveronique.com/portfolio/dreams-deferred/?iframe=true&theme_preview=true#jp-carousel-2111
and here’s the full size of that image, https://iamtheveronique.files.wordpress.com/2017/02/final-vae_mark_1_mg_5940.jpg
I want the gallery to show the full size versions of each image.
2) Furthermore, I would like to not have the spacing that is in between the images in the carousel. I want them to have no spacing between the images similar to the site I gave above, http://www.creativesilence.net.
3) Also, for the top and bottom border, once I removed the comment field, I want to have a smaller border on the top/bottom of the page as well.
-
I’ve figured out 1a) how to manually deselect comments field for each image attachment but, the image didn’t resize to its full size or anything larger afterwards which I expected it to do so based on my max height and width.
-
The image you provided the link for is 3456px wide x 5184px tall. There is no monitor that large, so the image cannot be shown full size. For slideshows, and for the image carousel, the size of the bounding box, and the size of the images shown, are set by the Jetpack software. We cannot change that with CSS. The Jetpack software inserts all the calculated sizes and such directly into the page html and if you grab and widen/narrow/lengthen/shorten your browser window, the Jetpack software continually changes all of those size parameters depending on the size of the window/viewport. To change the size of the images in the carousel, or in slideshows, you would need to edit the theme’s Jetpack parameters file and possibly change some of the Jetpack Javascript coding itself. We cannot do that at WordPress.com. This all applies to 2 and 3 also.
I’m sorry I don’t have a magic wand to make this happen.
- The topic ‘CSS for adding full image gallery slide show’ is closed to new replies.
WordPress.com Forums 
