-
Posted in : Photographer
-
Loving this theme! Is there any way to have a slider as the homepage that shows the full image (all images being the aspect ratio) and slides/fades between each image (and has the prev/next buttons).
I also need it so that it shows the entire image within the browser. I don’t want it to where it’s a wide image, and you have to scroll down to see the bottom of the window. I’d like the width/height to be constrained to the users browser size, so you don’t have to scroll at all on the homepage.
Thanks!
if [slide] can’t be set to have animation/fade, I could use [ken_slider] with sy-box{max-height:none;} so it shows the full image, but it still goes taller than my browser window and requires scrolling to see images (also have social media footer below slider, just FYI)
Hi, in the next update we will add animation type options(fade – slide – kenburns) for ken_slider also we will add more options to slider shortcode (the one we used in post format gallery in blog). We plan to release it in a week. Maybe after the update you might get what you wish with new options. Thanks for the feedback.
Good to hear! Will this also address the homepage image slider size I’m hoping to accomplish as well? I’m wanting the images to be as wide as possible , but not too wide that the images become too tall for the window screen and you have to scroll.
My apologies if I’m having a difficult time explaining! Here’s an example: http://nataliedefnallphotography.com . As you make your browser window shorter (less height) the images scale proportionally. And if you make your browser window skinnier (less width), it does the same, but never makes the image too big in width or height to where you have to scroll to see the image.
Thanks!
I was able to replicate the desired effect using JSFiddle: http://jsfiddle.net/q6rL4jkk/5/
So there is a fixed header and fixed footer height, and the image in the middle represents the Owl Carousel. As you scale the page to different sizes, the image scales within proportion and centers it (where-as, if you just did max-height:none; on the slider, the image will go 100% wide and then go taller than the window height).
I’ve tried copy/pasting this JSFiddle code onto my External JS and Custom CSS areas of my Photographer site, but it isn’t making a difference it seems. Any help is appreciated!
Hi again, i see what you mean, but , it is not available by default and it requires more time and effort to customization, if you are not familiar to wordpress coding you may consider working with a professional.
For those interested, I was able to get this issue resolved with an awesome plugin: Revolution Slider. It’s $18 on Code Canyon (comes as an add-on for a lot of themes also). I simply installed the plugin, then made my slider to be a Full Screen slider. This will make it take up the entire size of the browser. The key feature is the OFFSET CONTAINERS area. Just put .site-header, .site-footer into this area, and it’ll make a full screen slider + header/nav + footer all fit to the users screen without having to scroll! I don’t want my images to be cropped any to fit the slider, so just change the image background from COVER to CONTAIN and put the Revolution Slider shortcode on your homepage and you’ll be good to go!
Works great! Going to use it for all other galleries on my site. It plays nicely with the Photographer theme!
You must be logged in and have valid license to reply to this topic.