Мой веб-сайт / блог использует HTML-файлы, но для настоящих страниц блога это файлы PHP из-за сценария комментирования, который я использую. Он использует Magnific-Popup лайтбокс на протяжении.
В любом случае, если я помещаю загрузчик всплывающих окон внизу каждого (HTML) файла, это означает, что когда пользователь видит изображение в верхней части экрана и нажимает на него слишком рано, оно может просто перейти непосредственно к http://www.website.com/image.jpg страница, а не запускать всплывающее окно, поскольку загрузчик всплывающих окон еще не загружен. Чтобы исправить эту возможность, я переместил загрузчик в ГОЛОВКУ файлов HTML, и это решает проблему. Если изображение загружено не полностью и пользователь нажимает на всплывающее окно, оно всплывает и продолжает загрузку в режиме всплывающего окна. Тем не менее, я сделал это с моими PHP-файлами, но они действуют так, как будто загрузчик всплывающих окон все еще находится внизу страницы, и всплывающее окно не вступит в силу, пока вся страница не загрузится полностью. Есть ли способ обойти это, или это какое-то ограничение для PHP?
Я не думаю, что это будет иметь какое-либо значение, но вот соответствующее кодирование, которое я включаю в HEAD моих файлов HTML и PHP.
Для файлов HTML:
<script src="/scripts/jquery/jquery-1.11.1.min.js"></script>
<script src="/scripts/magnific-popup/jquery.magnific-popup.min.js"></script>
<!--#include virtual="/grabbag/popup.html" -->
Для файлов PHP:
<script src="/scripts/jquery/jquery-1.11.1.min.js"></script>
<script src="/scripts/magnific-popup/jquery.magnific-popup.min.js"></script>
<?php include("../../../../grabbag/popup.html"); ?>
У меня запущены другие скрипты, но все они появляются после jquery и Magnific Popup. CSS-файл Magnific Popup предшествует jquery и javascript-файлам Magnific Popup.
Файл popup.html, который раньше отображался внизу страниц, содержит следующее:
<script>
$(document).ready(function () {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.parent-container').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image'
// other options
});
$('.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>
Заранее спасибо.
Задача ещё не решена.
Других решений пока нет …