Rishi B
Posted in Component Development 6 years ago
I've been using the Fancybox component and for the most part it works fine, except for the fact that when clicking an image on the news feed, the lightbox displays at the top of the page, requiring the user to scroll up. This can be fixed with 2 fairly small modifications. The first is to remove the "!important" flag from line 2 of components/fancybox/plugins/default/css/fancybox.init.php (I didn't bother posting my version of this file since it's literally just deleting 10 characters. The second modification that is required is to components/fancybox/plugins/default/js/fancybox.init.php. I've posted my version of this file here: https://gist.github.com/xbansh33/677b3767be66bd91356f88d600485919 - it requires certain flags when creating the fancybox - for more info, see this topic on Stack Overflow: https://stackoverflow.com/questions/13547007/fancybox2-fancybox-causes-page-to-to-jump-to-the-top
Rishi B
Replied 6 years ago
Z-Man - it's not that serious, but thanks, I do appreciate the help. My site is at http://soulg.ngrok.io and you can login with demouser:demouser if you'd like to take a look - I am kind of curious why it wouldn't work for me until I removed !important from that css file. btw I'm using Iron (Chrome) on Windows 10.
Michael Zülsdorff
Replied 6 years ago
Hmm ... that's strange :)
Having left the 75px !important in place I just tried it again with
latest Edge, Firefox and Chrome on Win10 on https://newblue.ongolito.net/home using the 8'' floppy image: No scrolling.
Perhaps we can crosscheck? Where is your site?
Rishi B
Replied 6 years ago
hey Z-Man,
I tried a couple of times and for me, it does NOT work without removing the "!important" flag from the CSS that I mentioned. I'm not sure why/how that css property is affecting the javascript but unless I remove that flag, the lightbox always loads at the very top of the page.
In any case, I'll make a pull request for the actual javascript.
edit: I think I see the issue. On my news feed (the rendered html in Chrome), when I try to inspect the fancybox that comes up from clicking an image about halfway down the feed, I see the following html:
<div class="fancybox-wrap fancybox-mobile fancybox-type-inline fancybox-opened" tabindex="-1" style="width: 511px; height: auto; position: absolute; top: 1094px; left: 427px; opacity: 1; overflow: visible;">
If we don't remove the "!important" flag, that value above of 1094px is going to be 75px instead, which means it's going to display at the top of the page. It seems like if we force the value of top to always be 75px with the !important flag, the lightbox is always going to display at the top because of this, despite the js fix. I believe this means the line would have to be deleted altogether (as you mentioned), or the !important flag removed. I'm not aware of any other side effects that this CSS modification may have.
Michael Zülsdorff
Replied 6 years ago
Thanks for the improvement, bansh33.
I'd suggest to make a pull request in the component's repository.
As for the css part: Without !important the 75px will be overwritten by 20px from fancybox. Thus we can either remove this line completely or keep it in place with !important and get the box a little lower. Either way, this doesn't seem to have any impact on your javascript fix.
Due to the many requests in the past for additonal features and components we have decided to develope a premium version. Features like Hashtags, Videos, Polls, Events, Stories, Link Preview, etc included in it.
$199 (Life Time)
