Clickable Images

v0.0.0

Clickable images to show multiple images in a grid. When an image is clicked a modal appears loaded with the ajax content.

The Modal is created in javascript

if .vi-clickable-images--itemlink has a data-title this is shown as title of the modal
the link in .vi-clickable-images--itemlink has the input for the modal

Use data attribute data-loading-text to change 'Loading' text.
Use data attribute data-close-button-aria-label to change close button aria-label text.

<!-- Clickable Images (mods: --modal) -->
<div class="vi-clickable-images vi-clickable-images--modal" data-close-button-aria-label="Close Modal" data-loading-text="Wait for it">
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" data-title="Iphone ennui squid." href="/api/clickable-images/modal-0.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" data-title="Biodiesel listicle forage." href="/api/clickable-images/modal-1.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" href="/api/clickable-images/modal-2.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" data-title="Pickled bushwick irony." href="/api/clickable-images/modal-3.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" data-title="Celiac umami chia." href="/api/clickable-images/modal-4.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" data-title="Farm-to-table godard kombucha." href="/api/clickable-images/modal-5.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" data-title="Skateboard vinyl chillwave." href="/api/clickable-images/modal-6.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
  <div class="vi-clickable-images__item">
    <a class="vi-clickable-images__link" data-title="Diy vinegar marfa." href="/api/clickable-images/modal-7.html" role="button">
      <!-- Rectangular Image (mods: --square) -->
      <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
    </a>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascripts are required to display this component.

The following additional javascripts are used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Added

  07 Nov 2022 - data attr data-close-button-aria-label to set label from CMS
  Initial draft


Fix

  06 Feb 2023 - [TVB-12574] Fix modal reopening issue displaying previous image in grid
  25 Jan 2023 - [TVB-12577] Clear title when data-title nullish.
  02 Dec 2022 - Skipping items when slider navigated by keyboard.
  21 Oct 2022 - Fix credits position