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


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by brandon

  1. Hi @etgilbert. Well, it's been a long time, so I don't recall if I considered or attempted other approaches. But "how it affected the outcome...", was to create colored boxes behind the images. Perhaps you mean "affected the outcome compared to some other approach" such as using pseudo elements or JavaScript. Or perhaps compared to doing something with absolute positioning and breaking the relationship between the wrapper and the contents (that could work as well). You might even be able to do it with box-shadow or background positioning. There are probably multiple ways to solve this; I suppose the one above is what seemed easiest (or fastest, or most reliable, or most easily modified later) to me at the moment.
  2. Hi Peter. If you are referring to image caption/descriptions added using this code, then it's not currently possible. However, it is something I'd like to add. Perhaps I'll do that soon.
  3. Hi @glidinsk. Thanks for taking the time to post here. I appreciate hearing that it's helped out. Also, don't forget to like/upvote the original post when you can.
  4. Hi @EllieC. I definitely want to get back to that...I can see the issue. Unfortunately it might be awhile. But I'll post back if/when I get to it.
  5. @EllieC: You mentioned that you do not have an account that allows adding custom code. Therefore you cannot add it via a code block either. That is why I mentioned the Markdown block (not the code block).
  6. @EllieC: You'll need to add both the JavaScript and the CSS components (both parts are required). The JavaScript adds the captions. The CSS styles how they display. In some cases, you can add the JavaScript to a Markdown block on the page in question. That might not work due to how the script is initialized, but you can give it a try.
  7. Hi @goodwincreative. The function receives a string as its only parameter. That means what you pass must be a string, wrapped in quotes. You can then use single quotes inside the string. Like this: addGalleryItemDescriptions("section[data-section-id='5e584f84750bff750e72e2a8']"); Also, consider using the "<>" button in the toolbar when posting code on the forums. That makes it easier to read and check your code (and helps assure that the forum doesn't mess with it in some way when posting).
  8. I think the answer to that would depend on two things: How long before Squarespace releases this caption/description feature officially. Will Squarespace allow captions underneat, not over top, of the images if/when they do release the feature. I wish I knew the answer to those, @ClareLaLou, but I honestly cannot even guess!
  9. Hi @ClareLaLou. Having spent a few minutes poking around, I think that gets a little too complicated, and not something I can do with the time I have. Because Squarespace has it setup so that images are typically matching in height, I'd have to do a bit more study on CSS grids, then test quite a lot to ensure there were no side-effects for the various galleries. So, I'm afraid, there's nothing I can do about it at the moment.
  10. Hi @KariLivs. It seems the password "demo" doesn't work. Happy to take a look if access to the page can be had.
  11. @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.
  12. @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
  13. 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
  14. I've got an idea on how to do that, @TheDrawingGal. Let me see what I can do...
  15. 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.
  16. 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.
  17. 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.
  18. What gallery type are you using, @Avalenzuela, and can you provide a link to your site?
  19. 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.
  20. 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; }
  21. 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.
  22. 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).
  23. 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; }
  24. 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
  25. @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?
  • Create New...