[Martin SParticipant]

Hi,

This is at the same time an info for people having similar issues, and a support question on whether there’s a workaround:

I spent long time now trying to get the responsive lightbox working, but it never showed up. The thumbnail images would have the hover effect, but on click nothing happens. After investigating, I found out that (a) it works on some browsers (IE, FF), but not in Chrome which I usually use (and also not in Opera), and (b) that it seems to be related to the fact that I have a laptop with a touch screen. I have it connected to 2 external monitors and work normally with keyboard and mouse, but it seems Chrome is believing I should be using touch input, and does not accept the mouse clicks in case of the lightbox. If a drag the browser window to the laptop screen and open the lightbox with touch, it actually works (it still doesn’t if I just connect an external mouse and click with it)

This might be a general Chrome issue, or an issue with the lightbox, so not sure if there’s a fix for it. Anyone knows a workaround?

The site is: http://roadmaps.forjira.com/ – the 3 screenshots should open in lightboxes..

Thanks,
Martin

[KoryKeymaster]

Hey Martin,

This is a most strange issue indeed. As you can imagine, since touch laptops are a fairly recent thing we don’t have one readily available to troubleshoot this on. Is there any way you could take a video of your screen while testing this out and providing us with a link to it? Additionally, it would help if you would leave up the Chrome JavaScript console to see if any errors are happening. To do this, right-click anywhere on the page and select Inspect Element, then hit the Escape key to bring up the console. Once this is showing, browse your site like normal on your laptop with the touch screen and recreate the steps to see if any errors show. If you’d like, you can provide this in a private reply below by selecting the Set as private reply checkbox.

Thanks!

[Mark KParticipant]

I too am finding the same issue as well using Chrome and Firefox.

[KoryKeymaster]

Mark,

Thanks for writing in. Could you please provide further clarification on where this is happening? Is it with a touch screen laptop as mentioned in Martin’s original post? If so, we would ask that you also provide us with the same things we asked of Martin in order for us to help troubleshoot this.

Thanks!

[Martin SParticipant]

Hi,

Thanks for your reply – I fear I can’t provide much input on this: there’s nothing related to this in the JS console

Console:
body.scrollTop is deprecated in strict mode. Please use ‘documentElement.scrollTop’ if in strict mode and ‘body.scrollTop’ only if in quirks mode.

Network:
video.js.map /wp-content/themes/x/framework/js/vendor/bigvideo
GET 404 Not Found

Where could I upload the video in case? (I fear it won’t be useful, as everything you’d see is an image link with a hover effect, and then simply nothing happening when clicking)

Maybe this is helpful: I found several discussions with people having similar issues in other web apps, and it seems like its necessary to react to both touch and mouse events (not either-or) to fix this:
http://stackoverflow.com/questions/18761078/detect-touch-events-in-chrome-on-windows-8-with-touchscreen

If the control is written to distinguish the two, a combination of having touch, but using a mouse, causes troubles generally.
Hope this helps, let me know if you still need the video and in case where I can upload it.

Best,
Martin

[RubinKeymaster]

Thank you for the information. We will look into this and update you once we found out more.

[Mark KParticipant]

I also found nothing in the console. Instead, I started playing around with the difference between inserting the lightbox using Visual Composer and inserting the light box using. So to set up my test I started a brand new page using the Visual Composer I did the following:

1. New Page
2. Add Row
3. Add Lightbox, clicked deep link and left the class at .x-img-link
4. Add Block Grid (All standard – Type 2)
5. Add Grid Item – clicked “content”
6. Add Media
7. Clicked image in Gallery – clicked insert into page
8. When image appeared in content box – click upper left edit box on image
9. Clicked advanced settings
10. Deleted sizes, delete any classes in upper selection boxes and below in css styles added: x-img-link
11. Publish

Clicked on Classic Editor – clicked to open Code (Text) view and here was what I got —

[vc_row][vc_column width="1/1"][block_grid type="two-up"][block_grid_item]<a class="x-img-link" href="http://www.caribeadventures.com/wp-content/uploads/2014/02/fortwillioughbysmall.jpg"><img alt="fortwillioughbysmall" src="http://www.caribeadventures.com/wp-content/uploads/2014/02/fortwillioughbysmall.jpg" /></a>[/block_grid_item][/block_grid][lightbox selector=".x-img-link" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal"][/vc_column][/vc_row]

This worked like a charm.

Now – If I repeat the steps above and do not click “DEEP LINK” in the “Lightbox” popup then the above steps DO NO WORK. I think that is what is throwing off folks.

Next for the experiment I did all of the above except – for No. 7.
Instead I added the image using the WYSWIG button for X theme > media > image

Got this code

[image src="http://yourdomain.com/path/to/your/image.jpg" alt="Alt Text" type="rounded, circle, thumbnail, none" float="left, right, none" link="true" href="#" title="Title" target="blank" info="tooltip, popover" info_place="top, right, bottom, left" info_trigger="hover, click, focus" info_content="This content will only show up if you have decided to show a popover." lightbox_thumb="http://yourdomain.com/path/to/your/image.jpg" lightbox_video="true" lightbox_caption="This content will only show up if you use a lightbox"]

Cleaned that all up to this:

[image class="x-img-link" src="http://www.caribeadventures.com/wp-content/uploads/2014/01/spider_small.jpg" alt="Alt Text" type="thumbnail" link="true" href="http://www.caribeadventures.com/wp-content/uploads/2014/01/spider_small.jpg" lightbox_thumb="http://www.caribeadventures.com/wp-content/uploads/2014/01/spider_small.jpg"]

Next I did the exact same thing as above and when I pasted in the code the class=”x-img-link” was not there so I added it back in and deleted the type=”thumbnail” link=”true” href=”http://www.caribeadventures.com/wp-content/uploads/2014/01/spider_small.jpg”

[image class="x-img-link" src="http://www.caribeadventures.com/wp-content/uploads/2014/01/spider_small.jpg" alt="Alt Text"  link="true" href="http://www.caribeadventures.com/wp-content/uploads/2014/01/spider_small.jpg"]

Either way the lightbox works.

You can see it here: http://www.caribeadventures.com/new-lightbox-text/

[Mark KParticipant]

Oh yea – the image with the

type="thumbnail"

in the code put a large nasty looking white box around the image.

[KoryKeymaster]

Hey Mark,

Thank you for your feedback! Can you please confirm that you are also on a touch screen laptop like Martin? I inquired about this a few posts ago but still haven’t received an answer. I’d just like to get that nailed down so that I can know we’re all on the same page and that you’re not seeking an answer for another issue.

Thanks!

[Mark KParticipant]

Good night:

The lightbox is not working with the “touch” on my touchscreen notepad – Toshiba NB15t Series. In fact, none of the UI is working on this particular touchscreen notepad with the touch method for UI. The UI does work with the mouse.

[KoryKeymaster]

Thanks, Mark! We have submitted an inquiry to the developer about this and will be awaiting a response on this.

[Jenni WParticipant]

I have just been trying to set up a lightbox, really confused as it wasn’t opening anything up when I clicked using a mouse so looked to the forum for an answer. Just tried (without changing anything on my site) and if I touch the laptop screen it opens up the lightbox with the images, tried clicking on the button to close it using the mouse pad and it does nothing, again I have to touch the laptop screen. I am also using Chrome and haven’t yet tried it in another browser.

Are there any updates on how to solve this issue? I can work round it as I know what is needed, but obviously won’t work for any potential customers viewing my site 🙂

Thanks

[ChristianModerator]

Hey Jenni,

We’re still investigating this issue. Please bear with us for a moment.

Thanks.

[Elyse LParticipant]

Same problem–got a new laptop with a touch screen and the lightbox doesn’t work with chrome or IE, (it works fine with firefox). The lightbox works with all browsers on my non-touch-screen computer.

[AlexanderKeymaster]

Hi Elyse,

Thanks for letting us know. This is something we’re still looking into. It’s related to the lightbox library we use, so we’re hoping to have a solution from their developers soon.

Take care!

[Author]

Posts