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.