RSL Thumbnail Component

Example 1: Basic Thumbnail (Minimal Setup)

The simplest way to create a thumbnail with auto-generated accessibility:

<!-- Include required files -->
<link rel="stylesheet" href="styles/thumbnail.css">
<script src="javascript/thumbnail.js"></script>

<!-- Create thumbnail - JavaScript handles the rest -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
     data-thumbnail-header="Mountain Landscape"
     data-thumbnail-description="Beautiful vista of snow-capped peaks">
</div>

Auto-Generated Accessibility:

ALT tag: "Mountain Landscape - Beautiful vista of snow-capped peaks"
ARIA label: Comprehensive description for screen readers
Keyboard navigation: Tab to focus, Enter to activate

Example 2: Thumbnail with Link

Add a link to make the thumbnail navigable:

<div data-thumbnail-image="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop"
     data-thumbnail-header="Portfolio Project"
     data-thumbnail-description="View our latest creative work"
     data-thumbnail-link="portfolio.html"
     data-thumbnail-link-text="View Project">
</div>

Example 3: Overlay Buttons with Custom Actions

Add interactive buttons that appear on hover:

<!-- HTML -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop"
     data-thumbnail-header="Product Showcase"
     data-thumbnail-description="Premium quality items"
     data-thumbnail-button1-text="Quick View"
     data-thumbnail-button1-action="quickView"
     data-thumbnail-button1-icon="fas fa-eye"
     data-thumbnail-button2-text="Add to Cart"
     data-thumbnail-button2-action="addToCart"
     data-thumbnail-button2-icon="fas fa-shopping-cart"
     data-overlay-color="primary">
</div>

<!-- JavaScript -->
<script>
// Define custom actions as global functions
window.quickView = function(element, instance) {
    alert('Quick View: ' + instance.config.header);
};

window.addToCart = function(element, instance) {
    alert('Added to cart: ' + instance.config.header);
};
</script>

Example 4: Modal Integration

Click or press Enter to view the image in a modal:

<!-- Include modal files -->
<link rel="stylesheet" href="styles/modal.css">
<script src="javascript/modal.js"></script>

<!-- Thumbnail with modal -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&h=400&fit=crop"
     data-thumbnail-header="Gallery Image"
     data-thumbnail-description="Click to enlarge"
     data-thumbnail-modal="true"
     data-thumbnail-modal-description="Extended description shown in modal">
</div>

Example 5: Overlay Color Variants

Choose from 8 overlay colors:

<!-- Available colors: primary, secondary, success, danger, info, warning, dark, light -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=600&h=400&fit=crop"
     data-thumbnail-header="Primary Overlay"
     data-overlay-color="primary"
     data-thumbnail-button1-text="View">
</div>

Example 6: Aspect Ratio Variants

Control image dimensions with aspect ratios:

<!-- Available ratios: 1:1, 3:2 (default), 4:3, 16:9, 21:9 -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
     data-thumbnail-header="Square Thumbnail"
     data-thumbnail-aspect="1:1">
</div>

Example 7: Overlay Opacity Control

Adjust overlay transparency with three opacity levels:

<!-- Opacity options: light, medium (default), heavy -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop"
     data-thumbnail-header="Light Overlay"
     data-overlay-opacity="light"
     data-thumbnail-button1-text="View">
</div>

Example 8: Complete Responsive Gallery

Showcase RSL's grid power with a full gallery:

<!-- Responsive: 2 cols mobile, 3 cols tablet, 4 cols desktop -->
<div class="slot-layout"
     data-cols-xs="2"
     data-cols-sm="3"
     data-cols-md="4"
     data-gap="1rem">
    <div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
         data-thumbnail-header="Image 1"
         data-thumbnail-modal="true">
    </div>
    <!-- More thumbnails... -->
</div>

JavaScript API Reference

Programmatic control of thumbnails:

// Initialize all thumbnails
RSL.Thumbnail.init();

// Create a specific thumbnail
var element = document.querySelector('[data-thumbnail-image]');
var instance = RSL.Thumbnail.create(element);

// Open modal programmatically
RSL.Thumbnail.openModal(element);

// Close modal
RSL.Thumbnail.closeModal('modal-id');

// Get instance
var instance = RSL.Thumbnail.getInstance(element);
console.log(instance.config);

// Destroy thumbnail
RSL.Thumbnail.destroy(element);

Complete Data Attributes Reference

All available configuration options:

<div
    <!-- Image -->
    data-thumbnail-image="path/to/image.jpg"
    data-thumbnail-image-alt="Manual ALT override"
    data-thumbnail-aspect="3:2"              <!-- 1:1, 3:2, 4:3, 16:9, 21:9 -->
    data-thumbnail-lazy="true"

    <!-- Content -->
    data-thumbnail-header="Title"
    data-thumbnail-description="Description text"

    <!-- Link -->
    data-thumbnail-link="destination.html"
    data-thumbnail-link-text="Learn More"
    data-thumbnail-link-target="_blank"      <!-- _self, _blank -->

    <!-- Overlay -->
    data-overlay-color="primary"             <!-- primary, secondary, success, danger, info, warning, dark, light -->
    data-overlay-opacity="medium"            <!-- light, medium, heavy -->
    data-thumbnail-show-buttons="true"

    <!-- Button 1 -->
    data-thumbnail-button1-text="View"
    data-thumbnail-button1-action="functionName"  <!-- Global function to call -->
    data-thumbnail-button1-link="page.html"       <!-- OR direct link -->
    data-thumbnail-button1-icon="fas fa-eye"

    <!-- Button 2 -->
    data-thumbnail-button2-text="Download"
    data-thumbnail-button2-action="downloadFile"
    data-thumbnail-button2-link="file.pdf"
    data-thumbnail-button2-icon="fas fa-download"

    <!-- Modal -->
    data-thumbnail-modal="true"
    data-thumbnail-modal-header="Modal Title"
    data-thumbnail-modal-description="Extended description"

    <!-- Behavior -->
    data-thumbnail-disabled="false"
></div>

RSL Thumbnail Component - Playground