Я пытаюсь заставить библиотеку jQuery для увеличения размера работать на моем сайте.Magnific Popup не будет работать
Посмотрите мой HTML ниже; он, похоже, правильно содержит таблицу стилей и скриптов. Вы заметите, я использую:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
вместо рекомендуемого:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
, но я уже попытался заменить бывший с ним, и он до сих пор не работает. Полный HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/mystyles.css">
<link rel="stylesheet" href="dimsemenov-Magnific-Popup-2ff1692/dist/magnific-popup.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,600,700|Inconsolata|Indie+Flower|Oswald:400,700|Taviraj:400,600,700" rel="stylesheet">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
<title>Zach Sedefian</title>
</head>
<body>
<div class="top">
<h1>Personal page</h1>
</div>
<div class="left">
<nav>
<a class="nav-link" id="link-1">About</a>
<a class="nav-link" id="link-2">Web</a>
<a class="nav-link" id="link-3">Music</a>
<a class="nav-link" id="link-4" onclick=>Photo</a>
<a class="nav-link" id="link-5">Contact</a>
</nav>
</div>
<div class="main">
<p class="main-p">Welcome. Use the sidebar to navigate.</p>
</div>
Я знаю, что это странно, я добавляю соответствующие IMG/DIV HTML с помощью функции мыши(), как показано здесь:
$('#link-4').click(function(){
$('.main').html("");
$('.main').html('<div class="photo-gallery"><div class="photo-container"><a class="test" href="images/mosque-L.jpg"><img class="test-img" src="images/mosque-Q.jpg"></a></div><div class="photo-container"><a href="images/square-L.jpg"><img src="images/square-Q.jpg"></a></div><div class="photo-container"><a href="images/light-L.jpg"><img src="images/light-Q.jpg"></a></div><div class="photo-container"><a href="images/arch-L.jpg"><img src="images/arch-Q.jpg"></a></div><div class="photo-container"><a href="images/cows-L.jpg"><img src="images/cows-Q.jpg"></a></div><div class="photo-container"><a href="images/land-L.jpg"><img src="images/land-Q.jpg"></a></div><div class="photo-container"><a href="images/cascade-L.jpg"><img src="images/cascade-Q.jpg"></a></div><div class="photo-container"><a href="images/guard-L.jpg"><img src="images/guard-Q.jpg"></a></div><div class="photo-container"><a href="images/green-L.jpg"><img src="images/green-Q.jpg"></a></div><div class="photo-container"><a href="images/edu-L.jpg"><img src="images/edu-Q.jpg"></a></div><div class="photo-container"><a href="images/biz-L.jpg"><img src="images/biz-Q.jpg"></a></div><div class="photo-container"><a href="images/cal-L.jpg"><img src="images/cal-Q.jpg"></a></div></div><p><a href="https://www.flickr.com/photos/[email protected]/">More on flickr</a></p>');
});
Я попытался поместить его в файл index.html, но он также ничего не меняет.
Я пытаюсь вызвать функцию magnificpopup() в app.js различными способами. Первое - это способ, которым я хотел бы иметь его, а нижние два - это самые простые способы его вызова (также не работающие).
$('.photo-container').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
closeOnContentClick: true,
gallery:{enabled:true}
});
$('.test').magnificPopup({type:'image'});
$('.test-img').magnificPopup({type:'image'});
Не удалось получить ошибки отладки. Любая помощь будет принята с благодарностью. Это первый раз, когда я пришел на этот сайт и не нашел ответа на чужую нить. Заранее спасибо.
'OnClick =' 'в канальном 4' не является правильным. Он должен был бы быть 'onclick =" "' на минимальном минимуме (что бы ничего не делало конечно) –
Если вы добавляете HTML через обработчик кликов - 'magnificPopup' будет уже инициализирован до того, как будут существовать соответствующие узлы. Если вы хотите продолжить использовать этот метод, тогда вызовите 'magnificPopup' в том же обработчике кликов и оберните его в' setTimeout', чтобы обеспечить отображение соответствующей DOM. –
Потратьте время и уточните свой пост, поскольку в данный момент его нет. – nyedidikeke