Jump to content

Lightbox In Mobile | Enable Description Text Links In Mobile View

Recommended Posts

Posted (edited)

Site URL: https://www.thisismyeverybody.com/reading-list#2022-reading-list

Anyone have a CSS solution to enable text links to work within lightbox descriptions in mobile view?... 😎 

The lightbox description text links are working fine on desktop... But not via mobile devices. 

FYI: I am not referring to the "Clickthrough URL" option you can add to the image via the image's Gallery Page. But, to adding text links within the image's Description excerpt that displays in the lightbox.

Currently using the following CSS so the lightbox automatically displays in mobile when clicking the image.... without having to also tap the "dot"...

//Show gallery captions all the time on mobile//
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

Thanks advance for any help!... 😎

Edited by thisismyeverybody
  • thisismyeverybody changed the title to Lightbox In Mobile | Enable Description Text Links In Mobile View
Posted (edited)

 

Lightbox Description Text Links via Mobile Devices.mov

 

Hi, @tuanphan!... Thanks so much for your response...

I see you are using a desktop to view & test the text links in the lightbox description. On desktop (whether you are viewing in "desktop view", "tablet view" or "mobile view"), the text links in the description work fine.

However, when you are using any mobile devices, the text links will not open. 

As requested, I have attached a video (using my iPad... but it does the same on my phone as well) showing what happens... 

To walk you thru my experience in the video... 

When using a mobile device (in this case, an iPad)... If you click on the image, the lightbox opens. However, if you click on any text link in the description, it simply advances the lightbox to the next image's lightbox.... And, if that image's lightbox is the last one in the collection, nothing happens at all when you tap a text link in the description.

Hoping this is clear... If not, let me know. Would really love to solve this issue... And super-grateful for your help!

... 😎

Site URL: https://www.thisismyeverybody.com/reading-list#2022-reading-list

(will need to view URL via a mobile device to see the issue)

Edited by thisismyeverybody
Posted (edited)

@tuanphan 

Regarding this issue... And why it may be occurring only on mobile devices & not on desktop (even when using the mobile view via desktop)... 

  • I have a theory that this issue is related to the additional "white dot" that is included when viewing on mobile devices. Because the lightbox feature (when viewing via a mobile device) traditionally requires that you first click the "white dot" to see the lightbox appear... The "white dot" is essentially serving as a primary "click-thru link" and may be overriding any further links (including the text links in the description) from being active. 
  • Even though I am using CSS code to auto-open the lightbox on mobile devices, I suspect that the underlying "white dot" is still overriding any further links from being active.
    • The CSS code I am using is:
      • //Show gallery captions all the time on mobile//
        .sqs-lightbox-meta.overlay-description-visible {
         bottom: 0px !important;
        }
  • So... I am wondering if this CSS code I am already using could also be adapted to not only auto-open the lightbox but also "deactivate" the "white dot" priority as the primary "click-thru"?
  • BTW:  Whether I use the CSS code (listed above) or not, the lightbox description text links do not work on mobile devices... So, the issue is not related to using the additional CSS code.

Wondering if that would then restore the function of being able to use the lightbox description text links via mobile devices (just as they work in desktop... which does not have to use the additional "white dot" click to open the lightbox)... 

Not sure of this theory is sound... Or even is clear in how I am describing it to you!

But hoping this might lead to a solution... Regardless... I really appreciate whatever suggestions you might have!... 😎

Site URL: https://www.thisismyeverybody.com/reading-list#2022-reading-list

(will need to view URL via a mobile device to see the issue)

Edited by thisismyeverybody
  • 2 weeks later...
Posted (edited)

@tuanphan UPDATE SOLUTION:  For anyone who finds this thread or is dealing with this issue... I was able to resolve it by doing the following:

  • Limit your text links to no more than 2 different links.
  • Make sure your text does not "overflow" the lightbox container when viewing in mobile, since you can not scroll up or down in the lightbox window... I recommend no more than 12 (or less) lines of text.
  • Using "bold" font setting within the text link can also interfere with clicking-thru the text link.

Once I updated the description text of my gallery collection images to adhere to the three conditions listed above... All of my text links started working when using mobile devices.

Hope this information helps... It was incredibly frustrating to figure out, but I am thrilled everything is working great now!

Good fortune to you... 😎

PS>>> FYI:  I am still using the CSS Code (listed at the beginning of this thread) to auto-open the lightbox on mobile devices to override the need to click on the small "white dot" in order to view the lightbox on mobile devices.... Continues to work great... And now my text links do as well!

 

Edited by thisismyeverybody

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.