さぁ!検索しよう!

ECサイト等で使われている、サムネイルをクリックするとメイン画像が切り替わる画像ビューアの作り方です。

画像ビューアとは、Amazonの商品詳細ページにある以下のようなものです。

イメージ12465

DEMO

HTML

<div class="wrapper">
    <div class="main">
        <img src="https://www.pakutaso.com/assets_c/2015/06/HIRA86_MBAkey-thumb-1000xauto-17206.jpg">
        <img src="https://www.pakutaso.com/assets_c/2015/06/GAK88_nekokafeneko-thumb-1000xauto-16206.jpg">
        <img src="https://www.pakutaso.com/assets_c/2015/05/N879_kuchigahenojinoneko-thumb-1000xauto-14847.jpg">
        <img src="https://www.pakutaso.com/assets_c/2015/05/N825_benchinouenoshironeko-thumb-autox1000-14809.jpg">
    </div>
    <ul class="nav">
        <li><img src="https://www.pakutaso.com/assets_c/2015/06/HIRA86_MBAkey-thumb-1000xauto-17206.jpg"></li>
        <li><img src="https://www.pakutaso.com/assets_c/2015/06/GAK88_nekokafeneko-thumb-1000xauto-16206.jpg"></li>
        <li><img src="https://www.pakutaso.com/assets_c/2015/05/N879_kuchigahenojinoneko-thumb-1000xauto-14847.jpg"></li>
        <li><img src="https://www.pakutaso.com/assets_c/2015/05/N825_benchinouenoshironeko-thumb-autox1000-14809.jpg"></li>
    </ul>
</div>

メインパネルとなる<div class="main"></div>とサムネイルである<ul class="nav"></ul>に、同じ画像を同じ順に定義しています。

CSS

.wrapper {
    background: #dfdfdf;
    margin: 0 auto;
    width: 40%;
}

@media screen and (max-width: 768px) {
    .wrapper {
        width: 100%;
    }
}

.main {
    background: #777;
    padding-bottom: 56.25%;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

.main img {
    display: block;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
    -webkit-visibility: hidden;
    visibility: hidden;
}

.main img.active {
    opacity: 1;
    -webkit-visibility: visible;
    visibility: visible;
    z-index: 100;
}

.nav {
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav li {
    background: #ccc;
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding-bottom: 14.0625%;
    width: 25%;
}

@media screen and (max-width: 768px) {
    .nav li {
        padding-bottom: 28.125%;
        width: 50%;
    }
}

.nav img {
    display: block;
    height: auto;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay {
    background: #000;
    height: 100%;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    transition: 0.5s;
    -webkit-visibility: hidden;
    visibility: hidden;
    width: 100%;
    z-index: 1000;
}

.overlay.active {
    opacity: 0.6;
    -webkit-visibility: visible;
    visibility: visible;
}

.large {
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transition: 0.5s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-visibility: hidden;
    visibility: hidden;
    z-index: 2000;
}

.large.active {
    opacity: 1;
    -webkit-visibility: visible;
    visibility: visible;
}

.large img {
    height: auto;
    max-width: 100%;
}

サムネイル.main imgとメインパネル.mainに以下のような指定をすると、ブラウザウィンドウ幅の変化に応じて、16:9の比率を維持したまま伸縮させることができます。

.main {
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}

.main img {
    height: auto;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

http://gakublog.com/archives/34

jQuery

$(function() {
    $('.wrapper').before('<div class="overlay"></div><div class="large"></div>');

    $('.nav img').each(function(i) {
        $(this).wrap('<a></a>');
        $(this).closest('a').attr('href', '#view' + i);
    });

    $('.main img').each(function(i) {
        $(this).attr('id', 'view' + i);
        var imgSrc = $(this).attr('src');
        $(this).wrap('<a></a>');
        $(this).closest('a').attr('href', imgSrc);

        $('.main a').click(function(e) {
            e.preventDefault();
            $('.overlay').addClass('active');
            $('.large').addClass('active').html("<img src='" + $(this).attr("href") + "'>");
        });

        $('.overlay').click(function() {
            $(this).removeClass('active');
            $('.large').removeClass('active');
        });
    });

    $('.nav a').click(function(e) {
        e.preventDefault();
        $('.main img').removeAttr('class');
        $(this.hash).addClass('active');
        return false;
    });

    $('.nav a:eq(0)').trigger('click');
});

処理の詳細は以下の通りです。

.before()

.before()で、<div class="wrapper"></div>の上に、<div class="overlay"></div><div class="large"></div>を生成しています。

<div class="overlay">
</div>
<div class="large">
</div>
<div class="wrapper">
</div>

$(‘.nav img’).each(function(i) {…});

$('.nav img').each(function(i) {...});は、各サムネイルに対する処理です。

$('.nav img').each(function(i) {
    $(this).wrap('<a></a>');
    $(this).closest('a').attr('href', '#view' + i);
});

処理の流れ

  1. <ul class="nav"></ul>内の各img要素をaタグで囲む。
    $(this).wrap('<a></a>');
    
  2. 囲んだaタグにリンクを追加し、リンク先を#view1,#view2…とする。
    $(this).closest('a').attr('href', '#view' + i);
    

$(‘.main img’).each(function(i) {…});

$('.main img').each(function(i) {...});は、<div class="main"></div>内の各img要素に対する処理です。

$('.main img').each(function(i) {
    $(this).attr('id', 'view' + i);
    var imgSrc = $(this).attr('src');
    $(this).wrap('<a></a>');
    $(this).closest('a').attr('href', imgSrc);

    $('.main a').click(function(e) {
        e.preventDefault();
        $('.overlay').addClass('active');
        $('.large').addClass('active').html("<img src='" + $(this).attr("href") + "'>");
    });

    $('.overlay').click(function() {
        $(this).removeClass('active');
        $('.large').removeClass('active');
    });
});

処理の流れ

  1. <div class="main"></div>内の各img要素に、idを追加します。更に、各img要素のsrcをimgSrcに代入しておきます。
    $(this).attr('id', 'view' + i);
    var imgSrc = $(this).attr('src');
    
  2. 各img要素をaタグで囲み、リンク先をimgSrcとして追加します。
    $(this).wrap('<a></a>');
    $(this).closest('a').attr('href', imgSrc);
    
  3. 2.で追加したリンクをクリックすると、オーバーレイが表示されると同時に、<div class="large"></div>内に$('.main a')のリンク先をsrcとしたimg要素が挿入されます。
    $('.main a').click(function(e) {
        e.preventDefault();
        $('.overlay').addClass('active');
        $('.large').addClass('active').html("<img src='" + $(this).attr("href") + "'>");
    });
    
  4. オーバーレイをクリックすると、オーバーレイ自身と<div class="large"></div>を非表示にします。
    $('.overlay').click(function() {
        $(this).removeClass('active');
        $('.large').removeClass('active');
    });
    

$(‘.nav a’).click(function(e) {…}

$('.nav a').click(function(e) {...}は、サムネイルをクリックすると、現在表示されているメインパネルの画像を非表示にし、クリックしたサムネイルのリンク先と同じidのメインパネルの画像を表示させるというものです。

    $('.nav a').click(function(e) {
        e.preventDefault();
        $('.main img').removeAttr('class');
        $(this.hash).addClass('active');
        return false;
    });

$(‘.nav a:eq(0)’).trigger(‘click’);

$('.nav a:eq(0)').trigger('click');で、初期状態では先頭のサムネイルがクリックされた状態としています。


以上で、サムネイルをクリックでメイン画像が切り替わる画像ビューアの作り方を終わります。