Display specific number of images when button is clicked

Question

I need to load all images in a gallery but only display six to start out with. I have a button that the user can click and when that button is clicked, three more images will load. I assume this can be accomplished with jQuery but I don't know what to do after the initial images are loaded.

Right now I have:

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

});

That hides all of the images except for six. Now, when I click on a button I would like to display the next three images. When the button is clicked again three more images will load.

EDIT:

Ok I have this pretty much figured out. Unfortunately, there is only one image being loaded at a time. How can I change it to load three at a time?

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;
        }
    });
    });
});

Answer 1

In the click handler, give this:

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

Fiddle: http://jsfiddle.net/praveenscience/tSQfa/

---

You can also improve the above script by hiding once all the items have been displayed.

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

Fiddle: http://jsfiddle.net/praveenscience/tSQfa/1/

Answer 2

I would suggest processing the images on the server side. For example, spit out all the images you need for the page on the server and after the nth one, the 6th in your class, add a .none class to those images. The .none class would be display:none. However, if you have to do this client side, $('.gallery dl:gt(6)').addClass('none');.

Answer 3

I code example display images in gallery, you can see it.

 $(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>