javascript jQuery lightbox(featherlight) 如何运行 beforeOpen 和 afterOpen 事件

jQuery lightbox(featherlight) how to run beforeOpen and afterOpen event

提问by Mr.Happy

I am working with this jQuery lightbox which is featherlightand don't understand how to fire bellow events as I am not good so I am hopping someones help:

我正在使用这个 jQuery 灯箱，它是轻量级的，不知道如何触发波纹管事件，因为我不好，所以我希望有人帮助：

Before Open:

打开前：

beforeOpen: function(event){

}

After Open:

打开后：

afterOpen: function(event){

}

My Code Work:

我的代码工作：

<button id="openbox" href="#fl1">Load Lightbox on click event</button>

<div class="lightbox" id="fl1">
    <h2>Delete Item</h2>
    <div class="row">
        <div class="twelve columns">
            <strong>Are you Sure?</strong>
            <br>blubblub?
        </div>
    </div>
    <div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
    <a href="#" class="btn btn_red text_none">Yes</a>
    </div>
</div>


$('#openbox').click(function() {
    $.featherlight('#fl1');
});

My Fiddle: http://jsfiddle.net/g68bZ/29/

我的小提琴：http: //jsfiddle.net/g68bZ/29/

Thanks.

谢谢。

回答by Manan

I have downloaded the source code and follows the documents and both event are working properly with your example.

我已经下载了源代码并按照文档进行操作，并且两个事件都在您的示例中正常工作。

HTML Part:

HTML部分：

<button id="openbox" href="#fl1">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
    <h2>Delete Item</h2>
    <div class="row">
        <div class="twelve columns">
            <strong>Are you Sure?</strong>
            <br>blubblub?
        </div>
    </div>
    <div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
    <a href="#" class="btn btn_red text_none">Yes</a>
    </div>
</div>

jQuery Part:

jQuery 部分：

<script type='text/javascript'> 
    window.onload=function(){
        $('button.#openbox').featherlight({
            targetAttr: 'href',
            beforeOpen: function(event){
                alert('beforeOpen');
            },
            afterOpen: function(event){
                alert('afterOpen');
            }
        });
    }           
</script>

Check this running JSFiddle

检查这个正在运行的JSFiddle

Let me know If you need any other help.

如果您需要任何其他帮助，请告诉我。

回答by JanR

From the documentation you can use the following:

从文档中，您可以使用以下内容：

$('.myElement').featherlight($content, configuration);

$content being a jQuery object, and configuration being an object:

$content 是一个 jQuery 对象，配置是一个对象：

In your example:

在你的例子中：

var configuration = ({
   afterOpen: function(event){
      //code here
   },
   beforeOpen: function(event){
     //code here
   }
});

$('#openbox').click(function() {
    $.featherlight('#fl1', configuration);
});

I haven't tested it, but this should help you in the right direction.

我还没有测试过，但这应该可以帮助你朝着正确的方向前进。