smdreyer

Thanks Tuan! Steve

Tuan, Thanks! Works great. If you go to www.stevedreyer.com and click on the Asia Collection and then the first image (Terra Cotta Warriors) you'll see the Title and one line of Description. All others don't have the description. I changed the code to -40px (from -30px) in order to see both on the desktop. Not urgent, but it would be great if I had control over the Title font (all caps is the default), the description font (looks bold) and the amount of space between the title and the description lines under the Lightbox image. Thanks so much for your help on this. I think others will benefit too, if they don't like the mouse-over default of the Lightbox function!! Steve

Tuan, Thanks. I set it up as available with a password. URL: https://armadillo-trout-neel.squarespace.com/ or directly to the page, here: https://armadillo-trout-neel.squarespace.com/images PW: tuantest This is a temporary site and it will only be there for a couple of days (it's a trial). Thanks, Steve

Tuan, I created a new temporary site using Avenue (same as my production site at stevedreyer.com. Here's the URL of the temporary site. Click on "images" in the menu. It's set up for a lightbox with a title for the images. https://armadillo-trout-neel.squarespace.com/config/design/custom-css I pasted the code that was provided in this thread (no other code is in the CSS window). See the code and the error message. So this has nothing to do with my over 400 lines of CSS in my production site. Here's the code and then a screenshot of the whole CSS. Code: /* move title under image lightbox */ .yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background-color: transparent !important; padding: 0px !important; bottom: -30px !Important; } .sqs-lightbox-slideshow .sqs-gallery-design-stacked-slide img { top: -30px !important; } .yui3-lightbox2 .sqs-lightbox-meta * { color: black !important; text-align: center; } Screen Shot with Error Msg:

Tuan, The current code is this - from the above thread. I copied it and placed it in the CSS: /* move title under image lightbox */ .yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background-color: transparent !important; padding: 0px !important; bottom: -30px !Important; } .sqs-lightbox-slideshow .sqs-gallery-design-stacked-slide img { top: -30px !important; } .yui3-lightbox2 .sqs-lightbox-meta * { color: black !important; text-align: center; }

It's the complete code - the error msg just over wrote the remainder. I tried this several times. Steve

Tuan, Not sure why, but the code results in a syntax error. See attached.

It would be fine if it's always there for each image in the lightbox (not on hover) - either the description or the title or both for each image. It would be great if the font is customizable, but if it's black I'll make sure the background of the screen is white). Centered to the image cell, UNDER the image (not over it). This would need it to work on mobile and iPad in both portrait and landscape orientation, and I wouldn't want the "dot" to appear in the lower right, which is the default for lightbox images with title/descriptions. As a minimum, I'd be happy with it looking like this (not a Squarespace site). http://farber.com/collections/new-york-mood.php#gallery-28 Thanks, Steve

It would be fine if it's always there for each image in the lightbox (not on hover) - either the description or the title or both for each image. It would be great if the font is customizable, but if it's black I'll make sure the background of the screen is white). Centered to the image cell, UNDER the image (not over it). This would need it to work on mobile and iPad in both portrait and landscape orientation, and I wouldn't want the "dot" to appear in the lower right, which is the default for lightbox images with title/descriptions. As a minimum, I'd be happy with it looking like this (not a Squarespace site). http://farber.com/collections/new-york-mood.php#gallery-28 Thanks, Steve

Hi Tuan, Sure, here's the link to the site. www.stevedreyer.com. Enter it and go to Collections in the menu. All the "collections" (except for New York City) use the Lightbox function. Try "Paris" as an example or the others that use the Lightbox where each image has a Title that currently appears on mouse-over. I'd like either the Title and/or the image description centered UNDER the Lightbox image on desktop, mobile and iPad. Preferably with control over the font - but that's not the most important thing. Thanks for trying.... Steve

Tuan, I'd like to be able to have the lightbox on desktop and mobile to work as in this posting, where the title and/or the description is UNDER the image (not overlayed). It looks great with what was done for 7.1, but I am using Avenue in 7.0 (business plan). Thanks, Steve

Tuan, Got it, yes - looks good. Thank you! Steve

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

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

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.