This package has been deprecated

    Author message:

    Please use https://www.npmjs.com/package/@paxperscientiam/bookblock instead

    bookblock
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    Fork Notice

    Aiming to turn codrops awesome work into an easy to use package!

    Testing 1 2 3

    git clone https://github.com/paxperscientiam/BookBlock
    cd BookBlock
    pnpm i && pnpm run build && pnpm run serve
    # or, if you have serve installed 
    serve dist

    With the above, fuse-box should start a server.

    BookBlock

    A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.

    article on Codrops

    demo

    License: http://tympanus.net/codrops/licensing/

    BookBlock Configuration Options

    // page to start on
    startPage : 1,
    // vertical or horizontal flip
    orientation : 'vertical',
    // ltr (left to right) or rtl (right to left)
    direction : 'ltr',
    // speed for the flip transition in ms
    speed : 1000,
    // easing for the flip transition
    easing : 'ease-in-out',
    // if set to true, both the flipping page and the sides will have an overlay to simulate shadows
    shadows : true,
    // opacity value for the "shadow" on both sides (when the flipping page is over it)
    // value : 0.1 - 1
    shadowSides : 0.2,
    // opacity value for the "shadow" on the flipping page (while it is flipping)
    // value : 0.1 - 1
    shadowFlip : 0.1,
    // if we should show the first item after reaching the end
    circular : false,
    // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´
    nextEl : '',
    // if we want to specify a selector that triggers the prev() function
    prevEl : '',
    // autoplay. If true it overwrites the circular option to true
    autoplay : false,
    // time (ms) between page switch, if autoplay is true
    interval : 3000,
    // callback after the flip transition
    // old is the index of the previous item
    // page is the current item´s index
    // isLimit is true if the current page is the last one (or the first one)
    onEndFlip : function(old, page, isLimit) { return false; },
    // callback before the flip transition
    // page is the current item´s index
    onBeforeFlip : function(page) { return false; }

    Usage

    Example (see example for more info)

    <div>
            <h3>Illustrations by <a href="http://dribbble.com/kevinhowdeshell">Kevin Howdeshell</a></h3>
            <div id="bb-bookblock" class="bb-bookblock">
                    <div class="bb-item">
                            <a href="#"><img src="images/demo1/1.jpg" alt="image01"/></a>
                    </div>
                    <div class="bb-item">
                            <a href="#"><img src="images/demo1/2.jpg" alt="image02"/></a>
                    </div>
            </div>
            <nav class="bb-nav-container">
                    <a id="bb-nav-first" href="#" class="bb-nav bb-icon bb-icon-first">
                First page</a>
                    <a id="bb-nav-prev" href="#" class="bb-nav bb-icon bb-icon-arrow-left">Previous</a>
                    <a id="bb-nav-next" href="#" class="bb-nav bb-icon bb-icon-arrow-right">Next</a>
                    <a id="bb-nav-last" href="#" class="bb-nav bb-icon bb-icon-last">Last page</a>
            </nav>
    </div>
    <script>
      $(function () {
          const sexy = $( "#bb-bookblock" ).bookBlock({
              _dummy: true,
              circular: true,
              height: "300px",
              width: "400px",
          })
      });
    </script> 

    Install

    npm i bookblock

    DownloadsWeekly Downloads

    4

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    2.39 MB

    Total Files

    124

    Last publish

    Collaborators

    • avatar