Image Onion Skin Web Component

A powerful web component for comparing multiple images with individual opacity controls. Perfect for before/after comparisons, design iterations, or any multi-layer image analysis.

Features

• Multi-layer Support: Compare unlimited number of images
• Individual Controls: Each overlay gets its own opacity slider
• Custom Layer Names: Use meaningful labels like "Sketch", "Final", etc.
• Responsive Design: Automatically scales and maintains aspect ratios
• Grid-Aligned Controls: Perfect slider alignment regardless of label length
• Shadow DOM Encapsulation: No style conflicts with your existing CSS
• Accessibility: Proper ARIA labels and keyboard navigation

Quick Start

1. Include the component script in your HTML:

<script src="image-onion-skin.js"></script>

2. Use the component with your images:

<image-onion-skin>
  <img src="image1.jpg" alt="Bottom image">
  <img src="image2.jpg" alt="Top image">
</image-onion-skin>

Usage Examples

Basic Two-Image Comparison

Compare two images with a single "Opacity" slider:

<image-onion-skin>
  <img src="before.jpg" alt="Before">
  <img src="after.jpg" alt="After">
</image-onion-skin>

Multiple Layer Comparison

Add multiple images for complex comparisons with individual "Layer X" controls:

<image-onion-skin>
  <img src="base-image.jpg" alt="Base layer">
  <img src="overlay1.jpg" alt="Second layer">
  <img src="overlay2.jpg" alt="Third layer">
</image-onion-skin>

Custom Layer Names

Use the data-layer-name attribute for meaningful slider labels:

<image-onion-skin>
  <img src="background.jpg" alt="Background">
  <img src="sketch.jpg" data-layer-name="Sketch">
  <img src="colors.jpg" data-layer-name="Colors">
  <img src="final.jpg" data-layer-name="Final">
</image-onion-skin>

Many Layers

No limit on the number of images you can compare:

<image-onion-skin>
  <img src="layer1.jpg" alt="Base">
  <img src="layer2.jpg" alt="Layer 2">
  <img src="layer3.jpg" alt="Layer 3">
  <img src="layer4.jpg" alt="Layer 4">
  <img src="layer5.jpg" alt="Layer 5">
</image-onion-skin>

How It Works

1. Base Layer: The first <img> element becomes the base layer (always visible)
2. Overlay Layers: Each additional <img> element becomes an overlay layer
3. Individual Controls: Each overlay gets its own labeled slider to control opacity (0-100%)
4. Custom Naming: Use data-layer-name="Custom Name" to give layers meaningful names
5. Automatic Positioning: Images are automatically positioned with proper z-indexing
6. Dimension Matching: All images are scaled to match the base image dimensions
7. Encapsulation: The component uses Shadow DOM for style encapsulation

Slider Labeling Logic

The component intelligently labels sliders based on context:

• Two Images: Shows "Opacity:" (simple case)
• Multiple Images (no custom names): Shows "Layer 2:", "Layer 3:", etc.
• Custom Names: Shows your custom name + ":" (e.g., "Sketch:", "Final:")

Use Cases

• Design Workflow: Compare sketches, wireframes, and final designs
• Photo Editing: Before/after comparisons with multiple edit stages
• Art Process: Show progression from concept to finished artwork
• Development: Compare different UI states or implementations
• Medical Imaging: Layer different scan types or time periods
• Architecture: Compare different design iterations or views

Styling

The component uses Shadow DOM, so it won't conflict with your existing styles. The built-in styling includes:

• Clean, modern appearance with rounded corners
• Smooth opacity transitions
• Grid-aligned controls for perfect slider alignment
• Responsive design that works on all screen sizes
• Professional color scheme that fits most designs

Technical Details

• Web Components API: Uses custom elements with Shadow DOM
• Slot-based Content: Uses <slot> to accept your <img> elements
• Event Handling: Listens for slider changes and image loading
• CSS Grid Layout: Modern layout for perfect control alignment
• Cross-browser Compatible: Works in all modern browsers
• No Dependencies: Pure vanilla JavaScript, no external libraries

Advanced Features

Mixed Custom and Default Names

You can mix custom names with default numbering:

<image-onion-skin>
  <img src="base.jpg">
  <img src="overlay1.jpg" data-layer-name="Sketch">  <!-- Shows "Sketch:" -->
  <img src="overlay2.jpg">                           <!-- Shows "Layer 3:" -->
  <img src="overlay3.jpg" data-layer-name="Final">   <!-- Shows "Final:" -->
</image-onion-skin>

Responsive Images

The component automatically handles different image sizes and maintains proper aspect ratios.

Error Handling

The component provides helpful error messages:

• If fewer than 2 images are provided
• If images fail to load

File Structure

image-onion-skin/
├── image-onion-skin.js    # Main web component
├── index.html             # Demo page with examples
└── README.md             # This documentation

Contributing

Feel free to submit issues, feature requests, or pull requests to improve this component!

License

This project is open source and available under the MIT License.