This is a more or less known problem, some other plugin or theme setting tries repeatedly to make the image 32 pixels smaller. The exact cause is not known to me. Try to eliminate by disabling other plugins or check theme settings
Having disabled all plugins without success it appears that the problem lies with the Weaver 2 theme. Although I have cleared all settings within the theme the problem remains. I have tried other themes and the lightbox problem doesn’t happen.
Unfortunately there is also a problem with the weaver 2 support forum in that I’m unable to post questions.
As such I have to place my website in maintenance mode.
Thanks for your help.
I finally contacted Weaver admin but they are puzzled.
Do you have any other information on what’s happening here that I can pass on to Weaver admin?
I don’t want to drop WPPA as it’s by far the best I can find & I don’t want to drop Weaver either for similar reasons.
The lightbox framework is inserted into the page by an add_action('wp_footer", ...:
/* LOAD FOOTER REQD DATA */
add_action('wp_footer', 'wppa_load_footer');
function wppa_load_footer() {
global $wppa_opt;
if ($wppa_opt['wppa_lightbox_name'] == 'wppa') {
if ( ! $wppa_opt['wppa_fontsize_lightbox'] ) $wppa_opt['wppa_fontsize_lightbox'] = '10';
$d = $wppa_opt['wppa_ovl_show_counter'] ? 1 : 0;
$ovlh = $wppa_opt['wppa_ovl_txt_lines'] == 'auto' ? 'auto' : (($wppa_opt['wppa_ovl_txt_lines'] + $d) * ($wppa_opt['wppa_fontsize_lightbox'] + 2));
echo '
<!-- start WPPA+ Footer data -->
<div id="wppa-overlay-bg" style="text-align:center; display:none; position:fixed; top:0; left:0; z-index:100090; width:100%; height:2048px; background-color:black;" onclick="wppaOvlOnclick(event)" ></div>
etc...
I think the problem is that this code ends up in a <div> from the weaver theme:
<div id="weaver-final" class="weaver-final-normal"><script type="text/javascript">
disableSelection(document.body)
</script>
<!-- start WPPA+ Footer data -->
<div id="wppa-overlay-bg" style="text-align:center; display:none; position:fixed; top:0; left:0; z-index:100090; width:100%; height:2048px; background-color:black;" onclick="wppaOvlOnclick(event)" ></div>
<div id="wppa-overlay-ic" style="position:fixed; top:0; padding-top:10px; z-index:100095; opacity:1; box-shadow:none;"
ontouchstart="wppaTouchStart(event, 'wppa-overlay-ic', -1);" ontouchend="wppaTouchEnd(event);"
ontouchmove="wppaTouchMove(event);" ontouchcancel="wppaTouchCancel(event);" >
</div>
etc...
Earlier problems with the weaver theme made me do this in wppa.js:
function wppaOvlShow(arg) {
_wppaLog('wppaOvlShow', 1);
wppaFindWindowSize();
// Prevent Weaver ii from hiding us
jQuery('#weaver-final').removeClass('wvr-hide-bang');
etc...
I think the problem is the wrapping by a div from the weaver theme although simply removing that does not fix it, but i still think it is strange that i can not put a div right before the </html> by a normal add_action('wp_footer', ....
The jerking you mentioned is done by wppa lightbox and is an attempt to get the layout right by max 3 iterative operations. This is sometimes needed because the text may wrap different after resizing, so the imagesize must be adjusted. So that is normal, but you should not see this behaviour under normal circumstances.
Thank you, I will pass it on.
Hello –
I am also a major fan of the Weaver II Pro theme. IMO, there is really nothing else that compares to it regarding flexibility and ease of use for a web developer, and I use it exclusively. So, I won’t be opting for another theme.
Recently, I have become a HUGE fan of WPPA. It beats every other gallery plugin out there hands down 🙂
So, in using Weaver and WPPA together I have notice two issues – one of which I think is the issue in this thread.
Issue #1:
I believe the “jumpy” lightbox issue is related to the WPPA setting I:G:1 “Number of text lines” in the lightbox description area. If this is set to “auto”, it seems that WPPA does a calculation to adjust the modal window every time it loads a new image. If this is set to a fixed value (I went with 2 lines), then the jumpy jiggly behavior goes away (for me).
Issue #2:
This seems to be a related interaction/conflict with Weaver and WPPA CSS. davidallen23 – I see you have this isse at your website using Weaver as well. When the lightbox is shown, there is a problem with the padding or margin on the right side of the modal window. The “X” to close the window, and the arrow on the bottom right seem to be too far to the right – actually the background box is seems to be clipped on the right. As you can see in this photo at my Dropbox:
https://www.dropbox.com/sh/p68u5232b7c7uof/y2Nux7Vui6
I would provide a link to my website, but it is not presently available for public viewing.
A follow-up on issue#2:
Looks like the Weaver CCS has this rule in it:
img, .content-2-col, .content-3-col {
-moz-box-sizing: border-box;
}
This rule is being applied to the WPPA element:
#wppa-overlay-img
If the value of “-moz-box-sizing:” is changed to:
“content-box” or “inherit” it fixes the weird border stuff on the right side of the modal window.
I figured this out using the inspect element tool, but I can’t for the life of me change the CSS using my favorite “Custom CSS” plugin. I either can’t get the CSS path right, or it just won’t override the style.
I hope this helps in some way to solve this issue.
Hi Wayne1. Good to have some extra feedback. I’ve replied back on the Weaver forum:
http://weavertheme.com/forum/#/discussion/5656/lightbox-problem
David –
Thanks to Scrambler, here’s the fix for the lightbox right border issue:
#wppa-overlay-ic img {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
Put that in your Weaver Advanced Options > Head section > Custom CSS Rule box.
Hey! That’s excellent. Thanks to you both for the fix.
Interestingly, in Safari I now get a small scroll bar on the right side of the description box which, I guess, would be a good way to deal with long descriptions. However, regardless of the length of the description, the scroll bar is fully expanded and, as such, doesn’t do anything.
But I don’t care about that. The main thing is that lightbox now works fine.
Thanks for your efforts. I can now happily continue with the best theme and the best photo gallery. Whoopee!
Hello guys! Great that you found the solution to the problem.
A few remarks from me:
1. @waynem1: Issue #1 and #2 are the same. You can see that i leave the size correct ( 3 times in case of auto height of text box as i explained earlier ), thereafter the right margin is shifted, hence the dithering.
2. @davidallen23: The vertical scrollbar when the text is higher than the box is a recent addition from me ( iverflow: auto ) to make a long text readable when the box height is fixed.
3. If you want i will add the css change hard-coded in the style of the #wppa-overlay-ic img or in the wppa-style.css.
The scroll bar is an excellent addition & solves my long description issue at a stroke. Thanks
3. If you want i will add the css change hard-coded in the style of the #wppa-overlay-ic img or in the wppa-style.css.
Hard-coding it doesn’t matter to me, as I can fix it with the custom CSS.
I will put it in the wppa-style.css, should do it, also for other in the future, and is easely to change for thos who want that.
Topic finally closed…
