fancybox - custom button

Question

I am attempting to add a custom button to FancyBox 2's button helper. The new button shows fine, but I can not get any on click behavior with it... the binding does nothing on click. What is the secret to adding your own button with this?

Here is what I was trying to do just to test the button on click to see if it works. Nothing happens.

// init the screenshots
$(".fancybox-screenshots").fancybox({
    prevEffect      : 'none',
    nextEffect      : 'none',
    helpers     : {
        title   : { type : 'inside' },
        buttons : {}
    },
    afterShow: function(){
        $('#fancybox-buttons').on("click", "#btnTest", function(event){
            event.preventDefault();
            alert('testing');
        });
    } //  afterShow
});

Here is the output of the buttons helper :

<div id="fancybox-buttons" class="top">
    <ul>
        <li>
            <a class="btnPrev" href="javascript:;" title="Previous"></a>
        </li>
        <li>
           <a class="btnPlay" href="javascript:;" title="Start slideshow"></a>
        </li>
        <li>
           <a class="btnNext" href="javascript:;" title="Next"></a>
        </li>
        <li>
           <a class="btnToggle" href="javascript:;" title="Toggle size"></a>
        </li>
        <li>
           <a id="btnTest" href="javascript:;" title="Test Button"></a>
        </li>
        <li>
           <a class="btnClose" href="javascript:;" title="Close"></a>
        </li>
    </ul>
</div>

EDIT :

I have included a jsfiddle - fiddle - the button I added in the fiddle is the second to the last... in this case it is another toggle between toggle and close. I didn't feel like adding the images for my button. Corrected css.

Answer 1

Here is your fiddle updated jsfiddle

afterShow: function (opts, obj) {
  $('#fancybox-buttons').on("click", "#btnTest", function(event){
        event.preventDefault();
        alert('testing');
}