Lightbox view shifts my side by a few pixels.

[vtheme]

Just updated to the latest framework and the new lightbox is shifting my content space to the left by a few pixels any time that it is called to show an image…. any idea of what I can look for to debug this?

Just prior to the photo showing, the site content space shifts (seen beneath the black opaque screen) and then returns to the correct spot when the lightbox is exited.

Topic

[Jason Bobich]

Hello,

I’m not familiar with what you’re describing, and cannot reproduce on my end. Can you provide a link to live example of the issue?

[vtheme]

Thanks for taking a look, I sent the url privately.

[Jason Bobich]

That is very odd. I honestly have no idea. It seems to happen only when I scroll more towards the bottom of the page and then open one of the images.

I wonder if it’s something to do with the map? That’s the only thing I can spot that is out of the norm of using the lightbox.

Out of curiosity, try temporarily removing the <map> all together, and then setting up the current image placeholder that’s there to just be a link to one of the locations in the lightbox. Does the problem still exist?

[vtheme]

This actually happens on all of the images on the site that I have updated to the new lightbox, not just the map. So, yes, the problem still is there.

I haven’t added the class=”themeblvd-lightbox mfp-image” to all of the images yet (as the site just upgraded theme), but I did on some pages and they all behave the same. See this page …./get-involved/planned-giving/ for a simple example of what I see.

[Jason Bobich]

Hm, I have tried the lightbox at ./get-involved/planned-giving/ on Firefox, Chrome, and Safari with the browser window at all different sizes, scrolling at different positions, and I cannot get the content to jump. I can only get it to happen on the map page.

[Jason Bobich]

As I’m sure you know, the lightbox, Magnific Popup, is a third-party script. I have a feeling there isn’t really going to be any kind of satisfying answer here.

[vtheme]

hmmm weird, Firefox, Chrome, and Safari and IE are all showing jumps for me, even after clearing caches…

Thanks for the look though, not a deal killer, just bothers me that its happening. I will continue to look, but not kill myself on it 🙂

[vtheme]

Ok, evidentally this is a documented bug. See http://dimsemenov.com/plugins/magnific-popup/documentation.html#known_issues

on this topic:

When popup is opened scrollbar of window disappears and creates empty space or shifts some fixed-positioned menu (or whatever)

Solution 1: add overflowY:’scroll’ option to force the scrollbar. Solution 2: use open/close popup callbacks to apply custom styling to menu that behaves incorrectly.

It is the scroll bar that is disappearing from my views as the jump occurs. (You must have a larger viewport that I did, once I ctrl– the screen size and lost the scrollbar, I no longer had the jump.)

My problem now is that I still am not placing the overflow-y: scroll; in the correct place to eliminate this jump and I don’t understand how to implement Solution 2. I will continue on this, but wanted to alert you to this issue just fyi.

Thanks again for the second pair of eyes on this….

[vtheme]

ok,

I’ve messed around with this, but still cannot avoid the jump.
Is it possible to take another look at this to get this to work?

[Jason Bobich]

I’m sorry; I honestly have no idea. I had originally already come across the link you provided, and I tried implementing what they’re saying manually in the browser window, but couldn’t get around it.

Is it possible prettyPhoto would work better? Have you tried switching back with our prettyPhoto plugin? To answer your original question, the plugin essentially swaps Magnific Popup out everywhere in the theme back with prettyPhoto. All old methods you were doing before should work the same.

[vtheme]

pretty photo works fine, I just didnt want to stay with outdated modules as going forward that could present more problems as the theme progresses.

If that is the best solution though – it will work.

thanks again for another look – appreciate it.

[vtheme]

Just to be sure, if I us Pretty Photo, do I need to do anything to unhook/disable the magnific plugin?
Can I use the rel=”prettyPhoto” and the class=”themeblvd-lightbox mfp-image” together on an image without any problems? (I would eventually like to stick with the current version and avoid using another plugin, so it would be nice to have things set up for either right now.)

Thanks again

[vtheme]

Hi,

Never could get this shift to stop and may consider using the Pretty Photo plugin.

Could you confirm the usage of these? if I use Pretty Photo, do I need to do anything to unhook/disable the magnific plugin?

Can I use rel=”prettyPhoto” and class=”themeblvd-lightbox mfp-image” together on an image without any problems? (I would like to eventually move forward to the magnific without having to move these in and out of the code)

[Jason Bobich]

if I use Pretty Photo, do I need to do anything to unhook/disable the magnific plugin?

No, you shouldn’t need to do anything. Magnific should be disabled with the plugin.

Can I use rel=”prettyPhoto” and class=”themeblvd-lightbox mfp-image” together on an image without any problems?

Yes, the two are unrelated. Magnific Popup binds to links with those classes, while prettyPhoto binds to links with the rel attribute “prettyPhoto” or “themeblvd_lightbox”.

https://github.com/themeblvd/Theme-Blvd-prettyPhoto/blob/master/assets/js/tb-prettyphoto.js#L51

[Jason Bobich]

Keep in mind though that the prettyPhoto plugin, in honesty, originally was intended for those that would be mad when we initially made the big theme framework update. So much time has passed now though that the plugin is kind of becoming irrelevant. Also, as you can see from the download count, not many people ever felt a need to use it (which is a good thing).

So, anyway, I can’t vouch for the future of this plugin, or if it will always work with the theme in the future, or what will happen to the prettyPhoto script itself as WordPress continues to update jQuery.

[Author]

Replies