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

259
19 декабря 2017, 17:24

Есть код:

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

Answer 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; 
}
<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>

Answer 2

В интернетах говорят, что упаковать 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>

READ ALSO
HELP HELP HELP!!!! It&#39;s first work! [требует правки]

HELP HELP HELP!!!! It's first work! [требует правки]

Help me please!!! Finish please, I can not understand what is missing! thank you in advance!

223
Загрузка в одну кнопку

Загрузка в одну кнопку

Доброго времени суток ! Встал такой вопрос: Как загрузить изображение в один клик ? Пример: Нажал на кнопку "выбрать изображение" на сайте,...

203
Как вычислить координаты html елемента

Как вычислить координаты html елемента

Как вычислить (получить) позицию html елементаoffsetTop и offsetLeft даёт относительное значение (не всегда отчёт от точки [x=0,y=0] начала координат)

796