Início / coding / Perguntas / 79595570
Accepted
iiRosie1
Asked: 2025-04-28 07:15:05 +0800 CST

O Flipbook funciona apenas no modo de inspeção de elementos e no celular, mas não no laptop

  • 772

Então, eu queria programar um flipbook interativo para mostrar o design da minha revista, mas o flipbook só funciona quando entro no modo Inspecionar Elemento ou quando abro meu site no celular. Sou iniciante em programação e usei turn.js para obter o efeito de flip.

Aqui está meu código JS para a página da web

// Load navbar and footer into every page
document.addEventListener("DOMContentLoaded", () => {
    // Load the navbar
    fetch("navbar.html")
        .then((res) => res.text())
        .then((data) => {
            document.getElementById("navbar").innerHTML = data;
        });

    // Load the footer
    fetch("footer.html")
        .then((res) => res.text())
        .then((data) => {
            document.getElementById("footer").innerHTML = data;
        });

    // Wait for the DOM to fully load before initializing Turn.js
    const flipbook = document.querySelector(".flipbook");

    // Ensure the flipbook exists before initializing Turn.js
    if (flipbook) {
        const initializeFlipbook = () => {
            const screenWidth = window.innerWidth;

            // Adjust flipbook size based on screen width
            let flipbookWidth = 800;
            let flipbookHeight = 500; // Default aspect ratio: 16:10

            if (screenWidth <= 768) {
                flipbookWidth = 600;
                flipbookHeight = flipbookWidth * 0.625; // Maintain aspect ratio
            }

            if (screenWidth <= 480) {
                flipbookWidth = 320;
                flipbookHeight = flipbookWidth * 0.625; // Maintain aspect ratio
            }

            // Set the container's dimensions
            const flipbookContainer = document.querySelector(".flipbook-container");
            flipbookContainer.style.width = `${flipbookWidth}px`;
            flipbookContainer.style.height = `${flipbookHeight}px`;

            // Force reflow
            flipbook.offsetHeight;

            // Initialize Turn.js
            $(flipbook).turn({
                width: flipbookWidth,
                height: flipbookHeight,
                autoCenter: true,
                elevation: 50,
                gradients: true,
                when: {
                    turning: function (event, page, view) {
                        console.log("Turning to page:", page);
                    },
                },
            });
        };

        // Initialize the flipbook
        initializeFlipbook();

        // Reinitialize the flipbook on window resize
        window.addEventListener("resize", () => {
            if ($(flipbook).data("turn")) {
                $(flipbook).turn("destroy"); // Destroy the existing flipbook
            }
            initializeFlipbook(); // Reinitialize with new dimensions
        });
    }
    $(flipbook).turn({
        width: flipbookWidth,
        height: flipbookHeight,
        autoCenter: true,
        elevation: 50,
        gradients: true,
        when: {
            turning: function (event, page, view) {
                console.log("Turning to page:", page);
            },
        },
    });
    console.log("Turn.js initialized!");
    
});

Aqui está meu repositório github, caso ajude: https://github.com/iiRosie1/portfolio

E a página da web para você ver como está quebrada agora: https://iirosie1.github.io/portfolio/brandmagazine.html

Qualquer ajuda é bem-vinda!

javascript

1 respostas

  1. Best Answer

    Na segunda $(flipbook).turn()função, a variável flipbookWidthnão está definida. Ao comentar esta função, seu código funciona (veja a demonstração abaixo). Não sei por que você adicionou esta função. Talvez você quisesse que ela fizesse parte do ouvinte de eventos de redimensionamento da janela.

    Aqui está uma demonstração funcional:

    // Load navbar and footer into every page
document.addEventListener("DOMContentLoaded", () => {
  // Load the navbar
  fetch("navbar.html")
    .then((res) => res.text())
    .then((data) => {
      document.getElementById("navbar").innerHTML = data;
    });

  // Load the footer
  fetch("footer.html")
    .then((res) => res.text())
    .then((data) => {
      document.getElementById("footer").innerHTML = data;
    });

  // Wait for the DOM to fully load before initializing Turn.js
  const flipbook = document.querySelector(".flipbook");

  // Ensure the flipbook exists before initializing Turn.js
  if (flipbook) {
    const initializeFlipbook = () => {
      const screenWidth = window.innerWidth;

      // Adjust flipbook size based on screen width
      let flipbookWidth = 800;
      let flipbookHeight = 500; // Default aspect ratio: 16:10

      if (screenWidth <= 768) {
        flipbookWidth = 600;
        flipbookHeight = flipbookWidth * 0.625; // Maintain aspect ratio
      }

      if (screenWidth <= 480) {
        flipbookWidth = 320;
        flipbookHeight = flipbookWidth * 0.625; // Maintain aspect ratio
      }

      // Set the container's dimensions
      const flipbookContainer = document.querySelector(".flipbook-container");
      flipbookContainer.style.width = `${flipbookWidth}px`;
      flipbookContainer.style.height = `${flipbookHeight}px`;

      // Force reflow
      flipbook.offsetHeight;

      // Initialize Turn.js
      $(flipbook).turn({
        width: flipbookWidth,
        height: flipbookHeight,
        autoCenter: true,
        elevation: 50,
        gradients: true,
        when: {
          turning: function(event, page, view) {
            console.log("Turning to page:", page);
          },
        },
      });
    };

    // Initialize the flipbook
    initializeFlipbook();

    // Reinitialize the flipbook on window resize
    window.addEventListener("resize", () => {
      if ($(flipbook).data("turn")) {
        $(flipbook).turn("destroy"); // Destroy the existing flipbook
      }
      initializeFlipbook(); // Reinitialize with new dimensions
    });
  }
  /*$(flipbook).turn({
    width: flipbookWidth,
    height: flipbookHeight,
    autoCenter: true,
    elevation: 50,
    gradients: true,
    when: {
      turning: function(event, page, view) {
        console.log("Turning to page:", page);
      },
    },
  });*/
  console.log("Turn.js initialized!");

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script>

<div id="navbar"></div>

<main>
  <div class="flipbook-container">
    <div class="flipbook">
      <div class="page"><img src="images/brandmagazine/front.png" alt="Front Cover" draggable="false"></div>
      <div class="page"><img src="images/brandmagazine/1.png" alt="Page 1" draggable="false"></div>
      <div class="page"><img src="images/brandmagazine/2.png" alt="Page 2" draggable="false"></div>
      <div class="page"><img src="images/brandmagazine/3.png" alt="Page 3" draggable="false"></div>
      <div class="page"><img src="images/brandmagazine/back.png" alt="Back Cover" draggable="false"></div>
    </div>
  </div>
</main>

<div id="footer"></div>

    • 0

relate perguntas