Callbacks are provided for developers to have more control over specific events that occur while a widget renders on the page. This allows you to achieve custom triggers and functionalities on top of the default widget functionality.
As the widget loads it will check if a particular JavaScript function exists. You can define a particular callback functions for each widget on the page, or within the JS Callbacks template assigned to each component to make the code deployment more consolidated.
Using Widget Callbacks Section
Usage of callbacks section is generally client-specific. We provide two ways for you to access the widget settings via JavaScript if custom scripting is necessary.
Option 1
The Uploader, Lightbox, and Carousel provide a callback object. See what properties are available by logging it to the console:
console.log(w);
Option 2
Within all widgets you can retrieve the specific widget instance by using function below, make sure to reference the appropriate wrapper id from the div tag.
olapic.getWidgetInstance('olapic_specific_widget');Widget Callbacks
Widget: Wall
olapicWallItemsInjected
Executes when:
Packery: after method appended
Normal: after
oQuery('.olapic-wall').append(e);executes, where e is the new item on the olapic-wall
This callback fires just before olapicWallInitSorting executes.
Parameter: Copy of the widget's object
olapicWallAfterLoadPage
Executes after a batch of items (page) are appended to the wall
Parameter: N/A
olapicWallAfterLoad:
Executes when the init state of the wall is ready; at this point the following templates are rendered:
Body
Style
Callbacks
Parameter: N/A
olapicWallBatchCompleted
Executes when all the photos (number of photos per page * number of pages to show) are loaded;
Just before this event fires, the 'Next page / Load more' button is rendered.
Parameter: N/A
olapicWallMouseHover
Executes on hover of each specific photo item (thumbnail item): uses oQuery(elem).on('mouseenter')
Parameter: N/A
olapicWallMouseOut
Executes on hover leave of each specific photo item (thumbnail item): uses oQuery(elem).on('mouseleave')
Parameter: N/A
olapicWallInitSorting
Executes when the sorting mode on the wall is initialized. This happens when
After the wall is initialized
When you click on the 'grid' view button (if you have display option toggle turned on)
Parameter: copy of the widget's object
olapicWallAfterFilter
Executes after the filter is applied
Parameter: N/A
Widget: Carousel
olapicSliderAfterRender
Executes when the slider is ready (DOM rendered and elements are functional)
olapicSliderBeforeInitCarousel
Executes just before initializing the carousel
Parameter: Copy of the widget's object
olapicSliderCarouselBeforePagination
If the carousel config is set to use 'page' pagination, we run this method before calculating the pages. This happens when
during the carousel init
on window resize
Parameter: Copy of the widget's object
olapicSliderPrevToggle
Executes just before the Prev animation start
olapicSliderNextToggle
Executes just before the Next animation start
Widget Styles: Upload Button
olapicButtonAfterRender
Executes when the button is ready (DOM rendered and elements are functional)
Parameter: Copy of the widget's object
Global Components: Media Lightbox
olapicView2AfterRender
Executes after the template styles, overlay, and callbacks are rendered in the DOM
Parameter: Copy of the widget's object
olapicViewer2AfterShow
Executes when the viewer rendering is complete (along with the media's data) and ready to be shown using .show()
Parameter: Copy of the widget's object
olapicViewer2AfterClose
Executes after running .hide() (jQuery) on the div.olapic_viewer_overlay
Parameter: Copy of the widgets object
Global Components: Uploader
olapicUploaderAfterRender
Executes after the template modal and callbacks are rendered in the DOM
Parameter: Copy of the uploader's object
olapicUploaderBeforeOpen
Executes just before the modal fire function that opens the dialog box
Parameter: Copy of the uploader's object
olapicUploaderAfterClose
Executes after the close function of the modal is completed
Parameter: Copy of the uploader's object