Image Gallery

<div class="wobbly-edge wobbly-edge--white wobbly-edge--small js-wobbly-edge" data-is-static="true"></div>
<div class="image-gallery touch-scroll js-image-gallery">
    <div class="image-gallery__item">
        <figure class="captioned-image  ">
            <div class="captioned-image__image-container">
                <noscript>
                    <img width=2000 height=3038 className='image image--noscript' src=https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/640,/0/default.jpg
                    alt=/>
                </noscript>
                <img width="2000" height="3038" class="image lazy-image lazyload  " src="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/30,/0/default.jpg" data-srcset="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/1338,/0/default.jpg 1338w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-08-l0062946.jpg/full/2000,/0/default.jpg 2000w"
                    sizes="(max-width: 600px) 100vw, 421.32982225148123px" alt="" />
            </div>
            <figcaption class="captioned-image__caption font-LR3-s font-LR2-m">
                <div class="icon float-l margin-right-s1">
                    <canvas class="icon__canvas" height="26" width="26"></canvas>
                    <svg class="icon__svg" aria-hidden="true">
                        <svg viewBox="0 0 26 26">
                            <path d="M20.5 4.8h-15a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3zm-15 2h15a1 1 0 0 1 1 1V16L20 14.5a3.09 3.09 0 0 0-4.22 0l-.53.5-4.15-4.21a3.07 3.07 0 0 0-4.24 0L4.5 13.16V7.8a1 1 0 0 1 1-1zm15 12h-15a1 1 0 0 1-1-1v-1.93a1 1 0 0 0 .33-.22l3.46-3.46a1 1 0 0 1 1.41 0l4.49 4.55a1.51 1.51 0 0 0 2.1 0l.91-.86a1 1 0 0 1 1.41 0l2.59 2.59a1 1 0 0 1-.7.33z"></path>
                            <circle cx="16.75" cy="10.25" r="1.75"></circle>
                        </svg>
                    </svg>
                </div>
                <div class="captioned-image__caption-text " tabindex="0" data-slide-number="1"><span class="captioned-image__number font-HNM5-s padding-right-s2" aria-label="slide 1 of 4"><span aria-hidden="true">1/4</span></span> <span>A Chinese woman suffering from leprosy. In the 1880s, the president of the Louisiana State Board of Health blamed the “filthy, vicious, debased… Chinese” for the disease.</span>
                </div>
            </figcaption>
        </figure>
    </div>
    <div class="image-gallery__item">
        <figure class="captioned-image  ">
            <div class="captioned-image__image-container">
                <noscript>
                    <img width=1088 height=1732 className='image image--noscript' src=https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/640,/0/default.jpg
                    alt=/>
                </noscript>
                <img width="1088" height="1732" class="image lazy-image lazyload  " src="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/30,/0/default.jpg" data-srcset="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-09-l0007201.jpg/full/1088,/0/default.jpg 1088w"
                    sizes="(max-width: 600px) 100vw, 402.0323325635104px" alt="" />
            </div>
            <figcaption class="captioned-image__caption font-LR3-s font-LR2-m">
                <div class="icon float-l margin-right-s1">
                    <canvas class="icon__canvas" height="26" width="26"></canvas>
                    <svg class="icon__svg" aria-hidden="true">
                        <svg viewBox="0 0 26 26">
                            <path d="M20.5 4.8h-15a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3zm-15 2h15a1 1 0 0 1 1 1V16L20 14.5a3.09 3.09 0 0 0-4.22 0l-.53.5-4.15-4.21a3.07 3.07 0 0 0-4.24 0L4.5 13.16V7.8a1 1 0 0 1 1-1zm15 12h-15a1 1 0 0 1-1-1v-1.93a1 1 0 0 0 .33-.22l3.46-3.46a1 1 0 0 1 1.41 0l4.49 4.55a1.51 1.51 0 0 0 2.1 0l.91-.86a1 1 0 0 1 1.41 0l2.59 2.59a1 1 0 0 1-.7.33z"></path>
                            <circle cx="16.75" cy="10.25" r="1.75"></circle>
                        </svg>
                    </svg>
                </div>
                <div class="captioned-image__caption-text " tabindex="0" data-slide-number="2"><span class="captioned-image__number font-HNM5-s padding-right-s2" aria-label="slide 2 of 4"><span aria-hidden="true">2/4</span></span> <span>Syphilis has been blamed on a range of different nationalities and religions, including the French.</span>
                </div>
            </figcaption>
        </figure>
    </div>
    <div class="image-gallery__item">
        <figure class="captioned-image  ">
            <div class="captioned-image__image-container">
                <noscript>
                    <img width=1198 height=1548 className='image image--noscript' src=https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/640,/0/default.jpg
                    alt=/>
                </noscript>
                <img width="1198" height="1548" class="image lazy-image lazyload  " src="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/30,/0/default.jpg" data-srcset="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-10-l0000611.jpg/full/1198,/0/default.jpg 1198w"
                    sizes="(max-width: 600px) 100vw, 495.297157622739px" alt="" />
            </div>
            <figcaption class="captioned-image__caption font-LR3-s font-LR2-m">
                <div class="icon float-l margin-right-s1">
                    <canvas class="icon__canvas" height="26" width="26"></canvas>
                    <svg class="icon__svg" aria-hidden="true">
                        <svg viewBox="0 0 26 26">
                            <path d="M20.5 4.8h-15a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3zm-15 2h15a1 1 0 0 1 1 1V16L20 14.5a3.09 3.09 0 0 0-4.22 0l-.53.5-4.15-4.21a3.07 3.07 0 0 0-4.24 0L4.5 13.16V7.8a1 1 0 0 1 1-1zm15 12h-15a1 1 0 0 1-1-1v-1.93a1 1 0 0 0 .33-.22l3.46-3.46a1 1 0 0 1 1.41 0l4.49 4.55a1.51 1.51 0 0 0 2.1 0l.91-.86a1 1 0 0 1 1.41 0l2.59 2.59a1 1 0 0 1-.7.33z"></path>
                            <circle cx="16.75" cy="10.25" r="1.75"></circle>
                        </svg>
                    </svg>
                </div>
                <div class="captioned-image__caption-text " tabindex="0" data-slide-number="3"><span class="captioned-image__number font-HNM5-s padding-right-s2" aria-label="slide 3 of 4"><span aria-hidden="true">3/4</span></span> <span>Poster warning of the “alarming approach” of what was described as “Indian” cholera, produced in London in 1831.</span>
                </div>
            </figcaption>
        </figure>
    </div>
    <div class="image-gallery__item">
        <figure class="captioned-image  ">
            <div class="captioned-image__image-container">
                <noscript>
                    <img width=2000 height=2828 className='image image--noscript' src=https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/640,/0/default.jpg
                    alt=/>
                </noscript>
                <img width="2000" height="2828" class="image lazy-image lazyload  " src="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/30,/0/default.jpg" data-srcset="https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/1338,/0/default.jpg 1338w,https://iiif.wellcomecollection.org/image/wordpress:2017/06/to-01-11-l0072276.jpg/full/2000,/0/default.jpg 2000w"
                    sizes="(max-width: 600px) 100vw, 452.6166902404526px" alt="" />
            </div>
            <figcaption class="captioned-image__caption font-LR3-s font-LR2-m">
                <div class="icon float-l margin-right-s1">
                    <canvas class="icon__canvas" height="26" width="26"></canvas>
                    <svg class="icon__svg" aria-hidden="true">
                        <svg viewBox="0 0 26 26">
                            <path d="M20.5 4.8h-15a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3zm-15 2h15a1 1 0 0 1 1 1V16L20 14.5a3.09 3.09 0 0 0-4.22 0l-.53.5-4.15-4.21a3.07 3.07 0 0 0-4.24 0L4.5 13.16V7.8a1 1 0 0 1 1-1zm15 12h-15a1 1 0 0 1-1-1v-1.93a1 1 0 0 0 .33-.22l3.46-3.46a1 1 0 0 1 1.41 0l4.49 4.55a1.51 1.51 0 0 0 2.1 0l.91-.86a1 1 0 0 1 1.41 0l2.59 2.59a1 1 0 0 1-.7.33z"></path>
                            <circle cx="16.75" cy="10.25" r="1.75"></circle>
                        </svg>
                    </svg>
                </div>
                <div class="captioned-image__caption-text " tabindex="0" data-slide-number="4"><span class="captioned-image__number font-HNM5-s padding-right-s2" aria-label="slide 4 of 4"><span aria-hidden="true">4/4</span></span> <span>Tuberculosis is often described as a disease of “the poor”. This 1951 poster by the Swiss Association Against Tuberculosis appealed for funds to “Help us to help the poor”.</span>
                </div>
            </figcaption>
        </figure>
    </div>
</div>
// @flow
import {Fragment} from 'react';
import CaptionedImage from '../CaptionedImage/CaptionedImage';
import Image from '../Image/Image';
import Tasl from '../Tasl/Tasl';
import type {Picture} from '../../../model/picture';

type ImageGalleryProps = {|
  id: string,
  title: ?string,
  items: Picture[]
|}

const ImageGallery = ({id, title, items}: ImageGalleryProps) => {
  return (
    <Fragment>
      {title && <h2 className='image-gallery__heading'>{title}</h2>}
      <div className='wobbly-edge wobbly-edge--white wobbly-edge--small js-wobbly-edge' data-is-static='true'></div>
      <div className='image-gallery touch-scroll js-image-gallery' data-id={id} id={id}>
        {items.map((image, i) => (
          <div className='image-gallery__item' key={image.contentUrl}>
            <CaptionedImage
              caption={image.caption || ''}
              slideNumbers={{ current: i + 1, total: items.length }}>

              {image.contentUrl && image.width && image.height && <Image
                width={image.width}
                height={image.height}
                contentUrl={image.contentUrl}
                lazyload={true}
                sizesQueries={'(max-width: 600px) 100vw, ' + (image.width / image.height) * 640 + 'px'}
                alt={image.alt || ''} />}

              {image.contentUrl && (
                image.title ||
                (image.source && image.source.name) ||
                (image.copyright && image.copyright.holder) ||
                image.license
              ) && <Tasl
                  // TODO: Maybe fill with placeholder so the content team can see it?
                  contentUrl={image.contentUrl || ''}
                  title={image.title}
                  author={image.author}
                  sourceName={image.source && image.source.name}
                  sourceLink={image.source && image.source.link}
                  license={image.license}
                  copyrightHolder={image.copyright && image.copyright.holder}
                  copyrightLink={image.copyright && image.copyright.link}
                  isFull={false}
                />}
            </CaptionedImage>
          </div>
        ))}
      </div>
    </Fragment>
  );
};

export default ImageGallery;
{
  "items": [
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-08-l0062946.jpg",
      "caption": "A Chinese woman suffering from leprosy. In the 1880s, the president of the Louisiana State Board of Health blamed the “filthy, vicious, debased… Chinese” for the disease.",
      "width": 2000,
      "height": 3038
    },
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-09-l0007201.jpg",
      "caption": "Syphilis has been blamed on a range of different nationalities and religions, including the French.",
      "width": 1088,
      "height": 1732
    },
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-10-l0000611.jpg",
      "caption": "Poster warning of the “alarming approach” of what was described as “Indian” cholera, produced in London in 1831.",
      "width": 1198,
      "height": 1548
    },
    {
      "contentUrl": "https://wellcomecollection.files.wordpress.com/2017/06/to-01-11-l0072276.jpg",
      "caption": "Tuberculosis is often described as a disease of “the poor”. This 1951 poster by the Swiss Association Against Tuberculosis appealed for funds to “Help us to help the poor”.",
      "width": 2000,
      "height": 2828
    }
  ]
}

There are no notes for this item.