emergency, lightbox doesn't work on mobile #16
Comments
|
update iframe-lightbox paths in your scripts and codepen https://codepen.io/englishextra/pen/jmjayV https://github.com/englishextra/iframe-lightbox/blob/master/CHANGELOG.md It seems that you had used dirict links to raw github, thus you'll need to update those paths.
|
I have noticed this : ) Here is a demo with latest gihhub js and css to see it's not working. Test it using your mobile device. |
|
or try If it fails, this is for sure that your testing platform blocks external scripts If this platform is yours - maybe you have some default server config that sends no sniff to end user browser Have you used that boardea.com platform for your previous testing and did that work? |
|
Ok, demo is fixed and still with same problem. Firefox reports this:
PS: shouldn't be this from README.md: this: |
|
Yes the last ones. As for the rest I cant do anything - becasue as you can see the scripts are loaded bu the browser is tol not to execute - nosniff Here it works https://codepen.io/englishextra/pen/jmjayV So that's your server setup Update - put the script from head to bottom of the body before init <script type="text/javascript" src="https://unpkg.com/iframe-lightbox@0.2.4/js/iframe-lightbox.js"></script>
<script type="text/javascript">
[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function (el) {
el.lightbox = new IframeLightbox(el, {
scrolling: true // default: false
});
});
</script>There is no waiting for window onload event. so the script doesn't see the body tag It works now - I copied your demo on my desktop and tested that Ok I just saw you fixed that. There's a reson why there's no check for onload event - because the script is supposed to be included after the page loaded, placing a window onload inside the script may lead to bad consequences. Or the script is bundled in some vendors.min.js that usually loaded with the script tag at the bottom |
|
Most important is WordPress demo website, but anyway, this 'emergency' was combination of 2 reasons:
|
|
I uncluded that file to the demo - I see no conflicts Can You specify what's wrong in dev console - what is it erroring about? |
|
this wp demo site |
I have created you a simplified version of WP demo website (just html). You may play with that. Open it on your mobile phone and click on 'β' link (using your cell phone browser). |
|
@jasomdotnet /**
* Toggle `focus` class to allow sub-menu access on touch screens.
*/
function toggleSubmenuDisplay() {
document.addEventListener('touchstart', function(event) {
if ( event.target.matches('a') ) {
var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : '';
// If there’s a link, go to it on touchend
if ( '#' !== url && '' !== url ) {
window.location = url;This is there the clicks are hooked. This is something that you will have to resolve on your own. Perhaps that was the reason why I used |
|
OK Since other lightboxes also add |
|
I like that part about making me happy :-) |
|
We may back to
|
|
@jasomdotnet I already added touch support so the unceremonious
|
|
published v0.2.5 here and on NPM
UPD Your boardea...test platform workson mobile as I just saw. If problem persists, and you have access, try to make it that way: ...
<script type='text/javascript' src='........./wp-content/themes/twentynineteen/js/priority-menu.js?ver=1.0'></script>
<script type='text/javascript' src='........./wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js?ver=1.0'></script>
<script type='text/javascript' src='........./wp-includes/js/wp-embed.min.js?ver=5.0.2'></script>
<!-- plugins are the last -->
<script type='text/javascript' src='........./wp-content/plugins/boardea-storyboard-integration/boardea.min.js?ver=1.6'></script>
<script>
... |
|
It works even when iframe-lightbox.js is not the last one. I'm feeling happy, thank you :) :) |
It opens the link. No pop-up is shown. See example
The text was updated successfully, but these errors were encountered: