クルーデザイン

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 ローカルストレージ で入力値の保存と読み込みをする

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

jQuery テキストボックスのフォーカス時にテキストを全選択

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

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

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

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …


comment

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