Installation Methods

Method 1: Direct Script Tag (Recommended)

Easiest

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>
1

Copy the script URL

Use the URL above or download the script from GitHub

2

Add to your HTML

Paste the script tag in your <head> section

HTML head section with script tag
3

Test it out

Refresh your page and click on any image

Method 3: Framer Integration

Framer specific

Perfect for Framer websites with CMS content:

Framer Custom Code section
  1. Open Framer Settings - Go to your Framer project settings
  2. Navigate to Custom Code - Find the "Custom Code" section in your settings
  3. Add the Script - Paste the script in the "Head" section and publish

Customization

The script works out of the box, but you can customize it to match your design

Modal Background

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 overlay
  • rgba(255, 255, 255, 0.9) - White overlay
  • rgba(0, 123, 255, 0.9) - Blue overlay

Image Size

Adjust the maximum size of images in the modal:

max-width: 90%;
max-height: 90%;

Change to:

  • max-width: 80% - Smaller images
  • max-width: 95% - Larger images
  • max-width: 600px - Fixed width

Close Button

Customize the close button appearance:

font-size: 30px;
color: white;

You can change:

  • Font size and color
  • Position (top, right, bottom, left)
  • Background and border
  • Replace × with any symbol

Troubleshooting

Images not clickable?

Possible causes:

  • Script not loaded properly
  • Images loaded after script initialization
  • CSS conflicts preventing clicks

Solutions:

  • Check browser console for errors
  • Ensure script is in <head> section
  • Refresh the page
  • Check if images have valid src attributes

Modal not appearing?

Possible causes:

  • Z-index conflicts
  • CSS hiding the modal
  • JavaScript errors

Solutions:

  • Check for CSS conflicts with z-index: 9999
  • Ensure images have valid src attributes
  • Check browser console for JavaScript errors
  • Try a different browser

Not working with CMS content?

Possible causes:

  • Content loads after script initialization
  • CMS uses different image structure
  • Dynamic content not detected

Solutions:

  • The script includes multiple fallback mechanisms
  • Check console logs for initialization messages
  • Wait a few seconds for content to load
  • Refresh the page

Browser Support

🌐

Chrome/Edge

Full support

🦊

Firefox

Full support

🍎

Safari

Full support

📱

Mobile Browsers

Full support