Open magnific popup on button click?

Question

This is the demo html for the gallery (from the magnific popup website):

<div class="popup-gallery">
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" height="75" width="75"></a>
    <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" height="75" width="75"></a>
    <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" height="75" width="75"></a>
    <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" height="75" width="75"></a>
    <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" height="75" width="75"></a>
    <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" height="75" width="75"></a>
    <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" height="75" width="75"></a>
</div>

and this is the jQuery code for the gallery (from the magnific popup website):

$('.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: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
            return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
        }
    }
});

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.

This is my jQuery for the magnificPopup:

$('.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: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    }
});

and this is my html for it:

<div class="portfolio-image-container">   
    <div class="portfolio-image-overlay-dark"></div>
    <div class="hover-show-button-effect-1">
        <span class="button-container-dark-bg">
            <a href="expand-image" href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg"><i class="icon-search"></i></a>
        </span>
        <span class="button-container-dark-bg">
            <a href=""><i class="icon-link"></i></a>
        </span>
    </div>   
    <figure class="portfolio-image">
        <img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" alt="portfolio image" height="300" width="300">
    </figure>     
</div>

Thanks for any help on this, its much appreciated!

Answer 1

$('#buttonID').on('click', function () {
   $('.portfolio-image-container').magnificPopup('open');
});

Answer 2

this works for me

http://codepen.io/ryanjbonnell/pen/dqsxI

jQuery('.gallery-link').on('click', function () {
    jQuery(this).next().magnificPopup('open');
});

jQuery('.gallery').each(function () {
    jQuery(this).magnificPopup({
        delegate: 'div',
        type: 'image',
        gallery: {
            enabled: true,
            tPrev: '',
            tNext: '',
            tCounter: '%curr% | %total%'
        }
    });
});

Answer 3

You can do like bellow (it's working for me :-)

$('#your-button').click(function () {
                $.magnificPopup.open({
                    items: {
                        src: $('#your-form').html(),
                        type: 'inline',
                        callbacks: {
                            beforeOpen: function () {
                                if ($(window).width() < 700) {
                                    this.st.focus = false;
                                } else {
                                    this.st.focus = '#name';
                                }
                            }
                        }
                    }
                });
            });

Answer 4

$('button').click(function(){
   //do something here
});