Problem with Lightbox
-
I have a problem with Lightbox used on my Hueman theme. Everything is fine except the screenshots of the apps: in the post pages I can modify the width and the height, but when I click on them, they appear vertically stretched.
There is known conflicts with some other plugin or I need to modify some lightbox setting?
-
If you go to the App Store Assistant Settings, Click on General then Miscellaneous, uncheck the check box for LightBox. That will then use the version you already have loaded.
I already tried this unthick the option but, when I save the settings and the page reloads, the option is still thicked.
I found a way to resolve the stretched image on overlay: I changed the width of .lb-outerContainer class on lightbox css (changed to 800px) and now it works.
But there are two other problems:
– the plugin has a conflict with wordpress since the edit bar (and all the buttons on visual mode) on post/pages disappear.
– on image overlay mode, when I move the cursor from left to right (and viceversa) the left and right arrow are repeated vertically and horizontally covering almost half the image for 1-2 seconds: I don’t see only one left arrow and one right arrow, but just for some seconds I see many arrows repeated.What version of the plug-in are you using?
I’m using 6.5.2
And I’m using Hueman theme.
If you change themes, do you see the same issues?
I’ll try and find the theme and install on my test site to see if I can find the conflict.
I have installed the theme and am not seeing the same issues. You can view it here <http://sandbox.sealsystems.net/asa>
I do see the issue where the checkbox for Lightbox won’t stay unchecked. I’ll get that fixed asap.
Perhaps it is another plug-in. What other plug-ins do you have?
I tried with other themes and everything works fine: I have no problems with the image size and the arrows (I see only one left and one right).
In the hueman theme, i correct width and height of lb-outerContainer class in lightbox.css to auto and now I can see the images in the correct sizes.
I am trying to modify the css following the settings I found on https://github.com/lokesh/lightbox2/pull/33/files#diff-a7c9a82c35b279523018350cf96dfc42R94 to see if I can correct the arrows duplication.In the mean time, if you replace the first line in the file <wp-content/plugins/app-store-assistant/includes/options_pages/options_general_miscellaneous.php> with below it will fix the checkbox issue:
<input type="hidden" name="appStore_options[checkboxedoptions]" value="open_links_externally,rss_showIcon,rss_showShortDescription,enable_lightbox" />I saw the http://sandbox.sealsystems.net/asa and I’m still seeing the images strechted when you click on them.
These are my installed plugins on my local wordpress installation (the site is still under construction):
– Broken Link Checker v1.9.2
– Contact Form 7 v3.7
– Light – Responsive LightBox v1.1 (disabled but requested by the theme)
– My Page Order v3.3.2
– Regenerate Thumbnails v2.2.4
– TinyMCE and TinyMCE Advanced Professsional Formats and Styles v1.1.1
– Transposh Translation fFlter v0.9.5
– WordPress SEO v1.4.24
– WP-PageNavi v2.85
– WP Maintenance Mode v1.8.11and other disabled plugins I’m not using using.
I also tried to disable all the plugins, but the problems remains. So I think it’s the Hueman theme has conflict with the plugin.I think I solved the problems: in the lightbox css I modified these classes:
Images width&height:
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: auto;
height: auto;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}duplicated arrows:
.lb-prev {
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
opacity:0;
}
.lb-prev:hover {
opacity:1;
}.lb-next {
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
opacity:0;
}
.lb-next:hover {
opacity: 1;
}So, now when I click on the image, I don’t see the arrows. But when I move the mouse on the right or on the left side of the image, the arrow appears.
I tested both on Chrome and Firefox and everything works! I hope these settings could be useful for you or for others could have similar problems.
p.s.
Now the lightbox check works!I also changed the width to 48% in this class
.lb-prev, .lb-next {
width: 48%;
height: 100%;
cursor: pointer;
/* Trick IE into showing hover */
display: block;
}because the right arrow was sliding 1-2 pixel on the right when the mouse hover: now it remains fixed (as the left one).
Thanks, i will see if I can make these changes and not affect other themes. It might be an issue with future upgrades to Lightbox, but we’ll see.
The topic ‘Problem with Lightbox’ is closed to new replies.