Question

这是图库的演示html（来自Magnific popup网站）：

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

这是图库的jQuery代码（来自Magnific popup网站）：

$('.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>';
        }
    }
});

在网站示例中，您只需单击图像即可打开灯箱，但我想为按钮单击添加相同的功能。所以我编写了HTML和css，当图像悬停在屏幕上时，按钮会出现，但我不知道如何修改jQuery，这样您只需单击按钮按钮即可点击图像打开灯箱

这是我的jQuery for 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.',
    }
});

这是我的html：

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

感谢您对此提供任何帮助，非常感谢！

Answer 1

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

Answer 2

你可以这样做（它对我有用： - ）

$('#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 3

这对我有用

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 4

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

点击按钮打开巨大的弹出窗口？

4 个答案: