Jump to content

Gallery - captions, lightboxes and filters

Recommended Posts

I'm new to squarespace so excuse me if these questions are very basic! I'm a travelling landscape photographer and wanting to set up a site to showcase my work. At the moment I have set up a "gallery" page, which takes you to an index/list detailing different locations (e.g. Australia, north america) and buttons you can click to take you to the individual galleries for those places.

1) I have created a gallery grid on each location page with various images. How do I make the lightbox overlay dark? And how do I have it so my descriptions come up as captions on the lightbox?

2) I want a section at the top where users can filter the photographs. For example, on my Australia page I have around 50 images. I want to be able to filter them via state e.g. "Western Australia", "New South Wales" etc..

Basically, I want a gallery similar to this: 

https://thomasheaton.co.uk/gallery/

I'm on the verge of giving up and ditching squarespace altogether, please help.

Link to comment
  • Replies 21
  • Views 1.8k
  • Created
  • Last Reply
17 minutes ago, artgirl81 said:

Oh Thanks for the info, and for your help. Here's a quick screen record --- see how it says "description" and then nothing shows around the image? Shouldn't there be a caption on the image? That's what I want. Thanks, A

captions222.mov

You can use this tool to make video online or upload to youtube & share link.

http://loom.com/

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, artgirl81 said:

Posted the youtube clip. Can you see it? Thanks!

ah I see. If you use Business Plan or higher, add this to Home > Settings > Advanced > Code Injection > Footer

<script>
/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * JavaScript 
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions();
	
  function addGalleryItemDescriptions(gs, gdzs) {
    var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
  }
});
</script>

Code by @brandon - SS Forum.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

and if you don't use Business Plan or higher you can just turn captions on - 

 

Quote

 

Style the gallery

To customize your gallery, you can change the layout, colors, and aspect ratio, enable captions, and more. To style a gallery section:

  1. On the page with the gallery section, click Edit.
  2. Hover over the gallery section, and click the pencil icon.
  3. In the Gallery tab, change the layout with the Gallery Type drop-down menu.
  4. Below Gallery Type, make style changes to the current layout, like spacing and image height, or enable captions. These options vary between layouts.
  5. Click the Colors tab to choose a color theme. 
  6. Click Save.

 

  1. from https://support.squarespace.com/hc/en-us/articles/360035636332-Gallery-sections-in-version-7-1
Link to comment
1 hour ago, gkennedy said:

and if you don't use Business Plan or higher you can just turn captions on - 

 

  1. from https://support.squarespace.com/hc/en-us/articles/360035636332-Gallery-sections-in-version-7-1

Yes. SS team just updated 2 days ago

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
16 hours ago, avalera21 said:

Hey @tuanphan!

Is it possible to make adjustments to the caption with the new SS release? I would like to have it appear in the middle image on hover.

Thank you in advance 🙂

T do this hover effect, you need to use CSS. Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/1/2020 at 8:39 AM, avalera21 said:

Hey @tuanphan!

It's alyssavalera.com
password: coffee21

Add to Home > Design > Custom CSS

figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    z-index: 999;
}
.gallery-masonry-item:hover figcaption {
    opacity: 1;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 9/29/2020 at 6:49 PM, Nadiakh said:

Hey, I'm having a similar issue. I'd like my captions to appear either hovering or in the lightbox (not below the gallery images). 

Here's the page, pw: Nadia

https://guitar-tambourine-dk7g.squarespace.com/photos 

Can you add some demo captions? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.