Gallery Expand Button

Description

• adding load more button to gallery grid, gallery masonry, gallery strips
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Hover on top right of gallery > Click EDIT SECTION

#1.2. at Anchor Link, enter word: gallery-expand

#1.3. Hover on Page where you use Gallery > Click Gear icon

#1.4. Click Advanced > Paste this code

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

<!-- 08.26c25v1 Gallery Expand Button -->
<script>
window.GalleryExpandButtonOptions = {
  initialItems: 8,
  itemsPerClick: 4,
  loadMoreText: 'Load more',
  buttonTextSize: '',
  buttonPadding: '',
  buttonBackground: '',
  buttonColor: '',
  buttonBorderRadius: '',
  buttonBorder: '',
  hoverBackground: '',
  hoverColor: '',
  hoverBorderColor: ''
};
</script>
<script src="https://code.beaverhero.com/gallerys/0826c25v1galleryexpandbutton.js"></script>

#2. Customize

#2.1. To show number of images initial, change line 04

initialItems: 8,

#2.2. To set number of images on click load more button, change line 05

itemsPerClick: 4,

#2.3. To change load more text, change line 06

loadMoreText: 'Load more',

#2.4. To change button style (by default, it uses Primary button style), change line 07 – 15

buttonTextSize: '',
buttonPadding: '',
buttonBackground: '',
buttonColor: '',
buttonBorderRadius: '',
buttonBorder: '',
hoverBackground: '',
hoverColor: '',
hoverBorderColor: ''

you can set value like this

buttonTextSize: '15px',
buttonPadding: '5px 10px',
buttonBackground: '#000',
buttonColor: '#fff',
buttonBorderRadius: '50px',
buttonBorder: '#000',
hoverBackground: '#fff',
hoverColor: '#000',
hoverBorderColor: '#fff'

#2.5. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#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 Gallery) > Add a Block > Choose Markdown

Add this code into Markdown

<script>
window.GalleryExpandButtonOptions = {
  initialItems: 8,
  itemsPerClick: 4,
  loadMoreText: 'Load more',
  buttonTextSize: '',
  buttonPadding: '',
  buttonBackground: '',
  buttonColor: '',
  buttonBorderRadius: '',
  buttonBorder: '',
  hoverBackground: '',
  hoverColor: '',
  hoverBorderColor: ''
};
</script>
<script src="https://code.beaverhero.com/gallerys/0826c25v1galleryexpandbutton.js"></script>