open new popup with image, after click link inside magnific popup

Question

I have some code (use magnific-popup):

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

Click modal-gallery-link open id="gallery" magnific popup.

After, I click gallery-link (image preview) and this popup must be hide and open new popup with image.

But I have error:

Uncaught Error: Syntax error, unrecognized expression: ...

CodePen

Question: How I can open new popup with img, after click link inside magnific popup?

Answer 1

I solved this problem as follows:

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>