index.html

<!doctype html>
<html lang="pt-br">

<head>
    <title>Kappi Thuruthile Karukanamubukal</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <meta name="description" content=" Kappi Thuruthile Karukanamubukal | Marian College Magazine 2020  Developed by Verbalcodes">
    <meta property="og:image" content="pics/thumbnail-title.jpg">
    <script type="text/javascript" src="js/jquery.min.1.7.js"></script>
    <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="js/hash.js"></script>


</head>

<body>

    <div id="canvas">

        <div class="zoom-icon zoom-icon-in"></div> 
        <!-- <p class="mcsc">MCSC 2020</p> -->
        <div class="arrow-mobile arrow-mobile-left"></div>
        <div class="arrow-mobile arrow-mobile-right"></div>

        <div class="magazine-viewport">
            <div class="container">
                <div class="magazine">
                    <!-- Next button -->
                    <div ignore="1" class="next-button"></div>
                    <!-- Previous button -->
                    <div ignore="1" class="previous-button"></div>
                </div>
            </div>
        </div>
        <audio id="audio" src="pics/page-flip.mp3"></audio> 
        <footer class="footer">
            <p>Copyright &copy;Kappithuruthile Karukanamubukal,2020 All Rights Reserved MCSC ,Marian College Kuttikanam , Powered by <a href="https://www.verbalcodes.com">verbalcodes.com</a></p>
            <!-- Start of WebFreeCounter Code -->
            <img src="https://www.webfreecounter.com/hit.php?id=grufnxko&nd=6&style=1" border="0" alt="visitor counter">
            <!-- End of WebFreeCounter Code -->
        </footer >

        <script type="text/javascript">
            function loadApp() {
                $('#canvas').fadeIn(1000);

                var flipbook = $('.magazine');


                // Check if the CSS was already loaded

                if (flipbook.width() == 0 || flipbook.height() == 0) {
                    setTimeout(loadApp, 10);
                    return;
                }

                // Mudar o numero de páginas aqui
                var numPagesGlobal = null;

                // Create the flipbook
                var audio = document.getElementById("audio");


                flipbook.turn({

                    // Magazine width

                    width: 2480,
                    // width: 922,

                    // Magazine height

                    height: 1754,
                    // height: 600,
                    
                    // Duration in millisecond

                    duration: 1000,

                    // Hardware acceleration

                    acceleration: !isChrome(),

                    // Enables gradients

                    gradients: true,

                    // Auto center this flipbook

                    autoCenter: true,

                    // Elevation from the edge of the flipbook when turning a page

                    elevation: 150,

                    // The number of pages

                    pages: 122,


                    // Events


                    when: {
                        turning: function(event, page, view) {

                            audio.play() 

                            var book = $(this),
                                currentPage = book.turn('page'),
                                pages = book.turn('pages');
                            numPagesGlobal = book.turn('pages');


                            // Update the current URI

                            Hash.go('page/' + page).update();

                            // Show and hide navigation buttons

                            disableControls(page);


                            $('.thumbnails .page-' + currentPage).
                            parent().
                            removeClass('current');

                            $('.thumbnails .page-' + page).
                            parent().
                            addClass('current');


                        },

                        turned: function(event, page, view) {

                            disableControls(page);

                            var myCurrentPage = ($(".magazine").turn("page"));

                            if (myCurrentPage == numPagesGlobal) {
                                $('.arrow-mobile-right').hide();
                            } else {
                                $('.arrow-mobile-right').show();
                            }

                            if (myCurrentPage == 1) {
                                $('.arrow-mobile-left').hide();
                            } else {
                                $('.arrow-mobile-left').show();
                            }


                            $(this).turn('center');

                            if (page == 1) {
                                $(this).turn('peel', 'br');
                            }

                        },

                        missing: function(event, pages) {

                            // Add pages that aren't in the magazine

                            for (var i = 0; i < pages.length; i++)
                                addPage(pages[i], $(this));

                        }
                    }

                });


                // Zoom.js

                $('.magazine-viewport').zoom({
                    flipbook: $('.magazine'),

                    max: function() {

                        return largeMagazineWidth() / $('.magazine').width();

                    },

                    when: {

                        swipeLeft: function() {

                            $(this).zoom('flipbook').turn('next');

                        },

                        swipeRight: function() {

                            $(this).zoom('flipbook').turn('previous');

                        },


                        zoomIn: function() {


                            $('.made').hide();
                            $('.magazine').removeClass('animated').addClass('zoom-in');
                            $('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');

                            if (!window.escTip && !$.isTouch) {
                                escTip = true;

                                $('<div />', {
                                    'class': 'exit-message'
                                }).
                                html('<div>Press ESC to exit</div>').
                                appendTo($('body')).
                                delay(2000).
                                animate({
                                    opacity: 0
                                }, 500, function() {
                                    $(this).remove();
                                });
                            }
                        },

                        zoomOut: function() {

                            $('.exit-message').hide();

                            $('.made').fadeIn();
                            $('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');

                            setTimeout(function() {
                                $('.magazine').addClass('animated').removeClass('zoom-in');
                                resizeViewport();
                            }, 0);

                        }
                    }
                });


                // Zoom event

                if ($.isTouch)
                    $('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
                else
                    $('.magazine-viewport').bind('zoom.tap', zoomTo);


                // Using arrow keys to turn the page

                $(document).keydown(function(e) {


                    var previous = 37,
                        next = 39,
                        esc = 27;

                    switch (e.keyCode) {
                        case previous:

                            // left arrow
                            $('.magazine').turn('previous');
                            e.preventDefault();

                            break;
                        case next:

                            //right arrow
                            $('.magazine').turn('next');
                            e.preventDefault();

                            break;
                        case esc:

                            $('.magazine-viewport').zoom('zoomOut');
                            e.preventDefault();

                            break;
                    }

                });

                // URIs - Format #/page/1 

                Hash.on('^page\/([0-9]*)$', {
                    yep: function(path, parts) {
                        var page = parts[1];

                        if (page !== undefined) {
                            if ($('.magazine').turn('is'))
                                $('.magazine').turn('page', page);
                        }

                    },
                    nop: function(path) {

                        if ($('.magazine').turn('is'))
                            $('.magazine').turn('page', 1);
                    }
                });


                $(window).resize(function() {
                    resizeViewport();
                }).bind('orientationchange', function() {
                    resizeViewport();
                });


                // Events for the next button
                $('.arrow-mobile-right').click(function() {

                    $('.magazine').turn('next');

                });


                // Events for the previus button
                $('.arrow-mobile-left').click(function() {

                    $('.magazine').turn('previous');

                });


                resizeViewport();

                $('.magazine').addClass('animated');

            }

            // Zoom icon

            $('.zoom-icon').bind('mouseover', function() {

                if ($(this).hasClass('zoom-icon-in'))
                    $(this).addClass('zoom-icon-in-hover');

                if ($(this).hasClass('zoom-icon-out'))
                    $(this).addClass('zoom-icon-out-hover');

            }).bind('mouseout', function() {

                if ($(this).hasClass('zoom-icon-in'))
                    $(this).removeClass('zoom-icon-in-hover');

                if ($(this).hasClass('zoom-icon-out'))
                    $(this).removeClass('zoom-icon-out-hover');

            }).bind('click', function() {

                if ($(this).hasClass('zoom-icon-in'))
                    $('.magazine-viewport').zoom('zoomIn');
                else if ($(this).hasClass('zoom-icon-out'))
                    $('.magazine-viewport').zoom('zoomOut');

            });

            $('#canvas').hide();


            // Load the HTML4 version if there's not CSS transform

            yepnope({
                test: Modernizr.csstransforms,
                yep: ['js/turn.js'],
                nope: ['js/turn.html4.min.js'],
                both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
                complete: loadApp
            });
        </script>
        

</body>

</html>