Trouble Installing Paver Plugin

Trouble Installing Paver Plugin

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.
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>

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

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

  19. <!--Java--> 
  20. <script src="js/jquery-1.11.1.min.js"></script>
  21. <script src="js/tether.min.js"></script> 
  22. <script src="js/bootstrap.min.js"></script>
  23. <script src="js/jquery.ba-throttle-debounce.min.js"></script>
  24. <script src="js/jquery.paver.min.js"></script>
  25. <script src="js/jquery.fadethis.min.js"></script> 
  26. <script src="js/shine.min.js"></script>
  27. </head>
  28. <body>
  29. <script>document.body.className += ' fade-out';</script> 

  31. <!--Nav Bar Ting-->
  32. <div class="container">
  33.   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  34.     <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>
  35.     <img src="assets/Logo2bNav.thick.png" width="50" height="50" alt="Logo">
  36.     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  37.       <ul class="navbar-nav mr-auto">
  38.         <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
  39.         <li class="nav-item"><a class="nav-link" href="activities.html">Activites</a></li>
  40.         <li class="nav-item active"><a class="nav-link" href="venue.html">Venue<span class="sr-only">(current)</span></a></li>
  41.         <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
  42.       </ul>
  43.       <a class="btn btn-outline-ncsiesta form-inline my-2 my-sm-0" href="https://gf.me/u/bm6h48">Donate</a> </div>
  44.   </nav>
  45. </div>

  47. <!--Page Header-->
  48. <div class="pageheader">
  49.   <div class="container">
  50.     <div class="headerText">
  51.       <p id="shine">Charity Dog Show</p>
  52.     </div>
  53.     <div class="extra">
  54.       <p>Brought to you by NCSiesta</p>
  55.     </div>
  56.   </div>
  57. </div>
  58. <div class="pageheader2"></div>
  59. <div class="pageheader3"></div>

  61. <!--Grid-->

  63.     <!--Middle Column-->
  64. <div class="panorama">
  65.     <img src="assets/panorama.png" alt="Panorama" title="Panorama"/>
  66. </div>
  67.     
  68. <div class="container">
  69.     <!--Right Column-->
  70.     <div class="row">
  71.       <div class="col-10">
  72.         <div class="hidden-md-down">
  73.           <div class="card" style="margin-bottom: 1.25rem;">
  74.             <div class="card-block">
  75.               <h3 class="card-title"><img src="assets/twitter.png" width="30" height="30" class="d-inline-block align-top" alt=""> Twitter</h3>
  76.               <p class="card-text">Any questions or queries, chat with us on twitter!</p>
  77.               <a href="https://twitter.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
  78.           </div>
  79.           <div class="card" style="margin-bottom: 1.25rem;">
  80.             <div class="card-block">
  81.               <h3 class="card-title"><img src="assets/instagram.png" width="30" height="30" class="d-inline-block align-top" alt=""> Instagram</h3>
  82.               <p class="card-text">Show us some support over on our instagram page!</p>
  83.               <a href="https://instagram.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
  84.           </div>
  85.           <div class="card" style="margin-bottom: 1.25rem;">
  86.             <div class="card-block"> 
  87.               
  88.               <!--Form-->
  89.               <p class="lead">Contact Form</p>
  90.               <form method="post" role="form">
  91.                 <div class="form-group">
  92.                   <input type="text" name="name" class="form-control" placeholder="Your Name">
  93.                 </div>
  94.                 <div class="form-group">
  95.                   <input type="email" name="email" class="form-control" placeholder="Your Email">
  96.                 </div>
  97.                 <div class="form-group">
  98.                   <input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
  99.                 </div>
  100.                 <br>
  101.                 <div class="checkbox">
  102.                   <label class="custom-control custom-checkbox">
  103.                     <input type="checkbox" name="check" class="custom-control-input">
  104.                     <span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
  105.                 </div>
  106.                 <div align="center">
  107.                   <input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
  108.                 </div>
  109.               </form>
  110.             </div>
  111.           </div>
  112.         </div>
  113.       </div>
  114.     </div>
  115.   </div>
  116. <div class="hidden-lg-up">
  117.   <div class="container">
  118.     <hr class="my-4">
  119.     <div class="rowContact"> 
  120.       
  121.       <!--Form-->
  122.       <p class="lead">Contact Form</p>
  123.     </div>
  124.     <div class="rowContact">
  125.       <form method="post" role="form">
  126.         <div class="form-group">
  127.           <input type="text" name="name" class="form-control" placeholder="Your Name">
  128.         </div>
  129.         <div class="form-group">
  130.           <input type="email" name="email" class="form-control" placeholder="Your Email">
  131.         </div>
  132.         <div class="form-group">
  133.           <input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
  134.         </div>
  135.         <div class="checkbox">
  136.           <label class="custom-control custom-checkbox">
  137.             <input type="checkbox" name="check" class="custom-control-input">
  138.             <span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
  139.         </div>
  140.         <div align="center">
  141.           <input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
  142.         </div>
  143.       </form>
  144.     </div>
  145.   </div>
  146. </div>
  147. <footer>
  148.   <div class="footerBlue">
  149.     <div class="container">
  150.       <div class="row justify-content-around">
  151.         <div class="col-auto">
  152.           <ul class="social-network social-circle">
  153.             <li><a class="icoMail" title="Mail"><i class="fa fa-envelope"></i></a></li>
  154.             <li><a href="https://www.facebook.com/events/2005754382977812/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
  155.             <li><a href="https://twitter.com/NCSiesta" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
  156.             <li><a href="https://www.instagram.com/NCSiesta/" class="icoInstagram" title="Instagram" ><i class="fa fa-instagram"></i></a></li>
  157.           </ul>
  158.         </div>
  159.       </div>
  160.     </div>
  161.     <div class="row">
  162.       <div class="col-12">
  163.         <div class="legal">
  164.           <p>Copyright &#169; NCSiesta 2017. All Rights Reserved. I don't know what this means.</p>
  165.         </div>
  166.       </div>
  167.     </div>
  168.   </div>
  169. </footer>

  171. <script>
  172. $(function() {
  173. $('div.panorama').paver();
  174. });
  175. </script>

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

  185.       function handleMouseMove(event) {
  186.         shine.light.position.x = event.clientX;
  187.         shine.light.position.y = event.clientY;
  188.         shine.draw();
  189.       }

  191.       window.addEventListener('mousemove', handleMouseMove, false);
  192. </script> 
  193. <script>
  194. $(function() {
  195.     $('body').removeClass('fade-out');
  196. });
  197. </script> 
  198. <script type="text/javascript">
  199. $(function() {
  200.     // Paver
  201.     $('div.panorama').paver();
  202. });
  203. </script>
  205. <script>
  206. $(document).ready(function ($) {
  207. $('.cycle').cyclotron();
  208. });
  209. </script>
  210. </body>
  211. </html>