Lightbox captions only?

Hi @tuanphan, I have the need to make the captions appear outside the image for mobile view. 

Your code works great for desktop mode, but not for mobile - where the captions sometimes overlap with the image. Any recommendations? 

Thanks!

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

On 8/1/2023 at 10:25 AM, AKN said:

Hi @tuanphan, I have the need to make the captions appear outside the image for mobile view. 

Your code works great for desktop mode, but not for mobile - where the captions sometimes overlap with the image. Any recommendations? 

 

Thanks!

Can you share link to gallery? We can check problem easier

On 8/6/2023 at 9:37 PM, smdreyer said:

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

Hi,

Center and appear when hovering or always appear?

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 @tuanphan, here's the link to the gallery: www.anerudhkannan.com/landing/landscapes

Here's the link to an image that exhibits the problem severely: https://www.anerudhkannan.com/landing/landscapes?itemId=dud0qzs2llzbn8k7ceryst99zyjta5

Thanks for looking into this!

On 8/10/2023 at 9:10 AM, smdreyer said:

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

 

 

Add to Design > Custom CSS or Website > Website Tools > Custom 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;
}

On 8/10/2023 at 11:24 AM, AKN said:

HI @tuanphan, here's the link to the gallery: www.anerudhkannan.com/landing/landscapes

Here's the link to an image that exhibits the problem severely: https://www.anerudhkannan.com/landing/landscapes?itemId=dud0qzs2llzbn8k7ceryst99zyjta5

Thanks for looking into this!

Add this to Design > Custom CSS or Website > Website Tools > Custom CSS

/* Mobile fix lightbox caption overlap image */
@media screen and (max-width:767px) {
.light-caption {
    width: calc(~"100% - 10px") !important;
    padding-right: 5px;
    padding-left: 5px;
}
}

This worked well, Thanks!

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

Tuan,

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

See attached.

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

Steve

On 8/13/2023 at 2:56 AM, smdreyer said:

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

Steve

Can you send all current code?

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;
}

14 hours ago, smdreyer said:

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;
}

I see your site has 432 lines, I mean all.

If you are sure all of the above code is correct, it is probably an SS bug, you can save, reload the site and check in incognito window

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:

On 8/17/2023 at 3:42 AM, smdreyer said:

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:

 

 

The site is private

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

18 hours ago, smdreyer said:

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

Change this to lowercase

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

14 hours ago, smdreyer said:

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

Use this CSS code to adjust description

/* title */
.yui3-lightbox2 .sqs-lightbox-meta h1 {
    font-size: 30px;
}
/* Description */
.yui3-lightbox2 .sqs-lightbox-meta p:last-child {
    font-weight: bold;
    margin-top: 30px;
}

Thanks Tuan!

Steve

I have tried to do the same (adding Image description on SS 7.1 on the Lightbox of a Gallery section with Masonry style (I managed to sort out the hover on that etc, just missing some formatting and styling).

The problem I have though is that when the Lightbox is open it works perfectly when advancing to the next image via mouse click on the arrows.

However, when using the keyboard arrows or more crucially swiping on mobile, it doesn't advance the caption until a click event from the mouse or a tap on the image. 

Anyone knows how to fix that? 

Here's the code I used: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    var texts = document.getElementsByClassName('gallery-caption-content');
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){
        var text = texts[idx]
        var id = $(ele).attr('data-slide-url')
        if (text) {
            $(ele).append('<div id="' + id + '" class="light-caption">'  + text.innerHTML + '</div>');
            
            if ($(ele).attr('data-active')) {
                $(`#${id}`).css('visibility', 'visible')
            }
        }
    })
    $('.gallery-masonry-lightbox-link').click(function() {
        var id = $(this).attr('href').split('=')[1]
        $('.light-caption').css('visibility', 'hidden')
        $(`#${id}`).css('visibility', 'visible')
    })
    $('.gallery-lightbox').click(function() {
        $('.light-caption').css('visibility', 'hidden')
        var id = location.search.split('=')[1]
        $(`#${id}`).css('visibility', 'visible')
    })
})
</script>

On another note, there is another code that doesn't have this problem, but uses the "alt" tag of the image and not the caption / description. Maybe it can be modified. 

It has a small glitch (I saw someone else note this already but don't recall in which thread) that the caption text advances around 1s slower than the image and overlaps briefly, looking a bit odd. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>

(For anyone else wanting to use these two ways, they require CSS styling).

My site is public: https://theflore.com/portfolio-1 

Does anyone have a clue how to address this? Willing to pay for a solution.

On 10/1/2023 at 9:31 PM, Flore said:

Does anyone have a clue how to address this? Willing to pay for a solution.

@Flore what exactly are you looking for? just description in lightbox? Try this solution, it worked for me. Although others mentioned there might be mobile version issues, which I haven't tested yet!

https://forum.squarespace.com/topic/164356-lightbox-captions-only/?do=findComment&comment=646704

16 minutes ago, melody495 said:

@Flore what exactly are you looking for? just description in lightbox? Try this solution, it worked for me. Although others mentioned there might be mobile version issues, which I haven't tested yet!

https://forum.squarespace.com/topic/164356-lightbox-captions-only/?do=findComment&comment=646704

Thank you - this solution has the problem of the text not advancing in line with the image, there's a small delay in my test. 

Can you share a link to your site?