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:

Event Description Arguments
foobox.beforeShow before the item is shown e.fb.item
foobox.beforeLoad before the item is loaded e.fb.item
foobox.afterLoad after the item is loaded e.fb.item
foobox.afterShow after the item is shown e.fb.item
foobox.onError when an error occurs while loading an item e.fb.error
foobox.beforeResize before the item is resized e.fb.item
foobox.afterResize after the item is resized e.fb.item, e.fb.size
foobox.close after closed
foobox.previous after navigating previous
foobox.next after 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.