0
Ich verwende die Fullpage.js-Bibliothek, um eine persönliche Website zu erstellen, um mein Portfolio mithilfe der darin enthaltenen Folienseite anzuzeigen. Das Problem, das ich habe, ist, dass alles richtig funktioniert, aber sobald ich über FTP zu meinem gihub.io oder einer anderen öffentlichen Domäne, bekomme ich GET-Fehler, um die passenden Dateien aus meinen Knoten-Modulen zu finden. Der Pfad verweist auf die richtigen Dateien, aber wenn ich Entwickler-Tools verwende, bekomme ich immer die gleichen Fehler. Ich habe den Code kopiert und bin mit den folgenden Fehler:Fulpage.js funktioniert nur lokal?
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js
index.html:6
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css
index.html:1
Mixed Content: The page at 'https://kghumaan.github.io/index.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
index.html:6
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css
index.html:14
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js 404 (Not Found)
index.html:25
Uncaught TypeError: $(...).fullpage is not a function
at HTMLDocument.<anonymous> (index.html:25)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)`
<html>
<head>
<!-- IMPORT JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- FULL PAGE JS -->
<link rel="stylesheet" type="text/css" href="node_modules/fullpage.js/dist/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="node_modules/fullpage.js/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="node_modules/fullpage.js/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="node_modules/fullpage.js/dist/jquery.fullPage.js"></script>
<!-- FONT -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
navigationPosition: 'right',
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section1">
<h1 id="title" class="animated fadeInUp">NAME</h1>
<div id="buttons">
<div id="button1" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-file-o fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Resume
</div>
</div>
<div id="button2" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
LinkedIn
</div>
</div>
<div id="button3" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-github-alt fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Github
</div>
</div>
<div id="button4" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-envelope-open-o fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Email
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<p style="position: absolute; left: 10%; top: 3%; color: white; font-family: 'Quicksand', sans-serif; font-size: 120%;">Recent Work :</p>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInUp" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInRight" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInLeft" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInRight" id="portfolioImage"/>
</a>
</div>
</div>
</div>
</body>
</html>
Es gibt eine ziemlich klare Fehlermeldung: Sie versuchen, jQuery mit HTTP zu laden, aber es ist nicht erlaubt, wenn die Seite selbst HTTPS ist. Behebe das zuerst und dein Problem verschwindet möglicherweise. –