Bio page using summary block - 7.0

Site URL: https://www.nativeland.org/circle-of-kin

I am trying to create a mobile-friendly team bio page in which all photos are displayed in a grid without titles but not detailed bio text, and where users can select bio images to view all the individual bio text.

Here's the page: https://www.nativeland.org/circle-of-kin

I'm using Bryant and 7.0, with a Gallery Page that has been inserted on this page using a Summary Block.

Currently, on a desktop browser you can click on the photo and on hover get the text overlaid on the photos. That's fine, though I'd prefer the text not be overlaid over the photo. On tablet or mobile, however, there is only a tiny dot in the bottom right corner you can select to reveal the hover text, and it's so small most users won't ever find it and rather see a huge photo gallery.

Also, when you are on the bio page if you select the title you go into the gallery page, which I don't want.

Ideally, selecting the image and the title would go to the same place: a lightbox-type environment in which the photo appears larger and centered but not full-screen (as is currently the case), and where the text automatically appears below no matter what, with or without hover.

Any suggestions would be much appreciated. Thanks!

Add to Design > Custom CSS

/* Always show hover text */
@media screen and (max-width:900px) {
.sqs-lightbox-meta.overlay-description-visible {
    bottom: 0 !important;
}
}

Hey there, thank you for your response.  Unfortunately, this doesn’t seem to work on my site... nothing seems to change. Any idea why or what I might do to tweak the code?

Thanks!

On 5/11/2021 at 4:07 AM, yo-mate-yo said:

Hey there, thank you for your response.  Unfortunately, this doesn’t seem to work on my site... nothing seems to change. Any idea why or what I might do to tweak the code?

Thanks!

Try this code

/* Always show hover text */
@media screen and (max-width:900px) {
.sqs-lightbox-meta.overlay-description-visible {
    bottom: 0 !important;
	opacity: 1 !important;
}
}

I'd also like to create something similar but on 7.1.

The above doesn't seem to work.

I created a gallery section with images and descriptions, so on selecting an image and viewing it in lightbox it would be great to show the description. Either with the ability to style the lightbox or simply to display the description on hover.

Thanks!

20 hours ago, CraigN said:

I'd also like to create something similar but on 7.1.

The above doesn't seem to work.

I created a gallery section with images and descriptions, so on selecting an image and viewing it in lightbox it would be great to show the description. Either with the ability to style the lightbox or simply to display the description on hover.

Thanks!

You need to use JavaScript to achieve this. Can you share link to gallery? Which plan do/will you use?

Yeah no problem @tuanphan,
https://sphere-saxophone-dbsb.squarespace.com/world-development-people-not-projects
Pass: mci21hs

It'll be on a commerce plan most likely. We've already been using some custom plugins etc.

Thanks!

On 5/15/2021 at 12:35 AM, CraigN said:

Yeah no problem @tuanphan,
https://sphere-saxophone-dbsb.squarespace.com/world-development-people-not-projects
Pass: mci21hs

It'll be on a commerce plan most likely. We've already been using some custom plugins etc.

Thanks!

Add to Last line in Code Injection Footer

<script>
  var _0x2a7e=['append','ready','1RJrltI','3319ovhlOz','1KneMVr','854613oQgxUQ','1006471LEvZsj','4127469CFajRU','each','1068209VWSbJg','1oyihNW','<div\x20class=\x22lightbox-caption\x22>','.gallery-lightbox-list\x20.gallery-lightbox-item','img','find','207671zQUYko','995077PvzlQc','alt','</div>','287GdCQAi'];function _0x2dfe(_0x55be93,_0x3377c6){_0x55be93=_0x55be93-0x1eb;var _0x2a7eec=_0x2a7e[_0x55be93];return _0x2a7eec;}var _0x18b263=_0x2dfe;(function(_0x47cc5d,_0x525c24){var _0x2c6413=_0x2dfe;while(!![]){try{var _0x580ae7=parseInt(_0x2c6413(0x1f7))*parseInt(_0x2c6413(0x1fa))+-parseInt(_0x2c6413(0x1fb))*-parseInt(_0x2c6413(0x1eb))+-parseInt(_0x2c6413(0x1f0))+parseInt(_0x2c6413(0x1f1))+parseInt(_0x2c6413(0x1f9))*parseInt(_0x2c6413(0x1fe))+parseInt(_0x2c6413(0x1f4))*parseInt(_0x2c6413(0x1f8))+-parseInt(_0x2c6413(0x1fc));if(_0x580ae7===_0x525c24)break;else _0x47cc5d['push'](_0x47cc5d['shift']());}catch(_0x363f60){_0x47cc5d['push'](_0x47cc5d['shift']());}}}(_0x2a7e,0x84457),jQuery(document)[_0x18b263(0x1f6)](function(_0x491546){var _0xdc40ac=_0x18b263;_0x491546(_0xdc40ac(0x1ed))[_0xdc40ac(0x1fd)](function(){var _0x29e934=_0xdc40ac,_0x3770c7=_0x491546(this)[_0x29e934(0x1ef)](_0x29e934(0x1ee))['attr'](_0x29e934(0x1f2));console['log'](_0x3770c7),_0x491546(this)[_0x29e934(0x1f5)](_0x29e934(0x1ec)+_0x3770c7+_0x29e934(0x1f3));});}));
</script>

On 5/13/2021 at 9:40 PM, CraigN said:

I'd also like to create something similar but on 7.1.

The above doesn't seem to work.

I created a gallery section with images and descriptions, so on selecting an image and viewing it in lightbox it would be great to show the description. Either with the ability to style the lightbox or simply to display the description on hover.

Thanks!

Here a working snippet with css and js 

<style>
.gallery-lightbox-item-src {
  overflow: visible;
}
.gallery-lightbox-item-src .lightbox-caption {
  bottom: 0;
}
 .lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
   background: #fffafa;
   padding: 10px;
}
<style>
<script>
 $(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});  
</script>

Thank you @tuanphan and @bangank36, both of these work!

However, I've found @bangank36 your solution allows me to style the caption better, yet I'm struggling to get it to work right on mobile. 

Ideally if I could specify height and enable scroll to make the best use of space when the lightbox is used?

I've been trying this:
 

@media screen and (max-width: 799px) {
  .lightbox-caption {
    width: 85% !important;
    height: 90px !important;
    overflow: scroll !important;
  }
}

Though doesn't seem to work, no scroll. And does not show up on iPhone safari mobile?