Disable Lightbox on Mobile 7.0 (Avenue)

I'd like to disable the lightbox but ONLY on mobile.  I have it set up now to show the lightbox on desktop and mobile (the default when you select lightbox for a page in an index in Avenue).  I'm okay with it on desktop because visitors generally won't pinch zoom, but I don't like the lack of pinch-zoom on mobile (like mostly everyone using Squarespace).

So I am okay just seeing the images stacked with their titles on mobile so they can be scrolled and pinch-zoomed.

Site: www.stevedreyer.com. On mobile, tap Collections, then NYC to see what I mean.

Thanks.

You mean disable lightbox when clicking on images on mobile?

https://stevedreyer.com/collections#/nyc/

Hi Tuan,

Thanks for the reply. Yes, that's what I wanted to do because (as you know) you can't pinch-zoom on mobile when you enable the lightbox. So I only wanted the index thumbnails to show on the phone and to eliminate clicking on one - which would otherwise bring up the lightbox. In the meantime, I did a workaround.

You can see the difference on my site at www.stevedreyer.com (do so with mobile).

1- Go to "Collections" then "Urbanscapes". This is how it originally worked. When you click on that you get index thumbnail images on the phone, with their titles.  If you click on any image there it goes to the lightbox.  I have the title of that image there, but cannot pinch-zoom to make it larger (which is what most people would do!).

2- Workaround:

In the Collection index (again on mobile), go to "New York City" (this is my workaround). The thumbnails are stacked on mobile and desktop without the lightbox feature turned on.  You cannot click on the thumbnail image on the phone, BUT, you can pinch-zoom.

That's what I requested in my question, because it's enough to see the thumbnails on the phone.

HOWEVER, in order to do that I had to change the page for desktop (no thumbnails, no lightbox).  But I think that's better than not having pinch-zoom with lightbox on mobile.

HOPE THIS MAKES SENSE.

PLEASE NOTE: I need to get this done for an exhibit, but will hold off for a while until you or someone has a chance to look into the question. But ultimately, I may need to change my pages (including Urbanscapes) to the way I'm doing it with New York City.

This may be valuable to others, so I still think it's worth investigating.

Thanks.
Steve

Try adding to Design > Custom CSS

/* Disable mobile lightbox */
@media screen and (max-width:640px) {
body.collection-type-index.view-list .slide a {
    pointer-events: none !important;
}
}

Thanks Tuan!

I added the code, with these results.

1- It does work on the iPhone in vertical position.

2- It does not work on the phone if in horizontal position.

3- It does not work on the iPad in both positions.

Maybe a modification to the code for 2 and 3?

Appreciate it.

Steve

Yes. Because 640px is for mobile portrait only

Use this new code

/* Disable mobile lightbox */
@media screen and (max-width:900px) {
body.collection-type-index.view-list .slide a {
    pointer-events: none !important;
}
}
@media screen and (max-width:900px) and (orientation:landscape) {
body.collection-type-index.view-list .slide a {
    pointer-events: none !important;
}
}

Hello !

I'm looking for CSS to disable lightbox on mobile but with Squarespace 7.1, any suggestion ?

I will come back here if I found the solution.

On 2/29/2024 at 3:31 PM, PurpleFox said:

Hello !

 

I'm looking for CSS to disable lightbox on mobile but with Squarespace 7.1, any suggestion ?

 

I will come back here if I found the solution.

Lightbox of Image Block, Gallery Section, Form Lightbox, Quick View Lightbox or? If you share link to page where you want to do this, we can help easier

On 3/5/2024 at 8:51 AM, tuanphan said:

Lightbox of Image Block, Gallery Section, Form Lightbox, Quick View Lightbox or? If you share link to page where you want to do this, we can help easier

Thanks, it was Gallery Section, but I've abandoned the project in the meantime!