brandon

@underscore, that should all be doable using CSS. For example, I've added `pointer-events:none` to the previously posted code. That prevents the hover from interfering with the click.

To get a full width/height color overlay, it's simply a matter of altering the CSS in the original answer that includes the CSS portion of the code (you don't have to alter the JavaScript part).

Another concern I'll share with you is this: consider what will happen for viewers who are on mobile/touch devices with no "hover" state? You're going to have to consider that, and write custom CSS accordingly. Keep in mind, there is currently no way to detect whether a device has a hover state or not (many Windows-based devices can be either or both at any given time). That is why I usually avoid hover-based UI in general (despite the fact that I am rather familiar with all of the various workarounds and have written quite a lot of code related to it).

In any case, as I said you should be able to achieve what you're after using only CSS. If you need additional customization, you'll want to consider hiring a developer to help you.

@underscore. Are you comfortable editing and writing CSS? If so, it's simply a matter of editing the applicable CSS in the original post. However, you can add this to it if you'd rather do that:

.gallery-strips-item .gallery-item-description {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.gallery-strips-item:hover .gallery-item-description {
  opacity: 1;
}

If that doesn't work, it's probably because you're not actually using the "strip" gallery design, but rather are using some other gallery design. In that case, it's just a matter of changing `.gallery-strips-item` to the corresponding class for your gallery type.

-Brandon

This can likely be solved by inserting the following CSS via the CSS Editor/Custom CSS:

.sqs-mobile-info-bar-hide {
  transform: none !important;
}

-Brandon

I've got an idea on how to do that, @TheDrawingGal. Let me see what I can do...

Yes, you could define fixed heights and overflow-y properties to achieve consistent caption sizes @Avalenzuela. It's a matter of writing some additional CSS, testing it out, optimizing it (in case it's more efficient to edit the source as opposed to overriding it), etc. That's a bit beyond what can be provided here on the forum for free, however.

Well, the code I wrote is specifically for galleries, @nwatkins. It could be repurposed for images; it might even work as-is by passing in different selectors. But that'd take some additional development time, testing, etc.

Yes, you can do that @Avalenzuela. You can add this:

.gallery-masonry .gallery-item-description {
  position: relative;
}

Of course, rather than add more code as an override, you could instead edit the source CSS that I provided in my original post so that the descriptions are relatively positioned. That'd be cleaner. You'll probably want to customize the look in other ways too.

What gallery type are you using, @Avalenzuela, and can you provide a link to your site?

Hi @emmaj.

A1: There are a couple ways to do this. The JavaScript is setup so that you can pass in your own CSS selector. That allows you to set which galleries get descriptions (by default, all of them do). In your case, it sounds like you only want to select gallery lightboxes. So replace this line in the JavaScript:

addGalleryItemDescriptions();

with

addGalleryItemDescriptions(".gallery-lightbox");

An alternative way (instead of the above) would be to simply leave the JavaScript alone (so all galleries would still have descriptions) but then hide it on certain galleries using CSS. You'd use your browser's inspector/developer tools to find the correct selectors and write the CSS. Something like this might work:

section.gallery-section .gallery-item-description {
  display: none !important;
}

A2:

.gallery-item-description {
  text-align: left;
}

A3:

This would technically be possible by using the image file name as the title. You'd be sure you name your file "This is my title.jpg", then the JavaScript component of the code I wrote could be amended to add that as the title (minus the file extension ".jpg".). That'd take a fair bit of additional custom development time, but it is possible.

Yes, @AtelierDeux. In the CSS where you see ".gallery-item-description", within that scope (within the curly braces), add your letter-spacing rule. It'd end up looking something like this:

.gallery-item-description {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: black;
  letter-spacing: .2em;
}

Great - glad it's working for you @AtelierDeux. Don't forget to support the original post by liking/reacting accordingly! It's a small thing, but good to see how many people it's helping.

Hi @AtelierDeux. The reason you're seeing raw code displayed on your site is due to inserting the code in the wrong location.

I've updated the original post to include links that explain how to add the code. Note that you have to use both the CSS and the JavaScript together, and insert them both according to the directions. In your case, you're using per-page header code injection which may also work, but best to do as the directions say (and now link-to).

Hi @technopaul.

You could add the following to the CSS, where appropriate (depending on whether you want the rule to apply globally or just to a specific gallery or type of gallery):

.gallery-item-description {
  pointer-events: none;
}

Related Questions with Possible/Related Answers:

• https://forum.squarespace.com/topic/151557-brine-productsgallery-moving-alternative-imagesthumbnails-to-the-right-of-the-main-image/#comment-332321
• https://forum.squarespace.com/topic/8841-feature-req-product-gallery-thumbnail-layout-location/?tab=comments#comment-50080

Other Related Questions:

• https://forum.squarespace.com/topic/1551-moving-product-thumbnails-brine-template/?tab=comments#comment-9130
• https://forum.squarespace.com/topic/151905-slideshow-gallery-moving-thumbnails-to-the-right-of-the-main-image/#comment-333451

Another Possible Answer:

• https://www.sqspthemes.com/blog/vertical-product-thumbnail-gallery

@IvanOB: I'll take a look and see if things can be tweaked easily. If you can provide a link to an example page, it might speed things up.

@SW_2020: This might be doable. If you can provide a link to a page that shows the issue, that'd be great. Otherwise, I'll do what I can to recreate it in my own demo (but that might not be easy). Also, what gallery style are you using?

The summary is, basically, to wrap your code like this:

<script>
  window.Squarespace.onInitialize(Y, function() {
    //Your code here...
  });
</script>

Related:

For what it's worth, for templates based on Brine , the number of concerns when creating a fixed header are much greater than is typically appreciated, and include:

• differences between index and non-index pages
• differences between first-child index sections with image vs without.
• whether you have the headers set to overlap on index pages
• what headers (top/bottom) are enabled
• whether the screen is resized
• whether the announcement bar is used
• whether the announcement bar is used but then closed by user
• whether text in the announcement bar is wrapped when screen width changes
• whether the header covers up content when anchor links (same-page "jump" links) are used
• whether then navigation wraps or font size changes on width change (and therefore header height changes, and therefore necessary padding)
• whether you want the header fixed on mobile (and again, whether you also want the announcement bar fixed on mobile along with it)
• whether you have the mobile information bar (MIB) enabled for mobile devices.
• and more.

A lot of these issues have been around...for years.

If you have a very simple use case and manage to avoid all of the above (and more) concerns, basic CSS like position:fixed or position:sticky can indeed be used. For other cases, a CSS-only approach will cause some problems that you may not detect (but your users probably will). For those cases, I created Fixit - Fixed Headers for Squarespace - Brine.

It also adds the ability to add/remove a CSS class at the scroll-distance of your choice, making it fairly easy to adjust navigation color, background color, text size, opacity, etc. when scrolled.

Finally, note that using onScroll as proposed in the code samples above is not the most performant way to go about solving the issue. It better to also leverage requestAnimationFrame and/or setInterval when doing such things with onScroll.

-Brandon

Yes, @hmfedders. You could do something like this, which would hide the description in a specific gallery on every-other item:

[data-section-id="5db2f35f9ff0e37436549a65"] .gallery-grid-item:nth-child(even) .gallery-item-description {
  display: none;
}

Or you could target a list of gallery items individually by using their data-slide-url attribute:

.gallery-grid-item[data-slide-url="1m274ar58gglbeuorp6quol3tmkhel-lx99y"] .gallery-item-description {
  display: none;
}

Do keep in mind that in the above examples, the data-section-id and data-slide-url would need to be changed to match your website. You can obtain these attributes using your browser's developer tools/inspector.

  Hi @NuprinBoy.

You understood correctly. You can control which galleries get descriptions by sending a CSS selector to the function. In your case, try this: In the first line of code in the function replace

addGalleryItemDescriptions();

with:

addGalleryItemDescriptions(".gallery-lightbox");

If that doesn't work, provide a link to the site/page in question and I'll take a look.

-Brandon

1 hour ago, NuprinBoy said:

does that mean the original post is updated

Yes, that's correct.

Good find @paul2009. That's an example of code I don't even remember writing. One time I went looking for a coding solution I couldn't solve, and was happy when I found it on Answers. Then I realized it was my own answer...

I agree with Paul. Having said that, I once had a client that insisted against my repeated advice. I managed to convince them to only have it blink a few times and only on the home page. Something like this:

.homepage .sqs-announcement-bar-dropzone {
  animation: flash 0.9s linear;
  animation-iteration-count: 4;
}

@keyframes flash {
  50% {opacity: 0.5;}
}

There may be better approaches, of course.

Hi @VLabrie.

I have implemented Flickity on multiple Squarespace websites, and it's a great library. However, it's really more of a developer's gallery tool/module than something you implement on top of a Squarespace gallery. In other words, it's its own gallery module in itself. It could be used without developer mode, but would likely be more cumbersome than would be reasonable to implement.

For slideshow gallery blocks (and other blocks and contexts too), I created Swipeable Galleries for Squarespace. Now, to clarify, it does not alter the transition of images (as in, if your gallery fades, it will still fade...but gestures will trigger the transition) nor does it add touch/track-pad swiping (such as two-finger swipe for horizontal scroll). It focuses on touch devices (tablets, phones, most Windows-based laptops these days, etc.), and adds swipeability to those. So, it doesn't check all your boxes, but it may suffice.

I hope that helps.

-Brandon

Regarding the logo wall, that's strange @jonaverill. I'll have to swing back and see if I can duplicate it using a single section.

Regarding adding a link to a gallery image:

• I find adding links to gallery images in 7.1 to be quite fiddly. I'll set a link, click on another image, make some changes, then save the section. When I go back, the link I added isn't saved anymore. I found it works best if I set the link then immediately hit the "Close" link on the section.
• I've updated the code in my original answer to accommodate gallery items that have links added to them. It requires just a couple minor changes to both the JavaScript and the CSS.
• I don't think it's possible to add links to "slideshow" type galleries of any kind. I guess that sort of makes sense, but I wanted to point that out.