Here is your fiddle updated jsfiddle
afterShow: function (opts, obj) {
$('#fancybox-buttons').on("click", "#btnTest", function(event){
event.preventDefault();
alert('testing');
}
سؤال
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.
المحلول
Here is your fiddle updated jsfiddle
afterShow: function (opts, obj) {
$('#fancybox-buttons').on("click", "#btnTest", function(event){
event.preventDefault();
alert('testing');
}