Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Bio page using summary block - 7.0


yo-mate-yo

Question

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!

Link to comment

9 answers to this question

Recommended Posts

  • 1
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>

image.thumb.png.dbd11d4e6e8fec82da5f6e34f9e81d4f.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

Add to Design > Custom CSS

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

 

Link to comment
  • 0

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!

Link to comment
  • 0
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;
}
}

 

Link to comment
  • 0

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!

✦✦
Co-founder Hundred Studio 👋

Link to comment
  • 0
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?

Link to comment
  • 0
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>

 

Link to comment
  • 0

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?

✦✦
Co-founder Hundred Studio 👋

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...