Hover Image – Show Popup

Description

hover (or click) an image show custom popup
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, create 2 Pages in Not Linked with Name/URL like this

Popup Content 01 – /popup-content01

Popup Content 02 – /popup-content02

#1.2. Adding desired content to both pages

#1.3. Edit Image Block > Add URL use this format

#sqsplightbox=/page-url-slug

for example

#sqsplightbox=/popup-content01

#sqsplightbox=/popup-content02

#1.4. Hover on Page where you use Image Blocks > Click Gear icon

#1.5. Click Advanced > Paste this code

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

<!-- 06.26c29v7 Hover Image - Show Popup -->
<script>
window.ImagePopupConfig = {
  trigger: "hover",
  linkMarker: "#sqsplightbox=",
  linkSelector: "a[href*='#sqsplightbox=']",
  contentSelector: "#page",
  reinitBlocks: true,
  overlayColor: "rgba(0, 0, 0, 0.75)",
  overlayBlur: "0px",
  popupBackground: "#ffffff",
  popupWidth: "90%",
  popupMaxWidth: "900px",
  popupMaxHeight: "85vh",
  popupBorderRadius: "10px",
  popupShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
  closeButtonColor: "#ffffff",
  closeButtonBackground: "#000000",
  closeButtonSize: "30px",
  animationDuration: "300ms",
  closeOnEscape: true,
  lockScrollOnClick: true
};
</script>
<script src="https://code.beaverhero.com/imageblock/0626c29v7hoverimgshowpopup.js"></script>

#2. Customize

#2.1. To make popup appears on Click only, change Line 04

trigger: "hover",

trigger: "click",

#2.2. To change overlay color, change Line 09

overlayColor: "rgba(0, 0, 0, 0.75)",

#2.3. To change Popup size, change Line 12 – Line 14

popupWidth: "90%",
popupMaxWidth: "900px",
popupMaxHeight: "85vh",

#2.4. To change Close Icon style, change Line 17 – Line 19

closeButtonColor: "#ffffff",
closeButtonBackground: "#000000",
closeButtonSize: "30px",

#3. Other

#3.1. If you use Personal/Basic Plan and it doesn’t support Injection, you can edit current page (page where you use Image Blocks) > Add a Markdown Block

Add this code into Markdown Block

<script>
window.ImagePopupConfig = {
  trigger: "hover",
  linkMarker: "#sqsplightbox=",
  linkSelector: "a[href*='#sqsplightbox=']",
  contentSelector: "#page",
  reinitBlocks: true,
  overlayColor: "rgba(0, 0, 0, 0.75)",
  overlayBlur: "0px",
  popupBackground: "#ffffff",
  popupWidth: "90%",
  popupMaxWidth: "900px",
  popupMaxHeight: "85vh",
  popupBorderRadius: "10px",
  popupShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
  closeButtonColor: "#ffffff",
  closeButtonBackground: "#000000",
  closeButtonSize: "30px",
  animationDuration: "300ms",
  closeOnEscape: true,
  lockScrollOnClick: true
};
</script>
<script src="https://code.beaverhero.com/imageblock/0626c29v7hoverimgshowpopup.js"></script>