Swap Gallery Image on Hover/Click

Description

change gallery image to another image on hover (or click)
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Make sure you use Grid Simple gallery

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

at Gallery > Anchor Link > enter word: swap-image

#1.3. Hover on top right of gallery > Click EDIT CONTENT

#1.4. Enter Hover Image URL in Link field

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

#1.6. Click Advanced > Paste this code

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

<!-- 08.26c03v5 Swap Gallery Image on Hover/Click -->
<script>
  window.SwapGalleryImageConfig = {
    sectionSelector: 'section[id*="swap-image"]',
    trigger: "hover",
    transitionMs: 400,
    preventNavigation: true
  };
</script>
<script src="https://code.beaverhero.com/gallerysgrid/0826c03v5swapimghover.js"></script>

#2. Customize

#2.1. To make swap image effects on click only, you can change this line

trigger: "hover",

trigger: "click",

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

Add this code into Markdown

<script>
  window.SwapGalleryImageConfig = {
    sectionSelector: 'section[id*="swap-image"]',
    trigger: "hover",
    transitionMs: 400,
    preventNavigation: true
  };
</script>
<script src="https://code.beaverhero.com/gallerysgrid/0826c03v5swapimghover.js"></script>