I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > JavaScript/jQuery > サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery

Amazonなどのように、メイン画像とサブ画像のある画像表示領域で、サブ画像をクリックするとメイン画像をふわっと変更するjQueryを書いてみました。
fadeIn処理が終わってから画像のsrc属性を書き換え、fadeIn処理をしています。

デモ

動いているサンプルはこちらからご覧できます。

DEMO

コード解説

    $(function(){
        $('#subImg img').on('click',function(){
            //mainに切り替えるimgのsrc取得
            img = $(this).attr('src');
            //currentクラス付け替え
            $('#subImg li').removeClass('current');
            $(this).parent().addClass('current');
            //fadeOutできたらsrc変更してfadeIn
            $('#mainImg img').fadeOut(50, function() {
                $('#mainImg img').attr('src', img).on('load', function() {
                     $(this).fadeIn();
                })
           })
        });
    });

 mainImg領域にメインの画像を表示し、subImgでサムネイル画像を一覧表示しています。
サムネイル画像をクリックするとイベントが発火します。
クリックしたサムネイルに選択中のクラス(current)を付け替えています。

まとめ

単純に処理を連記する形ではスムーズに動作しなかったので、fadeOut()が終了してからfadeIn()処理を行うなどの対応を行っています。
画像の表示切り替えはsrcを動的に変更するというものですが、src変更後fadeIn()をすることでふわっと感を出しています。
スムーズで柔らかい画面制作にお役立てください。

記事移動

関連記事

Instagramの写真一覧をサイトに表示する方法

Instagramの写真一覧をサイトに表示する方法

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed