[Plugin: Auto ThickBox Plus] Suggestion: option to disable ATB on mobile/small screens

Hi Alexander,

Thank you for your suggestion that is helpful for me.

Your solution is very simple, but I think there are some disadvantages to disable ThickBox.

First, page transition occurs, so you need to go back to previous page. Second, image caption does not displayed. Lastly, gallery images are not displayed in gallery style, so you cannot move to previous/next image from current image.

Currently, I’m just working on the problem. I’ll try your solution if I could not resolve it in my own way.

Just for my information, could you tell me other lightbox-type plugins that you saw?

Yes, it is a very crude solution, and I’m aware of it’s limitations. I just thought it might be a nice short-term solution (since you mentioned that your time is limited in the other thread).

My take simply is – the lightbox is supposed to help appreciate images larger, and with less distraction.

But that very purpose is often reversed on small screens (for example: https://www.alex-kunz.com/portfolio/black-oak-in-fog/ – opening this in the lightbox on a small screen will render the image much smaller).

So, in order to give the mobile/small screen user an image as large as possible (so that it can be appreciated as good as possible on the tiny device), a simple solution would be to simply open the image “full-screen”, as is, without a lightbox at all.

As for the more refined approach, I could imagine an “invisible” lightbox that displays the image full-screen, with gallery navigation and title/caption fading out after an initial delay, and coming back in when the user taps the screen. Something like that.

I think the lightbox-type plugin where I saw this option first was for Slimbox, or Slimbox2, I can’t really remember.

Thanks for being such a great and responsive developer!

Alexander.

I completely agree with you.

I implemented temporary workaround for small screen. ThickBox does nothing on smaller screen than 480px. Thereby the link will be opened normally. Please reinstall the plugin.

The plugin uses screen size instead of user agent string to detect mobile devices. Because newer mobile devices, such as iPhone 4, support higher resolution.

Hmmm… allow me to disagree with you on that one.

Even if the resolution of the screen is high, it is still physically a small display. iPhone 4S – 3.5″, iPhone 5 – 4″, Galaxy S3 – 4.8″ … etc.

No matter how high the resolution is, I would always prefer to see a fullsize image without a modal overlay on smartphones (it has to do with viewing distance and all that). Maybe everything below 7″.

I’m aware that there’s no reliable way to determine the physical size of the screen, which is why the user agent might be the best bet (I don’t know if it’s possible to keep Android smartphones and tables apart).

I would also like to suggest to make this feature entirely optional, with an additional checkbox in the Settings screen. ??

Best
Alexander.

No matter how high the resolution is, I would always prefer to see a fullsize image without a modal overlay on smartphones

The image size is 571×800 in your example page. If I open it with iPhone 4 whose screen resolution is 960×640, I think it will be displayed in full size regardless of whether to use ThickBox.

In my understand, you say smaller images than the resolution will be displayed larger than using ThickBox. I do not have small-screen devices with higher resolution, but I guess images are displayed according to screen resolution regardless of physical screen size. Am I wrong?

I guess I understand where you’re coming from: why would anyone open the image in the lightbox if it is that large already anyway, right? ??

Perhaps you shouldn’t think of the lightbox as a tool to display the photo larger, but also to display a photo without distraction. Maybe that makes it clearer where I’m coming from. ??

I am looking for a way to display a photo big, without scrolling, and without distraction. On large screens, that means “lightbox”. On small screens (as defined above), that means “show me just the photo (and nothing else).”

So I just tested this with my wife’s iPhone 4S (960×640). Nothing works better than screenshots to illustrate this:

Screenshots.

They come in pairs.

• The first pair (photo 1.png and photo 2.png) are a photo in landscape orientation, with the phone in portrait orientation. You see that the lightbox image is WAY smaller than the regular one on the page. [what’s more, when I rotate the phone (to landscape format), the lightbox is not resized.]
• The 2nd pair (photo 3.png and photo 4.png) are with the phone in portrait orientation again, and with a photo in portrait orientation too. The normal photo fills the screen nicely, the lightbox image is smaller again.
• The 3rd pair (photo 5.png and photo 6.png) is the landscape orientation photo again, with the phone in landscape orientation too. The lightbox is TINY in this example. With the limitation being 480 pixels, this looks WAY better on my (old) Android phone because I can simply see the image, and then rotate the phone as I wish.

I hope it’s clearer now what I mean. ??

Thank you for your contribution. I deeply appreciate you provided very helpful screenshots for me.

I’m sorry for my poor English. I realized misunderstanding between you and me from your screenshots. Your theme declares <meta name="viewport" content="width=device-width" /> tag. iPhone 4 supports 960×640 resolution but this tag makes iPhone 4 open pages in 320px width. I had thought your site is displayed in 640 width on iPhone 4, but in 320px actually. As a result, you can see only tiny image on your site with ThickBox.

I implemented mobile support for small-screen devices with reference to your screenshots.

• Original ThickBox set fixed 150px margin around the image before, however small the browser window may be. Now ThickBox sets fixed 30px margin around ThickBox window, or zero margin when browser window is smaller than 480px. You can change the value via “View – Margin – Window” option. The image should be fit into browser window, as shown in this screenshot.
• Auto Resize feature works even when resizing browser window. Thereby the image should be resized even when rotating screen with mobile devices.

Some more improvements may be needed, but I removed temporary workaround for small screen. I know you want to disable ThickBox on small-screen devices and change the behavior through options. However I think they are no longer needed and above improvements meet your request. What do you think?

That sounds like a nice solution.

However, I’m seeing some strange behaviour on my Android device (screen size 800×480).

I went to this item on my site: https://www.alex-kunz.com/portfolio/a-foggy-morning-at-lake-hodges

I scroll down a little bit to get to the three gallery items, and tap on the middle one.

This is what I get after tapping on it:
https://www.dropbox.com/s/gyy6km989mzm0uv/screenshot-1348941160181.png

When I scroll up, I see this:
https://www.dropbox.com/s/nrgbzjm3ykanr70/screenshot-1348941190202.png

When I rotate the device, I see this:
https://www.dropbox.com/s/krdh4ibc5vbac19/screenshot-1348941227379.png

It probably needs some fine-tuning?

I would really appreciate it if you kept an option “Disable Thickbox on devices with a screen size smaller than <X>” (with <X> being configurable).

Thank you!
Alexander.

I guess the problem is also seen in other pages even when using previous version or built-in ThickBox, and ThickBox seems to work fine if you do not scroll. Right?

I think it is caused by CSS position:fixed style. Most iPhone and Android do not support position:fixed or support it partially.

The following mobile OS supports CSS position:fixed.

• iOS 5 or later
• Android 2.2 or later (user-scalable=no in viewport meta tag is required in Android 3.0 or earlier)

I’ll try to implement a workaround code for this.

Well if I don’t scroll it looks ok, but to get to the image(s) that I want to view, it’s necessary to scroll fairly often on a small screen device. (FWIW, my screenshots where made on an Android 2.3 device)

With the complexity and difficulties on mobile that you’ve shown me (and the theme specialties on top of it), I’d like to repeat the request to keep a simple option “Disable Thickbox on devices with a screen size smaller than <X>” (with <X> being configurable). ??

Best
Alexander.

I don’t think scrolling is unnecessary feature. What I want to say is that CSS position:fixed is the cause if ThickBox works without scroll.

I’m unwilling to add “Disable ThickBox” option because I don’t know whether it is a smart way. However I added the following options, please try it.

• General – Mobile Support

• “No Window Margin” / “No ThickBox”
• Width / Height

Regards, attosoft

Well, perfect. That works for me. ??

If you need any further testing, please let me know, I’d be glad to help.

Alexander.

I added the workaround for position:fixed issue. Unfortunately, I do not have Android 2.3 phones. Could you make sure whether the plugin works on your Android phone when you have time?

Thank you in advance for your cooperation.

Regards, attosoft

Hi, sorry it took a couple of days…

It’s different now in that it scrolls to the top as far as I can see – but the lightbox image doesn’t open at the top. ??

https://www.dropbox.com/s/6o1p42y8su5pzz9/screenshot-1349496262882.png

Best
Alexander.

In addition to the above, there appears to be a problem with resizing the lightbox when rotating the device. I made these screenshots on a iPad2, same happens on the iPad3.

1. Open an image in landscape orientation:
https://www.dropbox.com/s/ahzy6iz2swzbyod/photo%201.PNG

2. Rotate to portrait orientation (perfect!):
https://www.dropbox.com/s/elrriyup8hjy48s/photo%202.PNG

3. Rotate back to landscape orientation (oops):
https://www.dropbox.com/s/6np39xuja7lridu/photo%203.PNG

Thanks for looking
Alexander.