Есть код:
$('.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: '<span class="mfp-counter">%curr% / %total%</span>',
enabled: true
}
});
.modal-gallery-link {
color: #000;
display: block;
}
.modal-inner {
display: flex;
}
.modal-inner a {
display: block;
margin: 1rem;
}
img {
max-width: 100%;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<a href="#gallery" data-effect="mfp-move-horizontal" class="modal-gallery-link">Open Gallery</a>
<div id="gallery" class="modal mfp-hide">
<div class="modal-inner gallery">
<a href="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
<img src="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</a>
<a href="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
<img src="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</a>
</div>
</div>
После клика на ссылку открывается галлерея, по клику на превью изображения галлереии окно должно закрываться и открываться окно с этой картинкой, но не так, не с 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;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<a href="#gallery" data-effect="mfp-move-horizontal" class="modal-gallery-link">Open Gallery</a>
<div id="gallery" class="modal mfp-hide">
<div class="modal-inner gallery">
<a href="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
<img src="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</a>
<a href="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
<img src="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</a>
</div>
</div>
В интернетах говорят, что упаковать mfp в mfp не получится. Предлагаю вашему вниманию вариант обёртки mfp.
$('.modal-gallery-link').click(function() {
var popup = $(this).attr("href");
$(popup).wrap('<div class="wrapper"></div>');
$(popup).fadeIn();
});
$("body").on('click','.wrapper', function() {
$(this).find("#gallery").fadeOut(300, function() {
$(this).unwrap();
});
});
$(".gallery").magnificPopup({
delegate: '.gallery-link',
type: 'image',
callbacks: {
beforeOpen: function () {
},
buildControls: function () {
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
}
},
gallery: {
tCounter: '<span class="mfp-counter">%curr% / %total%</span>',
enabled: true
}
});
.modal-gallery-link {
color: #000;
display: block;
}
.modal-inner {
display: flex;
}
.modal-inner a {
display: block;
margin: 1rem;
}
img {
max-width: 100%;
}
.modal{display:none;}
.wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7)}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<a href="#gallery" class="modal-gallery-link">Open Gallery</a>
<div id="gallery" class="modal">
<div class="modal-inner gallery">
<a href="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
<img src="https://images.unsplash.com/photo-1425342605259-25d80e320565?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</a>
<a href="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="gallery-link">
<img src="https://images.unsplash.com/photo-1513010963904-2fefe6a92780?dpr=1&auto=format&fit=crop&w=568&h=379&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
</a>
</div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Help me please!!! Finish please, I can not understand what is missing! thank you in advance!
Доброго времени суток ! Встал такой вопрос: Как загрузить изображение в один клик ? Пример: Нажал на кнопку "выбрать изображение" на сайте,...
Как вычислить (получить) позицию html елементаoffsetTop и offsetLeft даёт относительное значение (не всегда отчёт от точки [x=0,y=0] начала координат)