Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

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.

alt text
alt text
alt text
alt text
alt text
alt text
alt text
alt 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="Vhs sriracha vinyl." 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="Diy kombucha slow-carb." 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="Mlkshk waistcoat tofu." 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="Cray whatever tilde." 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="Plaid flexitarian neutra." 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="Farm-to-table tilde pinterest." 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="Literally taxidermy bitters." 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.

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