WordPress.org

Ready to get started?Download WordPress

Forums

Auto ThickBox Plus
Suggestion: option to disable ATB on mobile/small screens (22 posts)

  1. Alexander S. Kunz
    Member
    Posted 1 year ago #

    Hello,

    I saw the previous discussion/post http://wordpress.org/support/topic/plugin-auto-thickbox-plus-image-larger-on-mobile and I'd like to suggest an option (checkbox) to simply disable ATB when the visitor is using a small screen device (like a mobile phone), and just display the larger version of the image instead.

    I don't know if a simple text for the user-agent string is enough (to include "Android", "Blackberry", "iPhone" and such) though, but that's what I saw in some other lightbox-type plugins.

    Thanks for a very nice plugin
    Alexander.

    http://wordpress.org/extend/plugins/auto-thickbox-plus/

  2. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  3. Alexander S. Kunz
    Member
    Posted 1 year ago #

    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: http://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.

  4. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. Alexander S. Kunz
    Member
    Posted 1 year ago #

    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.

  6. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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 571x800 in your example page. If I open it with iPhone 4 whose screen resolution is 960x640, 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?

  7. Alexander S. Kunz
    Member
    Posted 1 year ago #

    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 (960x640). 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. :)

  8. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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 960x640 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?

  9. Alexander S. Kunz
    Member
    Posted 1 year ago #

    That sounds like a nice solution.

    However, I'm seeing some strange behaviour on my Android device (screen size 800x480).

    I went to this item on my site: http://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.

  10. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  11. Alexander S. Kunz
    Member
    Posted 1 year ago #

    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.

  12. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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

  13. Alexander S. Kunz
    Member
    Posted 1 year ago #

    Well, perfect. That works for me. :)

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

    Alexander.

  14. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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

  15. Alexander S. Kunz
    Member
    Posted 1 year ago #

    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.

  16. Alexander S. Kunz
    Member
    Posted 1 year ago #

    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.

  17. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    Thank you again for helpful screenshots.

    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. :)

    I fixed several more bugs on sizing and positioning. I have no idea about the cause if the issue occurs even in the latest plugin. To solve the issue, I need an environment that reproduces it. Probably, I had better rewrite buggy ThickBox completely than maintain it as before.

    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.

    I have heard that iPad does not trigger resize event sometimes when the orientation is changed. The plugin listens only resize event currently, so the problem will be resolved by listening both resize and orientationchange events, however it is not smart way.

    Many thanks, attosoft

  18. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    The plugin listens only resize event currently, so the problem will be resolved by listening both resize and orientationchange events, however it is not smart way.

    I modified the plugin so that it listens both events, so I hope the problem has been resolved.

  19. Alexander S. Kunz
    Member
    Posted 1 year ago #

    Hi! I can confirm that this is fixed in version 1.9 - thank you, nice update!

  20. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    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. :)

    How about this problem? Does it still persist now in your Android 2.3 phone?

    I installed Portfolio Press theme since you use a child theme of Portfolio+ theme, and tested the plugin in the following virtual devices, using the Android Emulator in the Android SDK.

    • Android 2.2 (ARM, WVGA)
    • Android 2.3.3 (ARM, WVGA)
    • Android 2.3.3 (Intel Atom, WVGA)
    • Android 4.0 (ARM, WVGA)

    As the result, the plugin seems to work for me with no problem.

  21. Alexander S. Kunz
    Member
    Posted 1 year ago #

    Hello.

    Unfortunately, the problem is still "sort of" persistent on my Android phone (Android 2.3.7).

    When opening the image first, it is still misplaced (halfway down the screen, mostly out of view), as previously illustrated in this screenshot: https://www.dropbox.com/s/6o1p42y8su5pzz9/screenshot-1349496262882.png

    Once I rotate the device, the image moves into place (centered on screen), and rotating the device back then also shows the image in the correct position.

    Best
    Alexander.

  22. attosoft
    Member
    Plugin Author

    Posted 1 year ago #

    I checked your site with the Android Emulator provided officially.

    ThickBox works fine, so I have no idea what the cause is. It may be Android 2.3.7, your phone, your theme or my plugin.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic