javascript - Mix stapel-function with magnific-popup -

i found 2 awesome jquery plugins in "magnific popup" , special stapel-function "adaptive thumbnail pile effect automatic grouping" , thought both together, make pretty cool (responsive) portfolio resizing lightbox.

but unfortunately don't work expected can see here.

when click on top picture , open 1 of 2 appear, show in lightbox, without close-button , title below image. have go "browser-back-button" (not good).

when click on 1 of small pics on bottom "without stapel function" picture opens close-button , title "magnific popup". here magnific pop works fine. now, didn't find out why magnific-popup close-button/title doesn't appear stapel function pics on top.

as i'm not js pro, can guess there might conflict between 2 js-scripts, tried add "jquery.noconflict();" guess , didn't solve problem.

i hope, has idea.

this js stuff in html header:

<!-- magnific popup core css file --> <link rel="stylesheet" href="css/magnific-popup.css">   <!-- jquery 1.7.2+ or zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    <!-- modernizr --> <script src="js/modernizr.custom.63321.js"></script>  <!-- magnific popup core js file --> <script src="js/jquery.magnific-popup.js"></script>   <!-- external stapel js file  --> <script type="text/javascript" src="js/jquery.stapel.js"></script>  <!-- internal stapel js  -->     <script type="text/javascript">  jquery.noconflict();  $(function() {     var $grid = $( '#tp-grid' ),     $name = $( '#name' ),     $close = $( '#close' ),     $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>loading...</span></div>' ).insertbefore( $grid ),     stapel = $grid.stapel( {     onload : function() {     $loader.remove();     },     onbeforeopen : function( pilename ) {     $name.html( pilename );     },     onafteropen : function( pilename ) {                         $close.show();                     }                 } );              $close.on( 'click', function() {                 $close.hide();                 $name.empty();                 stapel.closepile();             } );          } );     </script> 

this js magnific-popup before closing body-tag:

<script type="text/javascript">  $(document).ready(function() {  $('.popup').magnificpopup({     type: 'image',     closeoncontentclick: true,     image: {         verticalfit: false     } });  });  </script> 

the magnific-popup called class="popup" in links (works fine here):

<a class="popup" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="this image fits horizontally."> <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" height="75" width="75"> </a>  <a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" title="der titel">  <img src="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" height="75" width="75"></a> 

..and pictures doesn't work:

<ul id="tp-grid" class="tp-grid">  <li data-pile="logo">     <a class="popup" href="http://www.marvin-online.de/test/images/print/large/visitenkartendesign-erbengemeinschaft.jpg"> <span class="tp-info"><span>logo 1</span></span> <img src="http://www.marvin-online.de/test/images/print/thumbs/visitenkartendesign-erbengemeinschaft.jpg" />     </a> </li>  <li data-pile="logo">     <a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg"> <span class="tp-info"><span>logo 2</span></span> <img src="http://www.marvin-online.de/test/images/print/thumbs/logo-safework-1.jpg" />     </a> </li> </ul> 

ok, i've found solution: add magnific plugin’s code inside stapel’s “onafteropen” callback function. (many thx andrew-david!)