クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery 選択した画像への差し替え

投稿日:

jQueryは一番有名なJavaScriptのライブラリです。
jQueryのおかげで簡単にJavaScriptを利用できるようになりましたね。
他のライブラリも多く出てきましたが、まだまだ使う機会も多いです。

jQueryを利用すると各要素の属性値を簡単に変更する事ができるので、見た目を変化させたい時などに利用できます。
また、クライアント側で実行されるため一度スクリプトが読み込まれると高速です。
今回は次のようなものを作成したいと思います。

クリックされたサムネイル画像を大きく表示させる

上部に小さな「サムネイル画像」が並んでいて、それをクリックすると下部に大きな画像として表示されるというものです。
Amazonの商品画像でよくあるやつですね。

HTML側

HTML側はこんな感じですね。
Bootstrap4を使っていますので、再現したい方はBootstrap4を読み込んで下さいね。

上段の「col-12」クラスの中にサムネイル用の小さな画像を5つ並べています。
下段の「col-12」クラスの中に大きな画像を表示させています。
初期表示はサムネイルの1つ目の画像を表示させておきます。
この「サムネイル用の画像をクリックすると下段の大きな画像を切り替える」という処理をjQueryで作っていきます。

jQuery側

jQuery側でやることは非常に単純です。

  1. サムネイル画像がクリックされたら、その画像パスを取得する
  2. 取得した画像パスを下段の画像パスに設定する

実際のコードは次のようになります。短いですね!

3行目でクリックされたサムネイル画像のパスを変数urlに入れています。
4行目で変数urlの内容を下段の画像パスに設定しています。

たったこれだけで完成しました。
少し「おっ!」と思うことが簡単にできるjQueryって素敵ですよね。

サンプルも載せておきますので、是非見てくださいね。

 

-jQuery

執筆者:

関連記事

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …

jQuery 絞り込み検索サンプル(正規表現)

jQueryを利用すれば、絞り込み検索機能も簡単に作成できます。 絞り込み検索機能とは、テキストボックスに入力した値とマッチするものを表示・マッチしないものを非表示にするような機能です。 以下のような …

jQuery CSSクラスの追加と削除

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。 今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを …

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

jQuery ローカルストレージ で入力値の保存と読み込みをする

ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。 ブラウザの機能として提供されているものなので、特別なものは不要です。 クッキーとは少し違い、保存の有効期限など …


comment

メールアドレスが公開されることはありません。