Есть код:
$('.modal-gallery-link').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
},
open: function () {
},
},
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
$(".gallery").magnificPopup({
delegate: '.gallery-link',
type: 'image',
callbacks: {
beforeOpen: function () {
},
buildControls: function () {
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
}
},
gallery: {
tCounter: '%curr% / %total%',
enabled: true
}
});
.modal-gallery-link {
color: #000;
display: block;
}
.modal-inner {
display: flex;
}
.modal-inner a {
display: block;
margin: 1rem;
}
img {
max-width: 100%;
}
Open Gallery
После клика на ссылку открывается галлерея, по клику на превью изображения галлереии окно должно закрываться и открываться окно с этой картинкой, но не так, не с open, afterOpen второе окно не срабатывает.
Вопрос: как реализовать открытие превьюшек magnific popup, если ссылки находятся в уже открытом popup?
Ответ
Решила эту задачу так (может быть кому-то пригодится тоже):
var imgs = $('.gallery-link img');
imgs.each(function(){
var item = $(this).closest('.gallery-link');
item.css({
'background-image': 'url(' + $(this).attr('src') + ')',
'background-position': 'top center',
'-webkit-background-size': 'cover',
'background-size': 'cover',
});
$(this).addClass('hide');
});
$('.modal-gallery-link').magnificPopup({
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
},
open: function () {
$('.gallery-link').on('click', function(e){
e.preventDefault();
console.log(items);
$.magnificPopup.close();
setTimeout(function(){
$.magnificPopup.open({
items: items,
type: 'image',
gallery: {
enabled: true
}
});
}, 500);
});
},
afterClose: function () {
},
},
midClick: true
});
var items = [];
$(".gallery .gallery-link").each(function() {
items.push( {
src: $(this).attr("href"),
} );
});
.modal-gallery-link {
color: #000;
display: block;
}
.modal-inner {
display: flex;
}
.modal-inner a {
display: block;
margin: 1rem;
}
.gallery-link {
display: block;
width: 300px;
height: 300px;
}
img {
max-width: 100%;
}
img.hide {
width: 0;
height: 0;
display: block;
position: 0;
margin: 0;
visibility: hidden;
opacity: 0;
}
.modal {
background: #fff;
max-width: 1131px;
width: 100%;
margin: auto;
}
.mfp-close-btn-in .mfp-close {
color: #fff;
}
Open Gallery
Комментариев нет:
Отправить комментарий