【jQuery】フォトギャラリーのサンプル

jQueryを使ったフォトギャラリーのサンプル。
上の画像をクリックすると、下に拡大表示される。
(サンプルコードでは、リストにマウスオーバー時にサムネイルの色が変わるが、デモでは機能していないので注意)

■デモ

■HTML

<div class="sumbnail-List" style="clear:both;">
    <ul class="sideImgList">
        <li><img src="/wp-content/uploads/2018/09/jQuery.jpg"></li>
        <li><img src="/wp-content/uploads/2018/08/bash.jpg"></li>
        <li><img src="/wp-content/uploads/2018/06/SQLServer.jpg"></li>
        <li><img src="/wp-content/uploads/2018/06/mongoDB.jpg"></li>
        <li><img src="/wp-content/uploads/2018/06/JavaScript.jpg"></li>
        <li><img src="/wp-content/uploads/2018/05/C.png"></li>
    </ul>
</div>
<div style="clear:both;"></div>
<hr/>
<div class="mainArea">
    <img />
</div>

</ul>

</div>

<hr/>

<img />

</div>

■CSS

<style type="text/css">
        /*拡大表示エリア*/
        .mainArea {
            width : 300px !important;
        }
        .mainArea img {
            /*表示エリアの横幅に合わせて表示させる*/
            width : 300px !important;
            object-fit: contain !important;
        }
        
        /*サムネイルリスト*/
        .sideImgList {
            list-style-type: none !important; /*リストのスタイルを解除*/
            padding:0px !important;
        }
        .sideImgList li {
            float: left !important; /*リストを横並びに表示*/
            height: 85px !important;
            widows: 85px !important;
            margin: 5px !important;
        }
        .sideImgList li img {
            height: 80px !important;
            width: 80px !important;
            cursor: pointer !important;
            object-fit: contain !important;
            background-color: rgb(238, 238, 238) !important;
        }

        /*サムネイルリストマウスオーバー用のCSS*/
        .list-selected {
            width: 80px !important;
            height: 80px !important;
            background-color: aqua !important; /* カラーフィルタ効果の色を指定 */
        }
        .list-selected img {
            opacity: 0.6 !important;    /* カラーフィルタ効果の度合いを指定(※) */
        }

    </style>

/*拡大表示エリア*/

.mainArea {

width : 300px !important;

}

.mainArea img {

/*表示エリアの横幅に合わせて表示させる*/

width : 300px !important;

object-fit: contain !important;

}

/*サムネイルリスト*/

.sideImgList {

list-style-type: none !important; /*リストのスタイルを解除*/

padding:0px !important;

}

.sideImgList li {

float: left !important; /*リストを横並びに表示*/

height: 85px !important;

widows: 85px !important;

margin: 5px !important;

}

.sideImgList li img {

height: 80px !important;

width: 80px !important;

cursor: pointer !important;

object-fit: contain !important;

background-color: rgb(238, 238, 238) !important;

}

/*サムネイルリストマウスオーバー用のCSS*/

.list-selected {

width: 80px !important;

height: 80px !important;

background-color: aqua !important; /* カラーフィルタ効果の色を指定 */

}

.list-selected img {

opacity: 0.6 !important; /* カラーフィルタ効果の度合いを指定(※) */

}

</style>

■JavaScript

jQuery(function($) {
    //ページ読み込み時にリストの先頭の画像を拡大表示する。
    $('.mainArea img').attr('src', $('.sumbnail-List img:first').attr('src'));

    //リストのアイテムがマウスオーバーされたら色を変える。
    $('.sumbnail-List li img').hover(
        function() {
            $(this).wrap("<div class='list-selected'></div>");
        },
        //マウスオーバー解除されたら戻す。
        function() {
            $(this).unwrap();
        }
    );

    //リストのアイテムがクリックされたら拡大表示する。
    $('.sumbnail-List img').click(function() {
        $('.mainArea img').attr('src', $(this).attr('src'));
    });
})

jQuery(function($) {

//ページ読み込み時にリストの先頭の画像を拡大表示する。

$('.mainArea img').attr('src', $('.sumbnail-List img:first').attr('src'));

//リストのアイテムがマウスオーバーされたら色を変える。

$('.sumbnail-List li img').hover(

function() {

$(this).wrap("<div class='list-selected'></div>");

//マウスオーバー解除されたら戻す。

function() {

$(this).unwrap();

}

);

//リストのアイテムがクリックされたら拡大表示する。

$('.sumbnail-List img').click(function() {

$('.mainArea img').attr('src', $(this).attr('src'));

});

})

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル