react-image-galleryを使いこなそう

react-image-galleryはreactのライブラリで、画像をスライド表示するコンポーネントライブラリです。

コンポーネントは、サムネイルエリアとギャラリーエリアに分かれています。

ほとんどの機能はプロパティで詳細に設定でき、レンダー系のメソッドのオーバーライドが可能なためカスタマイズ性が高いです。

react-image-galleryを使いこなす！

items

ギャラリーに表示するイメージを表すオブジェクトを設定します。

original: オリジナルイメージ用URLを指定する
originalAlt: オリジナルイメージのAlt属性を指定します。
thumbnail: サムネイルイメージ用URLを指定します。
thumbnailAlt: サムネイルイメージのAlt属性を指定します。
fullscreen: フルスクリーンイメージ用URLを指定します。デフォルトはoriginalで指定したURLが適用されます。
originalClass: イメージに適用するclassを指定します。
thumbnailClass: サムネイルに適用するclassを指定します。
originalTitle: オリジナルイメージのタイトルを指定します。
thumbnailTitl: サムネイルイメージのタイトルを指定します。
thumbnailLabel: サムネイルイメージのラベルを指定します。
description: オリジナルイメージの説明を指定します。
imageSet: やを要素にもつ配列を指定します。
srcSet: imgタグのsrcSet属性と同様の働きを持つ属性を指定します。
sizes: imgタグのsizes属性と同様の働きを持つ属性を指定します。
renderItem: Itemのレンダーをカスタムするための関数を設定します。
renderThumbInner: ThumbInnerのレンダーをカスタムするための関数を設定します。
bulletClass: extra class for the bullet of the item
bulletOnClick: callback({item, itemIndex, currentIndex}) A function that will be called upon bullet click.

infinite

無限スクロールを行うかどうかを設定します。デフォルトはtrueが設定されています。

lazyLoad

遅延ロードを行うかどうかを設定します。デフォルトはfalseが設定されています。

showNav

ナビゲーション(前イメージ・後イメージへ遷移するボタン)を表示するかどうかを設定します。デフォルトはtrueになっています。

showThumbnails

サムネイルを表示するかどうかを設定します。デフォルトはtrueになっています。

thumbnailPosition

サムネイルを表示位置をを設定します。 "top"・"right"・"bottom"・"left"が設定できます。デフォルトはtopになっています。

showFullscreenButton

フルスクリーンボタンを表示するかどうかを設定します。デフォルトはtrueになっています。

useBrowserFullscreen

フルスクリーン時に適用されるCSSを設定します。 falseの時はフルスクリーンはブラウザー内のcssを介して行われます。デフォルトはtrueになっています。

useTranslate3D

イメージ遷移時に適用されるCSSを設定します。 if false, will use translate instead of translate3d css property to transition slides デフォルトはtrueになっています。

showPlayButton

自動再生ボタンを表示するかどうかを設定します。デフォルトはtrueになっています。

isRTL

right-to-left言語かどうかを設定します。 trueを設定した場合、イメージの前方は左側、後方は右側になります。デフォルトはfalseになっています。

showBullets

バレットボタンを表示するかどうかを設定します。バレットボタンとは、イメージ一つ一つに対応するボタンを表示し、クリックすると対応するイメージに直接遷移します。デフォルトはfalseになっています。

showIndex

インデックスを表示するかどうかを設定します。インデックスは、1/7のように{現在のイメージ番号}{indexSeparator}{itemsの総数}で表示されます。デフォルトはfalseになっています。

autoPlay

自動で再生を行うかを設定します。途中から、true/falseを切り替えても効果がないようです。デフォルトはfalseになっています。

disableThumbnailScroll

サムネイルエリアのスクロールを無効化するかどうかを設定します。 trueの場合、イメージの遷移に追随してサムネイルエリアがスクロールしません。 falseの場合、イメージの遷移に追随してサムネイルエリアがスクロールします。デフォルトはfalseになっています。

disableKeyDown

キーダウンによるイメージの遷移を無効化するかどうかを設定します。 trueの場合、キーダウンによりイメージが遷移しません。 falseの場合、キーダウンによりイメージが遷移します。デフォルトはfalseになっています。

disableSwipe

スワイプによるイメージの遷移を無効化するかどうかを設定します。 trueの場合、スワイプによりイメージが遷移しません。 falseの場合、スワイプによりイメージが遷移します。デフォルトはfalseになっています。

slideOnThumbnailOver

サムネイルに対するマウスオーバーでイメージに遷移するかどうかを設定します。 trueの場合、マウスオーバーによりイメージが遷移します。 falseの場合、マウスオーバーによりイメージが遷移しません。デフォルトはfalseになっています。

onErrorImageURL

イメージロードエラー時に表示する、エラー用イメージのURLを設定します。スライドイメージとサムネイルイメージの両方に適用されます。デフォルトでは、何も設定されていません。

indexSeparator

インデックスの区切り文字を設定します。 showIndexがfalseの時は無視されます。デフォルトでは、/が設定されています。

slideDuration

スライド遷移時の時間を設定します。デフォルトでは、450msが設定されています。

swipingTransitionDuration

スワイプ遷移時の時間を設定します。デフォルトでは、0msが設定されています。

slideInterval

自動再生時のスライド間隔を設定します。自動再生開始時の値が適用されます。デフォルトでは、3000msが設定されています。

flickThreshold

イメージ遷移としてみなすため最大スワイプ速度を設定します。小さい値を設定すると、少しのスワイプでイメージが遷移します。デフォルトでは、0.4が設定されています。

swipeThreshold

スワイプによるイメージ遷移を行う時の、イメージ遷移が発生するスワイプ距離を設定します。値は、イメージに対する割合、パーセンテージで設定します。デフォルトでは、30%が設定されています。デフォルトの30%では、30%未満の距離の場合はイメージの遷移が発生しません。

stopPropagation

すべての「スワイプ」イベントでstopPropagationを自動的に呼び出すかどうかを設定します。デフォルトはfalseになっています。

preventDefaultTouchmoveEvent

ブラウザーのタッチムーブイベントを防ぐオプション（スワイプ時にギャラリーが上または下にスクロールしないようにします）デフォルトはfalseになっています。 An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)

startIndex: Number, default 0

スライドを始める要素番号を指定します。デフォルトは0番目になっています。

onImageError: Function, callback(event)

イメージロード失敗時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onThumbnailError: Function, callback(event)

サムネイルイメージロード失敗時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onThumbnailClick: Function, callback(event, index)

サムネイルクリック時に呼ばれるコールバックを設定します。イベントオブジェクトとクリックされたサムネイルのインデックスを引数として渡します。

onImageLoad: Function, callback(event)

イメージロード時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onSlide: Function, callback(currentIndex)

遷移完了時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onBeforeSlide: Function, callback(nextIndex)

遷移開始時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onScreenChange: Function, callback(fullscreenElement)

フルスクリーンモード切替時に呼ばれるコールバックを設定します。フルスクリーンかどうかを判断するboolean値を引数として渡します。フルスクリーンモードに切り替わった時にtrueが渡され、通常モードに切り替わった時にfanseが渡されます。

onPause: Function, callback(currentIndex)

自動再生モード停止時に呼ばれるコールバックを設定します。現在表示しているインデックスを引数として渡します。

onPlay: Function, callback(currentIndex)

自動再生モード開始時に呼ばれるコールバックを設定します。現在表示しているインデックスを引数として渡します。

onTouchStart: Function, callback(event) on gallery slide

ギャラリーエリア上のタッチイベント開始時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onTouchMove: Function, callback(event) on gallery slide

ギャラリーエリア上でスワイプイベント時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onTouchEnd: Function, callback(event) on gallery slide

ギャラリーエリア上のタッチイベント終了時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onClick: Function, callback(event)

ギャラリーエリアクリック時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onMouseOver: Function, callback(event) on gallery slide

ギャラリーエリアマウスオーバー時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

onMouseLeave: Function, callback(event) on gallery slide

ギャラリーエリアマウスリーブ時に呼ばれるコールバックを設定します。イベントオブジェクトを引数として渡します。

additionalClass: String,

react-image-galleryのルートコンポーネントのクラス属性にクラスを追加する。

renderCustomControls: Function, custom controls rendering

コントロールや他の要素をカスタマイズして描画するために使います。

  _renderCustomControls() {
    return <a href='' className='image-gallery-custom-action' onClick={this._customAction.bind(this)}/>
  }

renderItem: Function, custom item rendering

ギャラリーエリアのアイテムを描画メソッド(renderItem)を上書きします。完全な実装はソースコードのImageGallery#renderItemを見てください。

renderThumbInner: Function, custom thumbnail rendering

サムネイルエリアのアイテムを描画メソッド(renderThumbInner)を上書きします。完全な実装はソースコードのImageGallery#renderThumbInnerを見てください。

renderLeftNav: Function, custom left nav component

レフトナビボタンの描画メソッドを上書きします。前方に移動するためのメソッドオブジェクトと、ナビゲーションの有効性のboolean値が渡されます。

  renderLeftNav(onClick, disabled) {
    return (
      <button
        className='image-gallery-custom-left-nav'
        disabled={disabled}
        onClick={onClick}/>
    )
  }

renderRightNav: Function, custom right nav component

ライトナビボタンの描画メソッドを上書きします。後方に移動するためのメソッドオブジェクトと、ナビゲーションの有効性のboolean値が渡されます。

  renderRightNav(onClick, disabled) {
    return (
      <button
        className='image-gallery-custom-right-nav'
        disabled={disabled}
        onClick={onClick}/>
    )
  }

renderPlayPauseButton: Function, play pause button component

自動再生の開始終了ボタンの描画メソッドを上書きします。再生・終了を切り替えるためのメソッドオブジェクト、再生しているかどうかのboolean値が渡されます。

Passes onClick callback that will toggle play/pause and isPlaying argument for when gallery is playing

  renderPlayPauseButton: (onClick, isPlaying) => {
    return (
      <button
        type='button'
        className={
          `image-gallery-play-button${isPlaying ? ' active' : ''}`}
        onClick={onClick}
      />
    );
  }

renderFullscreenButton: Function, custom fullscreen button component

フルスクリーンボタンの描画メソッドを上書きします。通常ボード・フルスクリーンモードを切り替えるためのメソッドオブジェクト、フルスクリーン状態かどうかのboolean値が渡されます。

  renderFullscreenButton: (onClick, isFullscreen) => {
    return (
      <button
        type='button'
        className={
          `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
        onClick={onClick}
      />
    );
  },

Functions

refsを使ってImageGalleryのメソッドにアクセスできます。

play(): 自動再生を開始します。
pause(): 自動再生を停止します。
fullScreen(): 通常モードからフルスクリーンモードに移行します。
exitFullScreen(): フルスクリーンモードから通常モードに移行します。
slideToIndex(index): 指定した要素番号のスライドを表示します。
getCurrentIndex(): 現在表示しているスライドの要素番号を取得します。

Published 1 May 2020

Yona .Yona on Twitter