Property Images Plugin Technical Guide

Modified on Wed, 30 Jul at 10:47 AM

Property Images Plugin

A modern, flexible gallery widget for displaying property images in multiple layouts. Supports hero, carousel, grid, filmstrip, and single-image modes, with lightbox, responsive design, and full configuration.

Features

Multiple display modes: hero, carousel, grid, filmstrip, single
Responsive and mobile-friendly
Lightbox with thumbnail navigation
Customizable appearance (corner radius, accent color, columns, etc.)
Lazy loading and blurred placeholders
Easy integration via HTML or JS

Installation

1. Include the script

<script src="./dist/0.0.1/images.iife.js"
        data-container-id="images-container"
        data-tenant-config='{
          "apiUrl": "https://your-api-endpoint.com",
          "preset": "carousel",
          "columns": 3,
          "cornerRadius": 8,
          "brand": { "primary": "#1976d2" },
          "lightbox": true,
          "arrows": true,
          "dots": true,
          "autoplay": false
        }'></script>

2. Add the Container

<div id="images-container"
     data-property-id="8464"
     data-preset="carousel"
     data-columns="3"
     data-corner-radius="8"
     data-accent-color="#1976d2"
     data-lightbox="true"
     data-arrows="true"
     data-dots="true"
     data-autoplay="false"
     style="max-width: 900px; margin: 2rem auto;"></div>

Configuration

Presets

Value	Description
hero	Large main image + 2x2 grid (best for ≤5)
carousel	Centered slider with coverflow effect
grid	Uniform grid of images
filmstrip	Main image + horizontal thumbnail strip
single	Only the first image, large

Options

Option	Type	Description	Default
propertyId	String	ID of the property to display images for	Required
preset	String	Display style (see above)	auto
columns	Number	Number of columns (grid only)	3
cornerRadius	Number	Border radius for images (px)	8
brand.primary	String	Accent color (hex)	#1976d2
lightbox	Boolean	Enable lightbox modal	true
arrows	Boolean	Show arrows (carousel only)	true
autoplay	Boolean	Autoplay slides (carousel only)	false

Example

<div id="images-container"
     data-property-id="8464"
     data-preset="filmstrip"
     data-corner-radius="12"
     data-accent-color="#4CAF50"
     data-lightbox="true"
     style="max-width: 900px; margin: 2rem auto;"></div>

<script src="./dist/0.0.1/images.iife.js"
        data-container-id="images-container"
        data-tenant-config='{
          "apiUrl": "https://your-api-endpoint.com",
          "preset": "filmstrip",
          "cornerRadius": 12,
          "brand": { "primary": "#4CAF50" },
          "lightbox": true
        }'></script>