Плагин работает, панель появляется.
При установке этой формы, скрипт ставьте не между
<head>
, а перед </body>
. И не забудьте подключить библиотеку jQuery и сам jquery.magnific-popup.js
.overall_header.html
в <head>
ставим:
Код: Выделить всё
<link rel="stylesheet" href="путь до файла/magnific-popup.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
overall_footer.html
перед закрывающим тегом</body>
ставим:
Код: Выделить всё
<script src="путь до файла/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small></small>';
}
}
});
});
</script>
attachment.html
, находим:
Код: Выделить всё
<!-- IF _file.S_THUMBNAIL -->
<dl class="thumbnail">
<dt><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a></dt>
<!-- IF _file.COMMENT --><dd> {_file.COMMENT}</dd><!-- ENDIF -->
</dl>
<!-- ENDIF -->
<dl class="thumbnail">
меняем на <dl class="thumbnail popup-gallery">
, чуть ниже <a href="{_file.U_DOWNLOAD_LINK}">
меняем на <a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}">
.Код: Выделить всё
tLoading: 'Loading...',
Loading...
на <img src="изображение" alt="Loading..." />
.title
, именно для этого мы добавили title="{_file.DOWNLOAD_NAME}"
для ссылки на полное изображение, вместо имени можно использовать {_file.COMMENT}
- будет выводиться комментарий к файлу, {_file.U_DOWNLOAD_LINK}
- будет показана ссылка на изображение.Код: Выделить всё
return item.el.attr('title') + '<small></small>';
attachment.html
, находите ранее изменённый кусок кода:
Код: Выделить всё
<a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}">
Код: Выделить всё
<a href="{_file.U_DOWNLOAD_LINK}" title="{_file.DOWNLOAD_NAME}" data-source="Вес: {_file.FILESIZE} {_file.SIZE_LANG} {_file.L_DOWNLOAD_COUNT}">
Код: Выделить всё
return item.el.attr('title') + '<small></small>';
Код: Выделить всё
return item.el.attr('title') + '<small>'+item.el.attr('data-source')+'</small>';
Код: Выделить всё
[image]{URL}[/image]
Код: Выделить всё
<span class="popup-gallery"><a href="{URL}" title="{URL}"><img src="{URL}" alt="{URL}" style="max-width: 150px; max-height: 150px;" /></a></span>
Код: Выделить всё
[image={URL}]{TEXT}[/image]
Код: Выделить всё
<span class="popup-gallery"><a href="{URL}" title="{URL}">{TEXT}</a></span>
Код: Выделить всё
[yt]{TEXT}[/yt]
Код: Выделить всё
<a class="popup-youtube popup-vimeo popup-gmaps" href="{TEXT}">{TEXT}</a>
overall_footer.html
находим ранее установленный скрипт, перед:
Код: Выделить всё
});
</script>
Код: Выделить всё
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
Код: Выделить всё
/**
* Simple fade transition
*/
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
Если честно не пробовал на локалке... Попробую поставить этот плагин на локалке, посмотрю. Про видео, я так понимаю, подразумевается ютуб?
Код: Выделить всё
.popup-gallery a {
position: relative;
display: inline-block;
}
.popup-gallery a:hover:before {
content: '';
background: url("./images/img.png") center no-repeat #fff;
position: absolute;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
}
Код: Выделить всё
<script type="text/javascript">
$(document).ready(function() {
$(".popup-gallery img").hover(
function () {
$(this).attr("src", "./images/img.png");
}
);
});
</script>
Подобный вариант я дал выше, только на css. Аналогично варианту по ссылке при наведении на изображение будет добавляться картинка поверх существующей, единственное чего нет - прозрачности. Добавить не проблема -
opacity: 0.9;
, к .popup-gallery a:hover:before {
. Код этот достаточно добавить в стилевой файл.Если честно, не совсем понимаю как такое реализовать...
Код: Выделить всё
<script>
$('.popup-yamaps').magnificPopup({
type: 'iframe',
iframe: {
patterns: {
yamaps: {
index: '//yandex.ru/maps/',
src: '%id%'
}
}
}
});
</script>
Код: Выделить всё
<a class="popup-yamaps" href="#yamaps">Open Map</a>
<div id="yamaps" class="white-popup-block mfp-hide" style="height: 250px;"></div>
<script type="text/javascript">
$(function() {
$('.popup-yamaps').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});
</script>
height: 250px;
- высота окна.Код: Выделить всё
<script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script>
var myMap;
ymaps.ready(init);
function init () {
myMap = new ymaps.Map('yamaps', {
center:[55.76, 37.64], // Москва
zoom:10
});
document.getElementById('destroyButton').onclick = function () {
myMap.destroy();
};
}
</script>
center:[55.76, 37.64], // Москва
устанавливаете свои.