Büscher Regal

<link rel="stylesheet" href="../forum/real3d-flipbook/build/css/flipbook.min.css">

<script data-relocate="true" src="forum/real3d-flipbook/build/js/flipbook.min.js"></script>

<script data-relocate="true">
    $(document).ready(function () {
        const options = {
            pages: [
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/1.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/1.jpg',
                    title: 'Cover',
                },
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/2.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/thumb2.jpg',
                    title: 'Content',
                },
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/3.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/thumb3.jpg',
                    title: 'Welcome',
                },
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/4.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/thumb4.jpg',
                    title: 'Design with attitude',
                },
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/5.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/thumb5.jpg',
                },
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/6.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/thumb6.jpg',
                    title: 'New Arrivals',
                },
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/7.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/thumb7.jpg',
                },
                {
                    src: 'forum/real3d-flipbook/examples/images/catalog/8.jpg',
                    thumb: 'forum/real3d-flipbook/examples/images/catalog/thumb8.jpg',
                    title: 'Get our newsletter',
                },
            ],
            lightBox: true,
        };
        $('.book-1').flipBook(options);
        $('.book-2').flipBook(options);
        $('.book-3').flipBook(options);
        $('.book-4').flipBook(options);
    });
</script>

<style>
    .bookshelf .thumb {
        display: inline-block;
        cursor: pointer;
        margin: 0 0.5%;
        width: 15% !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        max-width: 100px;
    }
    .bookshelf .thumb img {
        width: 100%;
        display: block;
        vertical-align: top;
    }
    .bookshelf .shelf-img {
        z-index: 0;
        height: auto;
        max-width: 100%;
        vertical-align: top;
        margin-top: -12px;
    }
    .bookshelf .covers {
        width: 100%;
        height: auto;
        z-index: 99;
        position: relative;
        text-align: center;
    }
    .bookshelf {
        text-align: center;
        padding: 0;
    }
</style>

<div class="bookshelf">
    <div class="covers">
        <div class="thumb book-1"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-2"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-3"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-4"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-4"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
    </div>
    <img class="shelf-img" src="forum/real3d-flipbook/examples/images/shelf_glass.png" />
</div>
<div class="bookshelf">
    <div class="covers">
        <div class="thumb book-1"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-2"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-3"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
    </div>
    <img class="shelf-img" src="forum/real3d-flipbook/examples/images/shelf_glass.png" />
</div>
<div class="bookshelf">
    <div class="covers">
        <div class="thumb book-1"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-2"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-3"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
        <div class="thumb book-4"><img src="forum/real3d-flipbook/examples/images/catalog/thumb1.jpg" /></div>
    </div>
    <img class="shelf-img" src="forum/real3d-flipbook/examples/images/shelf_glass.png" />
</div>