1. Home
  2. Docs
  3. Advanced Customizations
  4. Load more button for lightboxes

Load more button for lightboxes

Links issue
Booklet Mode
CSS Book
Image Flipbook
Open Book
Open Book
Toa Heftiba Travel Photography Portfolio
Test dFlip Manual Book
Double Internal Pages – Image
Meat Atlas
Test Book
Reflection
GLFW manual
Mazda 6
Mazda CX-9
Mazda 3
Lancom company profile
H9 Catalogue
Brand Manual Template
Characters Mix
DearFlip Manual
Visit Nepal 2020
Real Life Disney

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>
For WordPress, please read on 
How to add Custom Code to WordPress Pages

How can we help?

Leave a Comment