Открыть magnific popup галлерею в новом окне

#jquery

Есть код:



$('.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?
    

Ответы

Ответ 1

Решила эту задачу так (может быть кому-то пригодится тоже):



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


  

    
        
    

    
       
    
  



Ответ 2

В интернетах говорят, что упаковать mfp в mfp не получится. Предлагаю вашему вниманию
вариант обёртки mfp.



$('.modal-gallery-link').click(function() {
    var popup = $(this).attr("href");
    $(popup).wrap('
');
    $(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: '%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%;
}

.modal{display:none;}
.wrapper{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7)}



  
  Open Gallery