Anchor Link to Gallery Reel

Description

• click anchor link will scroll to specific image in Gallery Reel Slideshow
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, we will add some sample anchor links to Text, like this

#apple

#banana

#orange

#1.2. Next, we will edit Reel Images > enter url same as anchor link in #1.1

#apple

#banana

#1.3. Hover on Page where you added Reel > 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.26c04v1 Anchor Link to Gallery Reel -->
<script>
window.GalleryReelAnchorConfig = {
  reelSelector: '.gallery-reel',
  headerOffset: 0,
  pageScrollBehavior: 'smooth',
  clickDelay: 350,
  visibleFraction: 0.5,
  maxSteps: 0
};
</script>
<script src="https://code.beaverhero.com/gallerys/0826c04v1anchorlinkreel.js"></script>

#2. Customize

nothing now

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

Add this code into Markdown

<script>
window.GalleryReelAnchorConfig = {
  reelSelector: '.gallery-reel',
  headerOffset: 0,
  pageScrollBehavior: 'smooth',
  clickDelay: 350,
  visibleFraction: 0.5,
  maxSteps: 0
};
</script>
<script src="https://code.beaverhero.com/gallerys/0826c04v1anchorlinkreel.js"></script>