0
Я использую библиотеку fullpage.js, чтобы сделать персональный сайт, чтобы показать мое портфолио, используя страницу слайдов, содержащуюся в нем. Проблема, с которой я столкнулась, заключается в том, что все работает правильно, но как только я перейду на FTP-сервер gihub.io или в другое общественное достояние, я получаю ошибки GET, чтобы найти соответствующие файлы из моих модулей узла. Путь указывает на правильные файлы, но когда я использую инструменты для разработчиков, я продолжаю получать те же ошибки. Я скопировал код, приведенный ниже, и я с следующее сообщение об ошибке:Fulpage.js работает только локально?
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>
Существует довольно ясное сообщение об ошибке: вы пытаетесь загрузить jQuery с помощью HTTP, но это запрещено, если сама страница является HTTPS. Исправьте это, и ваша проблема может исчезнуть. –