クルーデザイン

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 テキストボックスのフォーカス時にテキストを全選択

サイトのUI(ユーザーインターフェイス)向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。 バックスペースで1文字ずつ削 …

jQuery アコーディオンメニューを自作サンプル(slideToggle)

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。 プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。 プラグインから …

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

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

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

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

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …


comment

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