Gatsbyでクリック/タップした画像を拡大して表示する

目次

• プラグイン『gatsby-remark-images-zoom』をインストールするだけ
• gatsby-remark-images-zoomのオプション

これです。

これなんて言うんですかね。画像のポップアップ？ズーム？WordPressだとFancyBoxって名称で言えば何となく伝わったのですが……。ちなみに今回紹介するプラグインはmedium-zoomというモジュールを使っているそうな。

プラグイン『gatsby-remark-images-zoom』をインストールするだけ

gatsby-remark-images-zoomをインストールするだけで簡単に実装できます。ちなみにgatsby-remark-imagesをインストールしてなければうまく動作しないので、gatsby-remark-imagesをインストールしてない場合は先にそちらをインストールする必要があります。

$ yarn add gatsby-remark-images
or
$ npm i --save gatsby-remark-images

gatsby-remark-images-zoomをインストールするためにはターミナルで以下を実行。

$ yarn add gatsby-remark-images-zoom
or
$ npm i --save gatsby-remark-images-zoom

そしてconfigファイルに追記するだけです。公式ドキュメントでもgatsby-remark-imagesの下に書かれていたので、大人しくgatsby-remark-imagesの下に書いておきましょう。

plugins: [
  // 省略
  {
    resolve: `gatsby-remark-images`,
    options: {
      linkImagesToOriginal: false,
    },
  },
  `gatsby-remark-images-zoom`,  // 省略
],

ここでちょっとしたポイントなのですが、gatsby-remark-imagesはデフォで画像に別タブ（target="_blank"）リンクがつき、その画像のオリジナルURLへと飛ぶことができます。ただ、この機能をgatsby-remark-images-zoomと併用すると、ユーザーが画像をクリックしたときにまず別タブが開き画像が拡大表示され、もとのページに戻ってきたときにも同じ画像が拡大表示されていると言うダメUXが完成します。

なので、

{
  resolve: `gatsby-remark-images`,
  options: {
    linkImagesToOriginal: false,  },
},

これを忘れずに付け足しておきましょう。

gatsby-remark-imagesのオプションはこちらから確認できます。

gatsby-remark-images-zoomのオプション

デフォルトだとz-indexに42が設定されているので、場合によっては固定ヘッダーやらと被ってしまうなんてこともあるやも。オプションから変更可能です。

plugins: [
  // 省略
  {
    resolve: `gatsby-remark-images`,
    options: {
      linkImagesToOriginal: false
    }
  },
  {
    resolve: `gatsby-remark-images-zoom`,
    options: {
      margin: 0,
      background: "fff",
      zIndex: 42,
      scrollOffset: 40,
      container: null,
      template: null
    }
  },
  // 省略
],

上は全てデフォルト値です。詳しくはこちら