Trouble Installing Paver Plugin


#1

I’m coding a website for this charity event and although I can write HTML, I have no experience in java or jquery, as you can probably see by the code. I have managed to implement 2 plugins so far - FadeThis and Shine.js however upon trying to install Paver to add a panorama to the page, I somehow broke it and even when the page was working, the panorama aspect didn’t. I will eventually get round to learning jquery however at this point I would appreciate if someone could help on this specific task as we are one a somewhat tight schedule. Thanks for you help.

<!DOCTYPE html>
<html lang="en">
<head>

<!--Meta Tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Open Source Images"/>
<meta name="google-site-verification" content="bPSa0t8kOsCtCAQutkxSznVbdDAGIO1SyPRRjDIrPx8"/>
<title>NCSiesta | Charity Dog Show</title>

<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/paver.min.css">

<!--Java--> 
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/tether.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
<script src="js/jquery.paver.min.js"></script>
<script src="js/jquery.fadethis.min.js"></script> 
<script src="js/shine.min.js"></script>
</head>
<body>
<script>document.body.className += ' fade-out';</script> 

<!--Nav Bar Ting-->
<div class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <img src="assets/Logo2bNav.thick.png" width="50" height="50" alt="Logo">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="activities.html">Activites</a></li>
        <li class="nav-item active"><a class="nav-link" href="venue.html">Venue<span class="sr-only">(current)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
      </ul>
      <a class="btn btn-outline-ncsiesta form-inline my-2 my-sm-0" href="https://gf.me/u/bm6h48">Donate</a> </div>
  </nav>
</div>

<!--Page Header-->
<div class="pageheader">
  <div class="container">
    <div class="headerText">
      <p id="shine">Charity Dog Show</p>
    </div>
    <div class="extra">
      <p>Brought to you by NCSiesta</p>
    </div>
  </div>
</div>
<div class="pageheader2"></div>
<div class="pageheader3"></div>

<!--Grid-->

    <!--Middle Column-->
<div class="panorama">
    <img src="assets/panorama.png" alt="Panorama" title="Panorama"/>
</div>
    
<div class="container">
    <!--Right Column-->
    <div class="row">
      <div class="col-10">
        <div class="hidden-md-down">
          <div class="card" style="margin-bottom: 1.25rem;">
            <div class="card-block">
              <h3 class="card-title"><img src="assets/twitter.png" width="30" height="30" class="d-inline-block align-top" alt=""> Twitter</h3>
              <p class="card-text">Any questions or queries, chat with us on twitter!</p>
              <a href="https://twitter.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
          </div>
          <div class="card" style="margin-bottom: 1.25rem;">
            <div class="card-block">
              <h3 class="card-title"><img src="assets/instagram.png" width="30" height="30" class="d-inline-block align-top" alt=""> Instagram</h3>
              <p class="card-text">Show us some support over on our instagram page!</p>
              <a href="https://instagram.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
          </div>
          <div class="card" style="margin-bottom: 1.25rem;">
            <div class="card-block"> 
              
              <!--Form-->
              <p class="lead">Contact Form</p>
              <form method="post" role="form">
                <div class="form-group">
                  <input type="text" name="name" class="form-control" placeholder="Your Name">
                </div>
                <div class="form-group">
                  <input type="email" name="email" class="form-control" placeholder="Your Email">
                </div>
                <div class="form-group">
                  <input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
                </div>
                <br>
                <div class="checkbox">
                  <label class="custom-control custom-checkbox">
                    <input type="checkbox" name="check" class="custom-control-input">
                    <span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
                </div>
                <div align="center">
                  <input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<div class="hidden-lg-up">
  <div class="container">
    <hr class="my-4">
    <div class="rowContact"> 
      
      <!--Form-->
      <p class="lead">Contact Form</p>
    </div>
    <div class="rowContact">
      <form method="post" role="form">
        <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="Your Name">
        </div>
        <div class="form-group">
          <input type="email" name="email" class="form-control" placeholder="Your Email">
        </div>
        <div class="form-group">
          <input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
        </div>
        <div class="checkbox">
          <label class="custom-control custom-checkbox">
            <input type="checkbox" name="check" class="custom-control-input">
            <span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
        </div>
        <div align="center">
          <input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
        </div>
      </form>
    </div>
  </div>
</div>
<footer>
  <div class="footerBlue">
    <div class="container">
      <div class="row justify-content-around">
        <div class="col-auto">
          <ul class="social-network social-circle">
            <li><a class="icoMail" title="Mail"><i class="fa fa-envelope"></i></a></li>
            <li><a href="https://www.facebook.com/events/2005754382977812/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="https://twitter.com/NCSiesta" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://www.instagram.com/NCSiesta/" class="icoInstagram" title="Instagram" ><i class="fa fa-instagram"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="legal">
          <p>Copyright &#169; NCSiesta 2017. All Rights Reserved. I don't know what this means.</p>
        </div>
      </div>
    </div>
  </div>
</footer>

<script>
	$(function() {
	$('div.panorama').paver();
});
	</script>

<script>
$(document).ready(function() {
$(window).fadeThis({reverse: false, speed: 500, offset: -300});
});
	</script> 
<script type="text/javascript">
      var shine = new Shine(document.getElementById('shine'));

      function handleMouseMove(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
      }

      window.addEventListener('mousemove', handleMouseMove, false);
	</script> 
<script>
	$(function() {
    $('body').removeClass('fade-out');
});
	</script> 
<script type="text/javascript">
	$(function() {
    // Paver
    $('div.panorama').paver();
});
	</script>
	
<script>
	$(document).ready(function ($) {
	$('.cycle').cyclotron();
});
	</script>
</body>
</html>

#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.