jube-fork/Jube.App/wwwroot/kendo/examples/fx/pageturn.html

<!DOCTYPE html>
<html>
<head>
    <title>Page Turn</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div id="wrap" class="first-page">
        <ul id="book">
            <li><img src="../content/web/fx/pageturn/maserati.jpg" alt="Page 6" /></li>
            <li><img src="../content/web/fx/pageturn/mazda.jpg" alt="Page 5" /></li>
            <li><img src="../content/web/fx/pageturn/mercedes.jpg" alt="Page 4" /></li>
            <li><img src="../content/web/fx/pageturn/audi.jpg" alt="Page 3" /></li>
            <li><img src="../content/web/fx/pageturn/ferrari.jpg" alt="Page 2" /></li>
            <li class="current"><img src="../content/web/fx/pageturn/mini.jpg" alt="Page 1" /></li>
        </ul>

        <a href="#" id="previous">Previous page</a>
        <a href="#" id="next">Next page</a>
    </div>

    <script>
        function current(page) {
            var book = $("#book"),
                pages = book.children(),
                pagesCount = pages.length,
                current = pages.filter(".current"),
                currentIndex = pagesCount - current.index(),
                newPage;

            if (!arguments.length) {
                return currentIndex;
            }

            if (book.data("animating")) {
                return;
            }

            $("#wrap").toggleClass("first-page", page == 1)
                      .toggleClass("last-page", page == pagesCount);

            if (page != currentIndex) {
                current.removeClass("current");
                newPage = pages.eq(pagesCount - page).addClass("current");

                if (page > currentIndex) {
                    kendo.fx(book).pageturnHorizontal(current, newPage).play();
                } else {
                    kendo.fx(book).pageturnHorizontal(newPage, current).reverse();
                }
            }
        }

        $("#previous").click(function(e) {
            e.preventDefault();
            current(Math.max(1, current() - 1));
        });

        $("#next").click(function(e) {
            e.preventDefault();
            current(Math.min(6, current() + 1));
        });
    </script>

    <style>
        #wrap {
            background-image: url("../content/web/fx/pageturn/book.png");
            width: 657px;
            height: 482px;
            margin: 2.5em auto 4em;
            position: relative;
        }

        #book {
            position: relative;
            width: 650px;
            height: 477px;
            margin: 0 auto;
            padding: 0;
            list-style-type: none;
        }

        #book > li {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        #actions {
            overflow: hidden;
            margin: 0 auto 3em;
            width: 650px;
        }

        #previous, #next {
            text-decoration: none;
            text-indent: -999em;
            overflow: hidden;
            display: block;
            height: 100%;
            width: 90px;
            position: absolute;
            top: 0;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            opacity: .5
        }

        #previous:hover, #next:hover {
            opacity: 1;
        }

        #previous {
            left: 0;
            background-image: url("../content/web/fx/pageturn/arrow-left.png");
        }

        #next {
            right: 0;
            background-image: url("../content/web/fx/pageturn/arrow-right.png");
        }

        .first-page #previous,
        .last-page #next {
            display: none;
        }
    </style>
</div>



    
</body>
</html>