öffnet sich ein Popup mit Bild nach Klick Link in magnific Popup

Question

Ich habe einige Code (Verwendung 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 offen id="gallery" magnific Popup.

Danach klicke ich gallery-link (Bildvorschau) und dieses Popup muss verstecken und neues Popup mit image öffnen.

Aber ich habe Fehler:

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

CodePen

Frage: Wie ich neuen Popup mit img öffnen kann, nach Klick Link in magnific Popup?

Answer 1

löste ich dieses Problem wie folgt:

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"), 
 
    }); \t \t \t 
 
});

.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>