Complete installation guide for adding clickable image modals to your website
Add this single line to your website's <head>
section:
<script src="https://raw.githubusercontent.com/Zibonnn/framer-img-viewer/main/image-viewer.js"></script>
Use the URL above or download the script from GitHub
Paste the script tag in your <head>
section
Refresh your page and click on any image
Perfect for Framer websites with CMS content:
The script works out of the box, but you can customize it to match your design
Change the overlay color by modifying this line in the script:
background: rgba(0, 0, 0, 0.9);
Examples:
rgba(0, 0, 0, 0.8)
- Lighter overlayrgba(255, 255, 255, 0.9)
- White overlayrgba(0, 123, 255, 0.9)
- Blue overlayAdjust the maximum size of images in the modal:
max-width: 90%;
max-height: 90%;
Change to:
max-width: 80%
- Smaller imagesmax-width: 95%
- Larger imagesmax-width: 600px
- Fixed widthCustomize the close button appearance:
font-size: 30px;
color: white;
You can change:
<head>
sectionsrc
attributesz-index: 9999
src
attributesFull support
Full support
Full support
Full support