I’m currently building a custom WordPress theme based off of the wonderful Starkers theme and tried setting up a Fancybox gallery to show off some good looking photos.
The fancybox was coming up just fine, but for some reason, it kept kicking the page behind the overlay to the top, almost as if I were clicking an empty anchor tag. It turns out that the included reset.css file had a property on the html selector that was conflicting with the Fancybox plugin.
|
1 2 3 4 5 6 |
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } |
That overflow-y: scroll; is in place so that any vertical resizing of the page is handled gracefully, so I didn’t want to take that out.
Luckily, I found a fix that used a native helper of the Fancybox plugin called overlay.
|
1 2 3 4 5 6 7 8 |
$('.image').fancybox({ padding: 0, helpers: { overlay: { locked: false } } }); |
After adding this helper, everything played nicely with the reset.css and I was able to go back to making beautiful galleries without wanting to kill a puppy.
2 comments
امیر
November 20, 2017 at 5:34 amthanks
really helpful
Josephus Tabby
August 14, 2018 at 2:43 pmThis really answered my problem, thank you!