0

ギャラリーにすべての画像をロードする必要がありますが、最初は 6 つしか表示されません。ユーザーがクリックできるボタンがあり、そのボタンをクリックすると、さらに 3 つの画像が読み込まれます。これはjQueryで実現できると思いますが、最初の画像が読み込まれた後に何をすべきかわかりません。

今私は持っています：

jQuery(document).ready(function () {
    jQuery('.gallery dl:lt(6)').show();

});

これにより、6 つを除くすべての画像が非表示になります。ここで、ボタンをクリックすると、次の 3 つの画像を表示したいと思います。ボタンをもう一度クリックすると、さらに 3 つの画像が読み込まれます。

編集：

わかりました、私はこれをかなり理解しました。残念ながら、一度に読み込まれる画像は 1 つだけです。一度に3つロードするように変更するにはどうすればよいですか?

jQuery(document).ready(function () {
    jQuery('.gallery dl:lt(6)').show();

    jQuery('.more-images').click(function () {
        jQuery('.gallery dl').each(function () {
            if (jQuery(this).css('display') == 'none') {
                jQuery(this).css('display', 'block');
                return false;
            }
        });

    var i = 0;

    jQuery('.gallery dl').each(function () {
        if (jQuery(this).css('display') != 'none') {
            i+3;
        }
    });
    });
});
4

3 に答える 3

0

ギャラリーに画像を表示するコードの例を示します。

$(document).ready(function () {
    $('.gallery ul li').hide();
    $('.gallery ul li:lt(5)').show();
    $('a').click(function () {
        $('.gallery ul li:not(:visible):lt(5)').show();
        return false;
    });
});
.clear{
  clear:both;
}
.gallery{
  display:inline-block;
}
.gallery>ul{
  display:inline-block;
}
.gallery>ul>li{
  float:left;
  list-style:none;
  width:10%;
  max-width:12.5%;
  position:relavtive;
  padding: 5px;
}
.gallery>ul>li:hover{
  background:#2c2c30;
  transition:all 0.25s;
  cursor:pointer;
}
.gallery>ul>li>img{
  width:100%;
  height:auto;
}
/*Nút Hiển Thị Thêm*/
.button-display-image{
  text-align:center;
}
#btn-display{
  text-decoration:none;
}
.btn{
  padding:6px 12px;
  text-align:center;
  font-size:14px;
  text-transform:uppercase;
  font-family:arial;
}
.btn-default{
  color:#000;
  background-color:#fff;
  border:#000 solid 1px;
}
.btn-default:hover{
  background-color:#000;
  color:#fff;
  border:solid 1px #fff;
  transition:all 0.25s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="gallery">
<ul>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
</ul>
<div class="clear"></div>
</div>
<div class="button-display-image">
<a id="btn-display" class="btn btn-default" href="#">Hiển thị thêm ảnh</a>
</div>

于 2016-10-11T11:23:34.263 に答える
0

サーバー側で画像を処理することをお勧めします。たとえば、サーバー上のページに必要なすべての画像を吐き出し、クラスの 6 番目である n 番目の画像の後に、それらの画像に .none クラスを追加します。.none クラスは display:none になります。ただし、このクライアント側で行う必要がある場合は、$('.gallery dl:gt(6)').addClass('none');.

于 2013-06-05T03:58:38.340 に答える
0

クリック ハンドラーで、次のように指定します。

jQuery('.gallery dl:not(:visible):lt(3)').show();

フィドル: http://jsfiddle.net/praveenscience/tSQfa/

すべてのアイテムが表示されたら非表示にすることで、上記のスクリプトを改善することもできます。

$('a').click(function () {
    $('.gallery dl:not(:visible):lt(3)').show();
    if ($('.gallery dl:not(:visible)').length == 0)
        $(this).hide();
    return false;
});

フィドル: http://jsfiddle.net/praveenscience/tSQfa/1/

于 2013-06-05T03:34:00.263 に答える