Since i stumbled over this thread while searching for the same functionality, i will leave my solution here. Not sure, wether there might be an even easier solution, since it is 2020 already and the post is 6 years old. At least this works for me:

Request:
“is there a possibility to always display the entire image in the full screen slider, without cutting off parts of the image?”

Solution:
add a custom css name to your fullscreen slider element, e.g. “custom_fs_slider” (under edit > advanced > developer settings > custom css class).

Add this code to quick css:

.custom_fs_slider .avia-slideshow > ul > li {
    background-size: contain !important; /* resizes the background image to the size, where it fills the container in one direction, but without cropping the image on the other direction. aspect ratio is being maintained */
    background-repeat: no-repeat !important; /* makes sure, that only one instance of the picture is visible */
    /* general note: this makes most sense, when the background color of your picture is either transparent or has the same color of the background, so that you do not see borders of the background image */
}

Hope this helps someone. Cheers, Stefan

• This reply was modified 4 years, 7 months ago by thatsmyname.

finally it works on desktops.

two things were wrong. i had the wrong headroom.js file and it needs a sticky header. so next thing will be, to get it to work on mobile.

i found out, that the custom.js and headroom.js are running by placing prompt(); messages at several points.

and i tried, similar as on http://wicky.nillia.ms/headroom.js/, to take simpler actions:

.headroom--pinned { display: block !important; }
.headroom--unpinned { display: none !important; }

i set offset and tolerance to 0 in the custom.js, so the “display: none” part should have immediate effect. nothing happens so far.

hi @talawar, are you setting any specifics via the enfold theme settings ui? i tried it with normal and transparent headers set to sticky and unsticky.

it’s not working yet, but the headroom class is pointing to the right header, since the full header disappears with:
.headroom { display: none !important; }

so i am not sure wether the code is running but interfering with other theme settings, or if it’s not running at all.

any ideas regarding possible interference?

Best Regards,

Stefan

Hi @Mike,

thanks for you reply. Although i understand, that third party scripts are not your business, could you say, wether my approach to install a custom JS from within the child-theme is making sense?

I am trying to do the custom JS include within the child-theme via child-theme/functions.php and child-theme/js/ for the JS Files (so that i don’t loose too much on a theme update). Are my enqueueing scripts making any sense in general for this setup (regardless if the scripts itself are working)? Is $template_url.’ referencing to “…/enfold/” or to “…/enfold-child/” ?

Hopefully @talawar might find the time to get back on this.

Best Regards,

Stefan

Hello,

i found a workaround for my website, which detects firefox and switches back to scroll mode. Maybe this helps here as well:
https://kriesi.at/support/topic/workaround-for-parallax-bug-on-firefox-on-android-parallax-fallback-via-css/

best regards,
Stefan

Hello,

i found a workaround for my website, which detects firefox and switches back to scroll mode. Maybe this helps here as well:
https://kriesi.at/support/topic/workaround-for-parallax-bug-on-firefox-on-android-parallax-fallback-via-css/

best regards,
Stefan