Я потратил много времени, пытаясь заставить этот Magnific Popup работать локально на моем веб-сайте, и он продолжает связывать меня с отдельной страницей изображения вместо того, чтобы получить средство просмотра всплывающих окон, которое я хотел.
Кто-нибудь знает, где мои ошибки и как я могу заставить его работать?
Я новичок в jQuery, поэтому я не знаю, почему этот код не работает.
Редактировать: есть ли что-то, что мне нужно скачать, чтобы заставить его работать?
Все три исходных кода находятся в моей папке, и я проверил, находятся ли они по нужным ссылкам, и я все еще не получаю никаких всплывающих окон Magnific.
Вот что у меня есть в моем документе:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="website.css" rel="stylesheet" type="text/css">
<script src="my_jquery.js"></script>
<title> Name </title>
<link href="magnific-popup.css" rel="stylesheet" type="text/css">
<link href="singleimage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="navigation">
<div id="header_left"><span id="header_text1">Name</span> </div>
<div id="header_right"> <span id="header_text2">
<a href="#home">Link</a>
<a href="#name">Link</a>
<a href="#name">Link</a>
<a href="#name">Link</a>
<a href="#name">Link</a>
</span> </div>
</div>
<a name="graphicdesign">
<div class="bg-image2">
<div class="test1">
<div class="test2"> <h1>Page Title</h1>
<a class="image-popup-vertical-fit" href="cat_b.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
<img src="cat_s.jpg " width="75" height="75">
</a>
<a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
</a>
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
</a>
<script>
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
} }); });
</script>
<script src="jquery.magnific-popup.min.js"></script>
<script src="jquery.magnific-popup.js"></script>
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
</div>
</div>
</div> </a>
Я получаю три ошибки из кода, который я вставил из Magnific Popup. Я никак не менял код, и все равно получил ошибки. Я не уверен, должен ли я его как-то изменить или нет. Я озадачен тем, что делать.
Uncaught ReferenceError: $ не определен index_01.html:73
Вот некоторые коды вокруг строки 75 на этой странице:
<script>
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
Uncaught TypeError: undefined не является функцией jquery.magnific-popup.min.js:4
(function(e){var t,n,i,o,r,a,s,l="Close",c="BeforeClose",d="AfterClose",u="BeforeAppend",p=
Uncaught TypeError: undefined не является функцией jquery.magnific-popup.js:38
_window = $(window),
