title: Open magnific popup on button click?
body: <p>This is the demo html for the gallery (from the magnific popup website):</p>
  
  <pre><code>&lt;div class="popup-gallery"&gt;
      &lt;a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"&gt;&lt;img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" height="75" width="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"&gt;&lt;img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" height="75" width="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"&gt;&lt;img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" height="75" width="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"&gt;&lt;img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" height="75" width="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"&gt;&lt;img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" height="75" width="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"&gt;&lt;img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" height="75" width="75"&gt;&lt;/a&gt;
      &lt;a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"&gt;&lt;img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" height="75" width="75"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the jQuery code for the gallery (from the magnific popup website):</p>
  
  <pre><code>$('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
          enabled: true,
          navigateByImgClick: true,
          preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
          tError: '&lt;a href="%url%"&gt;The image #%curr%&lt;/a&gt; could not be loaded.',
          titleSrc: function(item) {
              return item.el.attr('title') + '&lt;small&gt;by Marsel Van Oosten&lt;/small&gt;';
          }
      }
  });
  </code></pre>
  
  <p>In the website example you just click the image to open the lightbox but I would like to add the same functionality to a button click. So I have written the HTML and css for the button to appear when the image is hovered over but I don't how to modify the jQuery so that instead of clicking the image to open the lightbox you just click the button the button instead.</p>
  
  <p>This is my jQuery for the magnificPopup:</p>
  
  <pre><code>$('.portfolio-image-container').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
          enabled: true,
          navigateByImgClick: true,
          preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
          tError: '&lt;a href="%url%"&gt;The image #%curr%&lt;/a&gt; could not be loaded.',
      }
  });
  </code></pre>
  
  <p>and this is my html for it: </p>
  
  <pre><code>&lt;div class="portfolio-image-container"&gt;   
      &lt;div class="portfolio-image-overlay-dark"&gt;&lt;/div&gt;
      &lt;div class="hover-show-button-effect-1"&gt;
          &lt;span class="button-container-dark-bg"&gt;
              &lt;a href="expand-image" href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/span&gt;
          &lt;span class="button-container-dark-bg"&gt;
              &lt;a href=""&gt;&lt;i class="icon-link"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/span&gt;
      &lt;/div&gt;   
      &lt;figure class="portfolio-image"&gt;
          &lt;img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" alt="portfolio image" height="300" width="300"&gt;
      &lt;/figure&gt;     
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for any help on this, its much appreciated!</p>