title: Hide a div when magnific popup opens
body: <p>Hi i use magnific pop up for an image gallery and i want to hide a div when the image zoom in and show it again when the image zoom out. This is my code :</p>
  
  <pre><code> $('.gallery-item').magnificPopup({
          type: 'image',
          gallery:{
            enabled:true
          },
          mainClass: 'mfp-with-zoom', // this class is for CSS animation below
  
          zoom: {
          enabled: true, // By default it's false, so don't forget to enable it
  
          duration: 300, // duration of the effect, in milliseconds
          easing: 'ease-in-out',
  
  
           // CSS transition easing function
  
          // The "opener" function should return the element from which popup will be zoomed in
          // and to which popup will be scaled down
          // By defailt it looks for an image tag:
          opener: function(openerElement) {
            // openerElement is the element on which popup was initialized, in this case its &lt;a&gt; tag
           // you don't need to add "opener" option if this code matches your needs, it's defailt one.
           return openerElement.is('img') ? openerElement : openerElement.find('img');
         }
        }
  
  });
  </code></pre>
  
  <p>Where should i put the the hide() and show() functions so they will be triggered same time with the magnific popup.</p>