I think you may not fully understand the problem: technically there is no “mobile is loading”. It makes no difference if Chrome is running on the Desktop or in Android – in both cases the HTTP request will be exactly the same.
The only way to tell the difference on the server is using the User Agent header in the request to check if it contains the identification of a mobile browser. But this is not really reliable and not recommended.
Another way could be to check the viewport size and redirect to a mobile version of the website as soon as possible using JavaScript – e.g. if the desktop version is https://mysite.example you can redirect to https://m.mysite.example which contains only smaller versions of your images – for example by using an outpout hook in your functions.php which replaces all images with a smaller version. This is what some online magazines do and personally I find this annoying, since it is no problem at all to create responsive layouts using CSS which don’t need to have a different website just for mobile devices.
You could also create two version of every image and use responsive CSS rules to either make the desktop images visible or the mobile images, for example:
<div class="desktop"><a href="bigimage.jpg"><img src="bigimage-150x150.jpg" alt="..."></a></div>
<div class="mobile"><a href="bigimage-mobile.jpg"><img src="bigimage-150x150.jpg" alt="..."></a></div>
And the CSS rule:
@media only screen and (min-width: 58em) {
.desktop { display:inline; }
.mobile { display:none; }
}
@media only screen and (max-width: 58em) {
.desktop { display:none; }
.mobile { display:inline; }
}
Using an output filter in the template one could also create the two separate images automatically, but you need to know how to program such things in PHP.
Anway – all this has nothing to do with my plugin. Linking to smaller versions of images for mobile devices is out of scope for a lightbox plugin. The lightbox only display what is linked. You have to solve this independent from my plugin.
