Hi All,
This took me a while as I don't like js much, no good at it at all! I hope over my posts and the video you saw what I was trying to achieve, a smoother transition when the light box opens and closes, and avoiding the website shift due to the overflow behavior on the body of the site being changed, hence width of the site being changed by a small amount but a noticeable slight shift of the entire website contents to the side when opening and closing the light box images (such as in the zentools demo at [http://zentools2.joomlabamboo.com/index.php/zentools2-examples])
After searching the js, I commented out lines 18 and 24 in media/mod_zentools2/js/lightbox/magnific.js
line 18:
//if(mfp.fixedContentPos){mfp.wrap.css({overflow:mfp.st.overflowY,overflowX:'hidden',overflowY:mfp.st.overflowY});}else{mfp.wrap.css({top:_window.scrollTop(),position:'absolute'});}
line 24:
//if(mfp.fixedContentPos){if(!mfp.isIE7){windowStyles.overflow='hidden';}else{$('body, html').css('overflow','hidden');}}
This got the best results, tested on android/ipad/chrome/firefox/edge/internet explorer all latest versions. I realise two downsides to this:
- the site scrolls in the back-ground when the light box is open
- I will need to re-do this if the module is updated
Visually in this website's case it is more pleasing. Any alternatives to achieve similar results without downsides above are welcome! I tried css, but overiding it in css causes some negativity to other parts of the page or undesired "flashes" of changing css rules so stopping it at the js level seemed the only solution.
PS: I have disabled the support access I provided. At some point I will set up a test environment to debug this issue further but any other other input would be welcome. I think it is an issue which needs resolving in zentools2 on future releases?