0.46.0
Changelog
Components

Image Gallery

Gallery title heading type (h2, h3, etc.) should be interchangeable through the editing interface. Minimum width for the thumbnail image is 250px for 2x retina support. Users should upload the higher resolution version of the image for the larger pop up size image; a thumbnail image should be generated through your application or uploaded as a separate image.

Image gallery requires a JavaScript plugin which is documented within the JavaScript section of the style guide.

If you are including multiple image galleries on a page (even single image galleries), you need to ensure that each gallery instance assigns a unique rel attribute on the <a> tag that names the gallery and groups each gallery. This prevents the user from jumping to the next image gallery unintentionally.

JavaScript class: .js-image-gallery-item

Sample photo gallery

<div class="c-image-gallery">
  <h3 class="c-image-gallery__title">Sample photo gallery</h3>
  <ul class="c-image-gallery__list">
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_01.jpg" title="Image 1">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_01.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_02.jpg" title="Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long.">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_02.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_03.jpg" title="Image 3">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_03.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_01.jpg" title="Image 1">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_01.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_02.jpg" title="Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long.">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_02.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_03.jpg" title="Image 3">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_03.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_01.jpg" title="Image 1">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_01.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_02.jpg" title="Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long.">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_02.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_03.jpg" title="Image 3">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_03.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_01.jpg" title="Image 1">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_01.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_02.jpg" title="Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long.">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_02.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_03.jpg" title="Image 3">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_03.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_01.jpg" title="Image 1">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_01.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_02.jpg" title="Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long.">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_02.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_03.jpg" title="Image 3">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_03.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_01.jpg" title="Image 1">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_01.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_02.jpg" title="Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long. Image gallery caption/title that is really long.">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_02.jpg">
      </a>
    </li>
    <li class="c-image-gallery__list-item">
      <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-1" href="/kss-assets/images/placeholder/980x361_03.jpg" title="Image 3">
        <img class="c-image-gallery__image-thumb" alt="Galley Item" src="/kss-assets/images/placeholder/108x81_03.jpg">
      </a>
    </li>
  </ul>
</div>

Single image gallery

Single image gallery is used for pop up images on a page. Please ensure you use one of the modifier classes below for the size/layout you wish to use.

Image gallery requires a JavaScript plugin which is documented within the JavaScript section of the style guide. Please see Image gallery section for details on implementing multiple galleries.

Note: single image galleries do not have a default style so you MUST use one of the below listed modifier classes, otherwise you will experience cross browser issues due to there being no CSS width applied by default.

Click to view larger image
Sample single photo gallery
.c-image--thumb
Thumbnail size single image gallery
Click to view larger image
Sample single photo gallery
.c-image--small
Small/standard size single image gallery
Click to view larger image
Sample single photo gallery
.c-image--thumb.c-image-content--left
Thumbnail size single image gallery with image floated left
Click to view larger image
Sample single photo gallery
.c-image--thumb.c-image-content--right
Thumbnail size single image gallery with image floated right
Click to view larger image
Sample single photo gallery
.c-image--small.c-image-content--left
Small/standard size single image gallery with image floated left
Click to view larger image
Sample single photo gallery
.c-image--small.c-image-content--right
Small/standard size single image gallery with image floated right
Click to view larger image
Sample single photo gallery
<figure class="c-image-content c-image-content--border c-image-gallery--single [modifier class]">
  <a class="c-image-gallery__list-link js-image-gallery-item" rel="gallery-single-1 [modifier class]" href="/kss-assets/images/placeholder/980x361_01.jpg" title="Image 1">
    <img width="230" height="150" class="c-image-gallery__image-thumb" alt="Click to view larger image" src="/kss-assets/images/placeholder/860x524.png">
  </a>
  <figcaption class="c-image-content__caption">Sample single photo gallery</figcaption>
</figure>

© The University of Adelaide