Navigation icons appear to be missing with boxplus lightbox

[GoogleCodeExporter]

Using stable 1.4.2.17, flow layout & boxplus light square, navigation icons 
(left/right arrows, close/X etc) appear fine below images.  

I uninstalled and tried 1.5.0.206, in order for better mobile support (which 
works well, btw).  Counter is present below image (1/5, 2/5 etc) but icons are 
missing.  

Tested with Chrome on PC as well as Android.  Actions appear to work fine if I 
click in the area where icons should be.  This is more problematic on Android 
as you cannot close the lightbox, even if you tap outside the box similarly to 
clicking that area on PC.

Original issue reported on code.google.com by onewayd...@gmail.com on 18 Sep 2014 at 3:45

[GoogleCodeExporter]

http://i.imgur.com/QG6dYoQ.jpg

Original comment by onewayd...@gmail.com on 18 Sep 2014 at 4:10

Attachments:

• example.jpg

[GoogleCodeExporter]

Missing icons seem like the result of a conflict between sigplus stylesheet 
rules and the stylesheet rules of your template. Such conflicts can only be 
resolved by looking at the live page and using the browser web inspector tool 
to find out what rules are applied to the elements in question, namely, the 
previous, next and close buttons. I guess the template forcibly overrides 
styling for these controls, which makes them disappear.

Closing the dialog by clicking outside the window has been disabled in the 
mobile version for user experience reasons. However, you can still close the 
pop-up window by double-clicking the image, which works both on the desktop and 
on mobile devices.

Original comment by huny...@gmail.com on 20 Sep 2014 at 8:53

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Was there a major change in the CSS from version 1.4.x to 1.5.x?  The stable 
version works fine on the template.

I inspected the element through Chrome and the image appears to not be linked.  
Are the buttons generated by some different scripting in 1.5, and is that 
blocked because of some template setting?

sample page: 
http://www.project9designs.com/index.php/transformers/works-in-progress/masterpi
ece-megatron/125-masterpiece-megatron-2

1.5
#boxplus .boxplus-controls>.boxplus-next{background-image:url(/)}

1.4
#boxplus .boxplus-controls>.boxplus-next{background:transparent 
url(/plugins/content/sigplus/engines/boxplus/popup/css/buttons.png) no-repeat 
scroll 0 0;}

Checking the plugins/content directory, there is no boxplus directory.  Only 
'caption', 'lightbox' and 'rotator'.  Lightbox directory only contains php 
files for the different engines.

Original comment by onewayd...@gmail.com on 20 Sep 2014 at 4:28

[GoogleCodeExporter]

There have been major changes in sigplus 1.5.x compared to 1.4.x. Essentially, 
1.5.x is a complete re-write of the application.

In sigplus 1.4.x, images are referenced via regular URLs. This can be 
relatively costly for small images because the browser has to initiate an HTTP 
request for each and every image, the request and response headers being almost 
as last large as the image payload, which is quite inefficient. In sigplus 
1.5.x, small images are embedded directly in the CSS file via so-called data 
URIs, which is the recommended approach for referencing small images as it 
requires only a single HTTP request and response to fetch all stylesheet 
content.

Some templates use a so-called minifier (or CSS compressor), which concatenates 
all CSS files into a single file. Unfortunately, some of these minifiers have 
trouble processing data URIs. Yours seems to omit such URIs entirely. Because 
data URIs are now ubiquitous, I strongly believe it is the responsibility of 
template developers to ship their template with a minifier that can process 
data URIs; this really is not difficult. Otherwise, you can probably switch off 
the minifier on the template configuration page, which will prevent boxplus CSS 
data URIs (and data URIs by other extensions) from being destroyed.

boxplus CSS files reside in the "media" directory, which follows how the Joomla 
framework separates PHP server-side script files from stylesheet and JavaScript 
files.

Original comment by huny...@gmail.com on 20 Sep 2014 at 6:24

[GoogleCodeExporter]

Thank you.  It was the compression function of the template that caused the 
problem.  Though, double clicking/tapping on Android still does not close the 
image for me.  Tested on Chrome and stock browser.  The enlarge/resize icon 
also does not function for me on Android. 

A side question, are there no options yet to control the icons and their 
visibility?  On Android/mobile, I would like to hide the overlay navigation 
arrows, since they're persistent with their visibility rather than mouse-over 
visibility on PC (same with Captions).  Because mobile swiping is available and 
functions well, I would want to hide these from view to encourage swiping and 
also not block the photo view.  I would also want to hide the resize icon since 
it's not functioning - or even if functioning, I think the swipe support would 
prevent you from being able to move/scroll the larger image into view.

Thanks again!

Original comment by onewayd...@gmail.com on 25 Sep 2014 at 2:30