Load more button for lightboxes

JavaScript Code: #

<script>
jQuery(function($){

DFLIP.defaults.loadMoreCount = 8;

  DFLIP.parseBooks = function () {
    $('.dflip-books').each(function () {
      var booksWrapper = $(this);
      var parsed = booksWrapper.attr("parsed") || booksWrapper.attr("df-parsed");

      //skip if already parsed or failed
      if (parsed !== "true") {
        booksWrapper.attr("df-parsed", "true");

        var count = 0;
        var books = booksWrapper.find('._df_button, ._df_thumb, ._df_custom, ._df_book');

        var totalBooks = books.length;
        books.each(function () {
          //skip first 10
          count++;
          if (count > DFLIP.defaults.loadMoreCount)
            $(this).attr("skip-parse", "true");

        })
        if (totalBooks > DFLIP.defaults.loadMoreCount) {
          booksWrapper.append("<div class='df-more-button-wrapper'><div class='df-more-button'>Load More..</div></div>");
        }
      }

    });
    $('._df_button, ._df_thumb, ._df_custom, ._df_book').each(function () {

      var book = $(this);
      if (book.attr("skip-parse") === "true") return;
      //fetch any existing values
      var parsed = book.attr("parsed") || book.attr("df-parsed");

      //skip if already parsed or failed
      if (parsed !== "true") {
        book.attr("df-parsed", "true")

        if (book.hasClass("_df_book")) {

          var book_id = book.attr("id"),
            slug = book.attr("slug");
          var options = DFLIP.getOptions(book);
          options.id = book_id;
          if (slug != null)
            options.slug = slug;
          if (book_id) {
            window[book_id.toString()] = $(book).flipBook(options.source, options);
          }
          else {
            $(book).flipBook(options.source, options);
          }

        }
        else {

          if (book.hasClass("_df_thumb")) {
            var wrapper = $("<div class='_df_book-cover'>");

            var text = book.html().trim();
            book.html("");
            var title = $("<span class='_df_book-title'>").html(text).appendTo(wrapper);

            var thumb = book.attr("thumb") || book.attr("df-thumb"),
              thumbType = book.attr("thumbtype") || DFLIP.defaults.thumbElement || "div",
              tags = book.attr("tags") || book.attr("df-tags");

            if (tags) {
              tags = tags.split(",");

              if (tags.length > 0) {
                for (var tagcount = 0; tagcount < tags.length; tagcount++) {
                  book.append("<span class='_df_book-tag'>" + tags[tagcount] + "</span>");
                }
              }
            }

            if (thumb != null && thumb.toString().trim() != '') {
              if (thumbType == 'img') {
                wrapper.append('<img src="' + thumb + '" alt="' + text + '"/>');
                book.attr("thumb-type", "img");
              }
              else {
                wrapper.css({
                  backgroundImage: "url('" + thumb + "')"
                });
              }
            }
            else {
              wrapper.addClass("_df_thumb-not-found");
            }

            book.append(wrapper);
          }

        }

      }
    });

  };

    jQuery("body").on('click', '.dflip-books .df-more-button', function () {
      var $this = $(this);
      var booksWrapper = $this.closest(".dflip-books");
      if (booksWrapper.length > 0) {
        var count = 0;
        var books = booksWrapper.find('._df_button, ._df_thumb, ._df_custom, ._df_book');
        books.each(function () {
          var book = $(this);
          if (book.attr("skip-parse") === "true") {
            //skip first 10
            if (count < DFLIP.defaults.loadMoreCount)
              $(this).removeAttr("skip-parse");

            count++;
          }
        });
        DFLIP.parseBooks();
      }
    });

});
</script>

StyleSheet CSS: #

<style>

.dflip-books [skip-parse] {
  display: none;
}

.dflip-books {
  text-align: center;
}

.df-more-button-wrapper {
  text-align: center;
  display: none;
  margin-top: 20px;
}

.dflip-books [skip-parse] ~ .df-more-button-wrapper {
  display: block;
}

.df-more-button {
  padding: 10px 15px;
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
  background: #0085ba;
  color: white;
}

._df_thumb[thumbtype=img] img {
    max-width: 100%;
    max-height: 200px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
</style>