FooBox jQuery Events

FooBox has a number of events that you can hook into, to customize the overall experience. Here are some of the more useful events and what they offer:

EventDescriptionArguments
foobox.beforeShowbefore the item is showne.fb.item
foobox.beforeLoadbefore the item is loadede.fb.item
foobox.afterLoadafter the item is loadede.fb.item
foobox.afterShowafter the item is showne.fb.item
foobox.onErrorwhen an error occurs while loading an iteme.fb.error
foobox.beforeResizebefore the item is resizede.fb.item
foobox.afterResizeafter the item is resizede.fb.item, e.fb.size
foobox.closeafter closed
foobox.previousafter navigating previous
foobox.nextafter navigating next

Bind To A Single Event

Bind using the FooBox container selector:

jQuery('.fbx-instance').on('foobox.afterLoad', function(e) {  alert(e.fb.item.url);  });

Bind To A Multiple Events

Bind to multiple events (separated by spaces), again using the FooBox instance:

jQuery('.fbx-instance')  .on('foobox.close foobox.next foobox.previous', function(e) {  //do something  });

WHERE DO I PUT THIS CODE? If you are using the FooBox WordPress plugin, you can paste this javscript code into the FooBox settings page under JS & CSS > Custom Javscript (Pre). You can also put this code into a separate javscript file, which you can include in your theme.