CodingMania

CodingMania

2012/3/1

サムネイルの画像をクリックで拡大・切り替え・表示します！

レスポンシブ対応。jqueryを使って、サムネイル画像をクリックするとメイン画像を切り替えて大きく表示します。

ヘッダーで、jquery.jsと後述のgallery.jsを読み込んでいます。
レスポンシブに対応しました【改定：2017/10/12】
1ページに複数の場合は、class指定します。
サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！
↑もあります。

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="gallery.js"></script>

[gallery.js]JavaScript

// JavaScript Document
$(window).on('load resize', function() {
    //写真の高さ取得
    var photoH = $("#photo>img").innerHeight();
    $("#photo").css("height", photoH + "px");
});
$(function() {
    var click_flg = false;
    $("#navi a").click(function() {
        if (click_flg == false) {
            click_flg = true;
            $("#photo img").before("<img class='demo' src='" + $(this).attr("href") + "' alt=''>");
            $("#photo img:last").stop(true, false).fadeOut("fast", function() {
                $(this).remove();
                click_flg = false;
            });
            return false;
        } else {
            return false;
        }
    });
});


//1ページに複数の場合
$(window).on('load resize', function() {
    $(".mod_gallery").each(function() {
        //写真の高さ取得
        var photoH = $(this).find(".mod_gallery_photo>img").innerHeight();
        $(this).find(".mod_gallery_photo").css("height", photoH + "px");
    });
    $(function() {
        var click_flg = false;
        $(".mod_gallery_navi a").click(function() {
            if (click_flg == false) {
                click_flg = true;
                var classname = $(this).attr("class");
                $("div." + classname + " img").before("<img class='demo' src='" + $(this).attr("href") + "' alt=''>");
                $("div." + classname + " img:last").stop(true, false).fadeOut("fast", function() {
                    $(this).remove();
                    click_flg = false;
                });
                return false;
            } else {
                return false;
            }
        });
    });
});

HTMl

<div id="navi">
<ul class="ex_clearfix">
<li><a href="img/image01.jpg"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li>
<li><a href="img/image02.jpg"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li>
<li><a href="img/image03.jpg"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li>
<li><a href="img/image04.jpg"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li>
</ul>
<!-- navi_end --></div>

<div id="photo">
<img src="img/image01.jpg" alt="orange" width="700" height="350">
<!-- photo_end --></div>

<!-- 1ページに複数の場合はコチラ↓class指定 -->
<div class="mod_gallery">
<div class="mod_gallery_navi">
<ul class="ex_clearfix">
<li><a class="gallery01" href="img/image01.jpg"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li>
<li><a class="gallery01" href="img/image02.jpg"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li>
<li><a class="gallery01" href="img/image03.jpg"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li>
<li><a class="gallery01" href="img/image04.jpg"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li>
</ul>
<!-- mod_gallery_navi_end --></div>
<div class="mod_gallery_photo gallery01">
<img src="img/image01.jpg" alt="orange" width="700" height="350">
<!-- mod_gallery_photo_end --></div>
<!--mod_gallery_end--></div>

CSS

#navi li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
#navi li a{
	display:block;
}
#navi li a:link    {}
#navi li a:visited {}
#navi li a:hover   {opacity:0.8;}
#navi li a:active  {opacity:0.8;}
/* IE用 ↓*/
#navi li a:hover img {filter:alpha(opacity=80);}

#photo{
	margin:20px 0 0 0;
}
#photo img{
 position:absolute;
 width:100%;
 height:auto;
 max-width:700px;
}

/* mod_gallery(複数設置の場合)
-----------------------------------------*/
.mod_gallery{
 margin:20px 0 20px 0;
}
/* .mod_gallery_navi */
.mod_gallery_navi li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.mod_gallery_navi li a{
	display:block;
}
.mod_gallery_navi li a:link    {}
.mod_gallery_navi li a:visited {}
.mod_gallery_navi li a:hover   {opacity:0.8;}
.mod_gallery_navili a:active  {opacity:0.8;}
/* IE用 ↓*/
.mod_gallery_navi li a:hover img {filter:alpha(opacity=80);}

/* mod_gallery_photo */
.mod_gallery_photo{
	margin:20px 0 0 0;
}
.mod_gallery_photo img{
 position:absolute;
 width:100%;
 height:auto;
 max-width:700px;
}

© CodingMania.net