Jqueryで画像選択でメイン画像が切り替わるものを作ってみた

2022年3月22日

ホームページで写真を見せる方法はいろいろあります。
よくあるのが、横スライドで写真が流れるパターンでしょうか。

スライドパターンは、プラグインも多くあり簡単に導入できます。

別のパターンで、写真クリックでメイン画像に反映される方法があります。
以下のようなパターンです。

サブ画像をクリックしたら、メイン画像に反映される動作です。

今回この仕組みを導入する必要があり、いつものようにプラグインで対応できるだろうと考えていました。

しかし、このパターンのプラグインを見つけることができませんでした。
ならば、作るしかない。

ということでいつものごとくググって、調べて自作しました。

まず作ってみたものがこちら

何はともあれ、まず作ってみました。
それがこちらです。

やりたいことはこれでできています。
クリックしたら画像が切り替わるパターンは、ググるとたくさん出てきました。
ただ、クリックされたサブ画像に「変化」をつけるものがなかなかなく、その部分は自作しました。

ソースはこちらです

解説

全体を見るとわかりにくいですが、部分的にみると理解しやすいものです。
部分的に解説いたします。

メイン画像、サブ画像部分

HTMLコーディング部分です。
見た目はスタイルシートで調整します。
dl dtタグを使用していますが、ul liタグでも実装可能です。

Jquery部分

実際に動作している部分です。
ここからは、細かく解説いたします。

①1個目の画像を選択状態に設定

1個目のサブ画像を選択状態にしています。

②サブ画像がクリックされた場合に動作

サブ画像がクリックされた場合に、処理が発生します。

③サブ画像のパスを取り出す

クリックしたサブ画像のパスを取り出しています。

④サブ画像選択状態を設定

サブ画像の選択状態スタイルシート（.select）を解除し、クリックしたサブ画像のdtタグに選択スタイルシート（.select）をあてがっています。

⑤メイン画像の差し替え

③でとりだしたサブ画像のパスを、メイン画像に割り当てしています。
その際にフェードアウト、フェードインをしています。

せっかくなのでプラグイン化してみました。

今回だけならば、直記述だけでよいのですが、もしかしたら次に使う機会があるかもしれないと思いました。

ならば、プラグイン化しておけば、次回も使うことができます。

そういえば、以前Jqueryプラグイン化の記事を書いていました。

Jqueryで独自プラグインを自作してみました

自分で書いた記事ですが、これを参考にプラグイン化しました。
以前書いた記事が忘備録として役に立ちました。

プラグイン化したものがこちら

先ほども画像切り替えをプラグイン化したもの

見た目は同じですが、中身が違います。

記述部分は、プラグインを呼び出している部分だけになります。
メイン画像のスタイルシート、サブ画像のスタイルシート、選択状態にするタグ、選択状態のスタイルシート名、ディレイ時間、デフォルト選択になります。

select_classのスタイルシート名に「.」（ピリオド）がないのは、addClass、removeClassに渡すためです。Jqueryは通常ピリオドが必要ですが、addClass、removeClass関数に限っては、ピリオドを付けずに引き渡します。

default_no が０なのは、1個目をデフォルトとしています。
dlタグのdt要素の1個目は、数字にすると0から始まります。
なので、1個目は0と表記します。
（ちなみに5個目は４と表記します。）

さほど大した動きをしていないので、使い道があるかわかりませんがダウンロードリンクを掲載いたします。

ダウンロードはこちら
（右クリックで保存してください）

本記事がお役に立てば幸いです。