0

jQuery を使用して画像ビューアーを作成しようとしていますが、これまで修正できなかった問題に遭遇しました。画像ビューアは非常に基本的なもので、上部に 1 つの大きな画像と下部に 6 つの小さな画像があります。ユーザーが小さい画像の 1 つをクリックすると、大きい画像の src が小さい画像の src に変わります。また、クリックすると新しい小さな画像を動的に追加するボタンもあります。これはすべてそのままで問題なく動作します。

新しい画像が生成されたときにページが自動的に下にスクロールして表示されるように、スクロール効果を追加することにした後、問題が明らかになりました。これにより、ユーザーが手動で行う必要がなくなります。私はこれを機能させましたが、手動スクロールの問題を引き起こしているようです。これは、画像を追加して下にスクロールした後、マウス ホイールを使用して手動で上にスクロールできない場合があることを意味します。

マウス ホイールに反応することもありますが、それは 1 ～ 20 秒の間続く遅延の後でのみです。マウス ホイールに反応しないときは、サイド スクロール バーを試してみます。画像を 1 つずつ追加し、完全に読み込まれるのを待っていれば、通常は問題がないことがわかりました。しかし、新しい画像の追加ボタンを立て続けに押し続けると、問題が発生するようです。また、十分に長く待つと問題が解決するように見えることもわかりました。これは、スクロール効果が非常に遅く、手動でスクロールできるようになるまでブラウザーが完了するのを待たなければならないためだと思います。

新しい画像が読み込まれ、別の新しい画像が追加される前にスクロールが行われるように、画像の追加ボタンを押した後に無効にすることを考えましたが、別の解決策があることを願っています。

どんな助けや指示もいただければ幸いです。ありがとう

ライブデモへのリンク

HTML

<div id="container">

    <button>Add<br>Images</button>

    <div id="large-image-wrap">
        <img src="http://bilal.cu.cc/images/profile_covers/profile_cover36.jpg">
    </div>

    <div id="small-images-wrap" class="clearfix">
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover36.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover64.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover44.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover45.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover31.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover65.jpg"></div>
    </div>

</div>

CSS

#container{
width:960px;
margin:0 auto 20px auto;
position:relative;
}

button{
position:fixed;
margin-left:-105px;
margin-top:19px;
width:100px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
}

#large-image-wrap{
width:960px;
height:320px;
position:fixed;
z-index:10;
}

#large-image-wrap img{
width:100%;
height:auto;
border-top:20px solid white;
border-bottom:13px solid white;
}

#small-images-wrap{
width:960px;
position:relative;
top:353px;
}

.si-box{
width:32%;
height:auto;
float:left;
margin-bottom:1%;
}

.si-box img{
width:100%;
height:auto;
}

div.si-box:nth-child(2), div.si-box:nth-child(3n+2){
margin:0 2%;
}

jQuery

$(document).ready(function(){

    var imgNum = 1; 

    // Add new image
    $("button").on("click", function(){
        if(imgNum > 70){imgNum = 1};
        $("#small-images-wrap div:last-of-type").after('<div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover'+ imgNum +'.jpg"></div>');
        imgNum++;

        // Scroll to added image
        $('html, body').animate({scrollTop: $("#small-images-wrap div:last-of-type").offset().top}, 2000);
    });

    // On click effect
    $(document).on('click', '.si-box img',  function () {
        var $imgSrc = $(this).attr("src");
        $("#large-image-wrap img").attr("src", $imgSrc);
    });

}); // Document Ready End
4

0 に答える 0