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

时间:2014-10-01 06:37:04

标签: javascript jquery lightbox featherlight.js

我正在使用这个featherlight的jQuery灯箱,并且不了解如何解雇波纹管事件,因为我不好,所以我跳了一些人的帮助:

开放前:

beforeOpen: function(event){

}

开放后:

afterOpen: function(event){

}


我的代码工作:

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

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

感谢。

2 个答案:

答案 0 :(得分:6)

我已下载源代码并遵循文档,这两个事件都与您的示例一起正常运行。

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:

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

检查此运行JSFiddle

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

答案 1 :(得分:0)

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

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

$ content是一个jQuery对象,配置是一个对象:

在你的例子中:

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

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

我还没有对它进行过测试,但这可以帮助你朝着正确的方向前进。