Well Gallery v2 – @tuanphan

Description

recreate Well Gallery (Slideshow) style in Squarespace 7.1
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, click Add Section

#1.2. Click Image > Choose Section with (i) icon

#1.3. Hover on top right of section > Click EDIT SECTION

#1.4. Make sure you use Grid: Masonry

#1.5. at Anchor Links, enter word: well-gallery

#1.6. Hover on Page where you use Grid: Masonry > Click Gear icon

Click Advanced > Paste this code.

If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1

<!-- 05.26c08v3 Well Gallery v2-->
<script>
window.GalleryToggleConfig = {
  autoplay: false,
  autoplayDelay: 3000,
  effect: 'slide',
  hoverOpacity: 0.7,
  slideBackground: 'transparent',
  slideMaxHeight: '100vh',
  slideMaxWidth: '60%',
  sectionSelector: 'section[id*="well-gallery"]',
  masonryEnabled: false,
  mobileView: 'slideshow',
  captionFontSize: '13px',
  navFontSize: '13px',
  captionMaxWidth: '200px',
  labelPrev: 'PREV',
  labelNext: 'NEXT',
  labelShowThumbnails: 'SHOW THUMBNAILS',
  onShowSlideshow: null,
  onShowMasonry: null,
  onSlideChange: null
};
</script>
<script src="https://code.beaverhero.com/gallerysmasonry/0526c08v3wellgalleryv2.js"></script>

#2. Customize

#2.1. To add Caption text here

You need to enable Gallery Captions

Then add some caption text to Image Description

#2.2. To change Prev/Next text, change Line 17, Line 18

labelPrev: 'PREV',
 labelNext: 'NEXT',

#2.3. To change Prev/Next/Caption text size, change Line 14, Line 15

captionFontSize: '13px',
  navFontSize: '13px',

#2.4. To set limit width of Caption text, change Line 16

captionMaxWidth: '200px',

#2.5. On Mobile, to make Gallery Masonry/Grid show on initial, you can change Line 13

mobileView: 'slideshow',

mobileView: 'masonry',

#2.6. To disable Loop, you can change Line 06

effect: 'slide',

effect: 'slide',
  loop: false,

Remember to clear browser cache or check in another browser to see the change.

#2.7. If you need to tweak more code, you can use Claude AI or Robo-Will Chatbot

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Grid: Masonry) > Then add a Block

Choose Markdown

Then add this code into Markdown

<script>
window.GalleryToggleConfig = {
  autoplay: false,
  autoplayDelay: 3000,
  effect: 'slide',
  hoverOpacity: 0.7,
  slideBackground: 'transparent',
  slideMaxHeight: '100vh',
  slideMaxWidth: '60%',
  sectionSelector: 'section[id*="well-gallery"]',
  masonryEnabled: false,
  mobileView: 'slideshow',
  captionFontSize: '13px',
  navFontSize: '13px',
  captionMaxWidth: '200px',
  labelPrev: 'PREV',
  labelNext: 'NEXT',
  labelShowThumbnails: 'SHOW THUMBNAILS',
  onShowSlideshow: null,
  onShowMasonry: null,
  onSlideChange: null
};
</script>
<script src="https://code.beaverhero.com/gallerysmasonry/0526c08v3wellgalleryv2.js"></script>