Home » Jquery » javascript – turn.js not work as expected – adjust pages size

javascript – turn.js not work as expected – adjust pages size

Posted by: admin February 22, 2020 Leave a comment

Questions:

I need to implement a page flip change effect for a supermarket flyer. After research I’ve found turn.js, it seems a nice library but I have some trouble with the implementation. The actual code will produce errors, in particular, hash.js and the turn.js library itself will cause a notice in php and an unexpected token in js.

Is there any alternative to this library? I can show you the actual code I have for the page where I need to implement it, I’ve tried to use the magazine example provided by turn.js website, but without fortune. For now, I’ve removed it.
Any suggestions or alternatives will be appreciated. If I set up a basic example, I get a smaller viewer and this is a problem, I’m not able to set up the height and width of the page to have something acceptable.

<?php
$dir = dirname(__DIR__, 1).'/img/volantino/';
$images = glob("$dir*.{jpg, jpeg}", GLOB_BRACE);
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo basename(__FILE__, '.php'); ?></title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- <meta name='keywords' content=''> -->
<!-- <meta name='description' content=''> -->
<meta name='robots' content='index,follow'>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png">
<!-- CSS -->
<link rel='stylesheet' href='<?php echo $bootstrap; ?>' type='text/css'>
<link rel='stylesheet' href='<?php echo $swiper; ?>' type='text/css'>
<link rel='stylesheet' href='<?php echo $font; ?>' type='text/css'>
<link rel='stylesheet' href="css/main.min.css">
<!-- JS -->
<script type='text/javascript' src='<?php echo $jquery; ?>'></script>
<script type='text/javascript' src='<?php echo $bootstrapjs; ?>'></script>
<script type='text/javascript' src='<?php echo $swiperjs; ?>'></script>
<script type='text/javascript' src='<?php echo $viewportjs; ?>'></script>
<script type='text/javascript' src='<?php echo $lazyjs; ?>'></script>
<script type='text/javascript' src='<?php echo $turnjs; ?>'></script>
<script type='text/javascript' src='<?php echo $turnjs_html4; ?>'></script>
<script type='text/javascript' src='<?php echo $scissorjs; ?>'></script>
<script type='text/javascript' src='<?php echo $zoomjs; ?>'></script>
<script type='text/javascript' src='js/main.min.js'></script>

</head>
<body>

<nav class="navbar navbar-expand-lg fixed-top shadow-lg" id="bs-nav">
  <a class="navbar-brand" href="home"><img src="img/logo.png" width="100px"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle Navigation">
    <i class="fas fa-bars"></i>
  </button>
  <div class="collapse navbar-collapse" id="navbar-content">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link text-uppercase" href="volantino">Volantino</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-uppercase" href="#">Fidelity card</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-uppercase" href="negozi">Punti vendita</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-uppercase" href="about">Gruppo moccia</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-uppercase" href="contatti">Lavora con noi</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid slider-volantino">
  <div class="row" style="margin-top:7.8em;">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 vcol" style="padding:0;">
      <!-- <div class="flipbook">
        <div class="hard"></div>
        <div class="hard"></div>
      <?php
      //foreach($images as $img){
      //  $url = str_replace('/web/htdocs/www.mocciaspa.it/home/','',$img);
      //  echo "<div class='img-fluid w-100 vcard' style='background-image:url(".$url.");'></div>";
      //}
      ?>
        <div class="hard"></div>
        <div class="hard"></div>
      </div> -->

      <div class="swiper-container volantino">
        <div class="swiper-wrapper">
          <?php
          foreach($images as $img){
            $url = str_replace('/web/htdocs/www.mocciaspa.it/home/','',$img);
            echo "<img class='swiper-slide img-fluid w-100 vcard' src='".$url."' />";
          }
          ?>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev" style="position:fixed;top:60%;">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"><path d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z"></svg>
        </div>
        <div class="swiper-button-next" style="position:fixed;top:60%;">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"><path d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z"></svg>
        </div>
      </div>

    </div>
  </div>
</div>
<script type="text/javascript">
    $(".flipbook").turn({
        width: 922,
        height: 700,
        autoCenter: true
    });

</script>
<style>
.flipbook {
  margin: auto!important;
}
</style>

</body>
</html>

NB: don’t ask me about the variables and css load because I didn’t write the initial code, it’s a raw mvc pattern I think?

How to&Answer: