Pdf to flipbook converter

Question

1.00/5 (4 votes)

See more:

I have converted uploaded pdf to images now trying to convert images to flipbook but flipbook pages is not in correct order

using visual studio .net mvc 
@{
    ViewData["Title"] = "View PDF Pages";
    var imageUrls = ViewData["ImageUrls"] as List<string>;
    var fileName = ViewData["FileName"] as string;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" type="text/css" href="~/css/turn.css">
     <link rel="stylesheet" type="text/css" href="~/css/site.css">

    

</head>
<body>
    <a href="@Url.Action("DownloadPdf", "Home", new { fileName })" class="download-btn">Download PDF</a>
    <div id="flipbook">
        @for (int i = 0; i < imageUrls.Count; i++)
        {
            <div class="page" style="left:@((i % 2 == 0) ? "0" : "50%")">
                <img src="@imageUrls[i]" alt="Page @((i / 2) + 1)">
            </div>
        }
        <div class="arrow arrow-left" id="prevBtn">❮</div>
        <div class="arrow arrow-right" id="nextBtn">❯</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            const pages = $('.page');
            let currentPage = 0;

            function showPages(index) {
                pages.removeClass('flipped');
                for (let i = 0; i <= index * 2; i++) {
                    if (i % 2 !== 0) {
                        pages.eq(i).addClass('flipped');
                    }
                }
            }

            $('#nextBtn').click(function () {
                if (currentPage < Math.floor(pages.length / 2)) {
                    currentPage++;
                    showPages(currentPage);
                }
            });

            $('#prevBtn').click(function () {
                if (currentPage > 0) {
                    currentPage--;
                    showPages(currentPage);
                }
            });
            pages.forEach((page, index) => {
                // Set the z-index
                page.style.zIndex = pages.length - index;

            showPages(currentPage);
        });
    </script>
</body>
</html>

css

#flipbook {
    width: 800px; /* Adjust width to accommodate two pages */
    height: 600px; /* Adjust height as needed */
    margin: 20px auto;
    position: relative;
    perspective: 1000px;
}




.page {
    width: 50%; /* Each page takes half of the container */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s ease;
    backface-visibility: visible;
    transform-style: preserve-3d; /* Ensures proper 3D perspective */
}

    .page img {
        width: 100%;
        height: 100%;
    }

    .page.flipped {
        transform: rotateY(-180deg); /* Rotate to the back side */
        z-index: 2;
    }


.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
    cursor: pointer;
    z-index: 1000;
    color: #333;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}

.nav-buttons {
    text-align: center;
    margin-top: 20px;
}

.download-btn {
    display: block;
    margin: 20px;
}

What I have tried:

i tried converting uploaded pdf to images now trying to convert images to flipbook i have attached above code where can i make changes

Posted 11-Jul-24 22:08pm

Bharath Kumar Reddy G

Updated 12-Jul-24 1:47am

v2

Add a Solution

Comments

Richard Deeming 12-Jul-24 4:26am

Well, there's obviously a secret error somewhere in your secret code. You should fix that!

Seriously, how do you expect anyone to help you fix a problem you can't clearly describe, in code we can't see, running on a system we can't access?!

Click the green "Improve question" link. Update your question to include a clear and precise description of the problem, the relevant parts of your code, and the full details of what you have tried and where you are stuck.

Bharath Kumar Reddy G 12-Jul-24 7:48am

richard thanks for the quick reply can u please check nd say where can i make changes

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)